jquery- how to validate each page of tab for form? - javascript

I have a form that looks like this:
I want every input to be mandatory and requires user to enter before proceeding to the next tab,by click the next button. I implemented the jquery validation plugin and it looks like below:
Code:
<form method="POST" action="{{ route('register') }}" id="register-form">
#csrf
<div class="tab-content" id="myTabContent">
<!-- Registration Tab-->
<div class="tab-pane fade show active" id="registration" role="tabpanel" aria-labelledby="registration-tab">
<h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Account Particulars</h5>
<div class="form-row">
<div class="form-group col-md-12">
<label for="email">Email</label>
<input type="email" name="email" class="form-control" required id="email" placeholder="Email">
</div>
<div class="form-group col-md-12">
<label for="password">Password</label>
<input type="password" name="password" class="form-control" required id="password">
</div>
<div class="form-group col-md-12">
<label for="password-confirm">Confirm Password</label>
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
</div>
</div>
<!-- Next Button -->
<div class="text-right">
<!-- <a class="btn btn-secondary next-button" id="information-tab" data-toggle="tab" href="#information" role="tab" aria-controls="profile" aria-selected="false">Next</a> -->
<a class="btn btn-secondary next-button" id="next-btn">Next</a>
</div>
</div>
<!-- Information Tab -->
<div class="tab-pane fade" id="information" role="tabpanel" aria-labelledby="information-tab">
<!-- Personal Particulars -->
<h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Personal Particulars</h5>
<div class="form-row">
<div class="form-group col-md-6">
<label for="full_name">Full Name (as per NRIC)</label>
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Full Name">
</div>
<div class="form-group col-md-6">
<label for="nric">NRIC Number</label>
<input type="text" name="nric" class="form-control" id="nric" placeholder="NRIC Number">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="address_1">Address Line 1</label>
<input type="text" name="address_1" id="address_1" class="form-control" placeholder="Residential Address Line 1">
</div>
<div class="form-group col-md-12">
<label for="address_1">Address Line 2</label>
<input type="text" name="address_2" id="address_2" class="form-control" placeholder="Residential Address Line 1">
</div>
<div class="form-group col-md-12">
<label for="address_1">Address Line 3</label>
<input type="text" name="address_3" id="address_3" class="form-control" placeholder="Residential Address Line 1">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="postcode">Postcode</label>
<input type="text" name="postcode" id="postcode" class="form-control" placeholder="Postcode">
</div>
<div class="form-group col-md-6">
<label for="city">City</label>
<input type="text" name="city" id="city" class="form-control" placeholder="City">
</div>
<div class="form-group col-md-12">
<label for="state">State</label>
<select name="state" id="state" class="form-control">
<option disabled selected>Choose your state..</option>
#foreach($states as $state)
<option class="text-capitalize" value="{{ $state->id }}">{{ $state->name }}</option>
#endforeach
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="contact_number_home">Contact Number (Home)</label>
<input type="text" name="contact_number_home" class="form-control" placeholder="Home Contact Number">
</div>
<div class="form-group col-md-6">
<label for="contact_number_mobile">Contact Number (Mobile)</label>
<input type="text" name="contact_number_mobile" class="form-control" placeholder="Mobile Contact Number">
</div>
</div>
<div class="form-row">
<div class="col-12">
<label style="display: block;" for="existing_customer_options">Are you an existing Destiny Code customer?</label>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="existing_customer" value="0" checked>
<label class="form-check-label" for="existing_customer">No</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="existing_customer" value="1">
<label class="form-check-label" for="existing_customer">Yes</label>
</div>
</div>
</div>
<!-- Next Button -->
<div class="text-right">
<!-- <a class="btn btn-secondary next-button" id="agreement-tab" data-toggle="tab" href="#agreement" role="tab" aria-controls="profile" aria-selected="false">Next</a> -->
<a class="btn btn-secondary next-button">Next</a>
</div>
</div>
<div class="tab-pane fade" id="agreement" role="tabpanel" aria-labelledby="agreement-tab">
<h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Agreement</h5>
<!-- Registration Agreement -->
...............
<div class="row">
<div class="col-12 col-md-8 offset-md-2 pl-3 pr-3 pt-2 mb-0">
<canvas class="display-block signature-pad" style="touch-action: none;"></canvas>
<p id="signatureError" style="color: red; display: none;">Please provide your signature.</p>
<div class="p-1 text-right">
<button id="resetSignature" class="btn btn-sm" style="background-color: lightblue;">Reset</button>
<button id="saveSignature" class="btn btn-sm" style="background-color: #fbcc34;">Save</button>
</div>
<input type="hidden" name="signature" id="signatureInput">
</div>
</div>
<div class="row">
<div class="col-12 mb-0 pt-2">
<!-- Submit Button -->
<div class="text-right">
<input type="hidden" name="registrationFor" value="customer">
<button type="submit" class="bjsh-btn-gold text-right">Sign Up</button>
</div>
</div>
</div>
// Validate each input tab before moving to the next tab
$(document).ready(function() {
$("#register-form").validate({
rules: {
email: "required",
password:"required",
password_confirmation:"required"
},
messages: {
email: "Please enter an email",
password: "Please enter a password",
password_confirmation: "Please confirm your password"
}
})
$('#next-btn').on('click',function() {
$("#register-form").valid();
});
});
I checked my console and there is no error and I implemented the correct library, however I can still proceed to the next button. Why is it not working?


actually error occurs but your form is redirecting to another page so add this
event.preventDefault();
before
$("#register-form").valid();

Related

Why do my circular buttons break when going from Bootstrap 3 to Bootstrap 4?

I have the following fiddle:
https://jsfiddle.net/b3x6ou4k/
When I change the CSS link from Bootstrap 3 to Bootstrap 4 (using https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css as the CSS), the circle buttons change to square.
Why does the CSS for circular buttons:
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
not work in Bootstrap 4 and how do I keep this style:
rather than this style:
when upgrading from 3 to 4?

You'll want to consult the migration docs, but this seems to approximate what you had before: https://jsfiddle.net/xrcu92bo/1/
<div class="container">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step col-xs-3">
1
<p><small>Shipper</small></p>
</div>
<div class="stepwizard-step col-xs-3">
2
<p><small>Destination</small></p>
</div>
<div class="stepwizard-step col-xs-3">
3
<p><small>Schedule</small></p>
</div>
<div class="stepwizard-step col-xs-3">
4
<p><small>Cargo</small></p>
</div>
</div>
</div>
<form role="form">
<div class="panel panel-primary setup-content" id="step-1">
<div class="panel-heading">
<h3 class="panel-title">Shipper</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
</div>
<button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
</div>
</div>
<div class="panel panel-primary setup-content" id="step-2">
<div class="panel-heading">
<h3 class="panel-title">Destination</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
</div>
</div>
<div class="panel panel-primary setup-content" id="step-3">
<div class="panel-heading">
<h3 class="panel-title">Schedule</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
</div>
</div>
<div class="panel panel-primary setup-content" id="step-4">
<div class="panel-heading">
<h3 class="panel-title">Cargo</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-success pull-right" type="submit">Finish!</button>
</div>
</div>
</form>
</div>
Basically, .btn-default doesn't exist in Bootstrap 4; the closest you get is .btn-light. I also added the .border class, since the light button doesn't have a lot of contrast with your background.
Also, the disabled property doesn't actually do anything on an anchor tag - you'll want to use the disabled class if you want to prevent users from clicking on "disabled" steps.

Print html form input value or specific div content in JS with CSS

I have a form of a prescription. I want to print out that prescription form while submit and also want a proper format in that printout page.
form html
<form role="form" class="registration-form" id="registration_form_id">
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Patient Information</h3>
</div>
<div class="form-top-right">
<i class="fa fa-user"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label for="form-first-name">Name</label>
<input type="text" name="form-first-name" placeholder="name" class="form-first-name form-control require" id="name">
</div>
<div class="form-group">
<label for="form-last-name">Age</label>
<input type="number" name="form-last-name" placeholder="Age" class="form-last-name form-control require" id="age" >
</div>
<div class="form-group">
<label for="form-last-name">Mobile Number</label>
<input type="number" name="form-last-name" placeholder="Mobile Number" class="form-last-name form-control require" id="mobile_number" >
</div>
<div class="form-group">
<label for="form-last-name">Religion</label>
<input type="text" name="form-last-name" placeholder="Religion" class="form-last-name form-control require" id="religion" >
</div>
<div class="form-group">
<label for="form-last-name">Occupation</label>
<input type="text" name="form-last-name" placeholder="Occupation" class="form-last-name form-control require" id="occupation" required>
</div>
<div class="form-group">
<h4>Gender</h4>
<div class="row">
<div class="col-md-4">
Male<input class="col-md-4" type="radio" name="gender" value="1">
</div>
<div class="col-md-4">
Female<input class="col-md-4" type="radio" name="gender" value="2">
</div>
<div class="col-md-4">
Other<input class="col-md-4" type="radio" name="gender" value="3">
</div>
</div>
</div>
<div class="form-group">
<h4>Marital status</h4>
<div class="row">
<div class="col-md-4">
Married<input type="radio" class="col-md-4" name="marital_status" value="1">
</div>
<div class="col-md-4">
Single<input type="radio" name="marital_status" class="col-md-4" value="1">
</div>
</div>
</div>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="form-about-yourself">Allergic history</label>
<textarea name="allergic_history" placeholder="Allergic history" class="form-about-yourself form-control " id="allergic_history" ></textarea>
</div>
<div class="form-group">
<label for="form-about-yourself">Personal history</label>
<textarea name="personal_history" placeholder="Personal history" class="form-about-yourself form-control " id="personal_history" ></textarea>
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn" id="prescription_form_submition">Submit!</button>
</fieldset>
printout code in js
var divToPrint = document.getElementById('registration_form_id');
newWin= window.open("");
newWin.document.write('<html><style>#media print{body {font-size:16px;} #patient_doctor_info{border-bottom:1px solid #ccc;overflow:hidden;padding:20px 0 10px 0;} #patient_doctor_info span{font-size:18px;} #patient_info{float:left;} #doctor_info{float:right;} #patient_prescription_info{padding:20px 0;overflow:hidden;} #patient_old_prescription{padding-right:5%;border-bottom:1px solid #000;} #patient_new_prescription{overflow:hidden;padding:0 20px;} .new_prescription{font-size : 20px}}</style><body onload="window.print()"><div id="patient_doctor_info"><div id="patient_info"><p><lable>Name :</lable><span><b>'+name+'</b></span></p><p><lable>Mobile Number :</lable><span><b>'+mobile_no+'</b></span></p><p><lable>Age :</lable><span><b>'+age+'</b></span></p><p><lable>Gender :</lable><span><b>'+sex+'</b></span></p></div><div id="patient_prescription_info"><div id="patient_old_prescription"><p><lable>Allergy :</lable><span><b>'+allergic_history+'</b></span></p><p><lable>Social History :</lable><span><b>'+personal_history+'</b></span></p></div></div></body></html>');
newWin.print();
newWin.close();
the print pagelooks like the below image
But I want like below image
So my main questions are.....
how to printout specific div or form value of a webpage using javascript.
How to apply css in that print page?
I have googling this issue several times but still not getting proper solution.
Anybody help please ?

How to call my function in Bootstrap Checkout example?

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict'
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation')
// Loop over them and prevent submission
Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
}, false)
}())
// Where do I have to call myfunction?
function myFunction (){
alert('All Values are valid');
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="py-5 text-center">
<img class="d-block mx-auto mb-4" src="/docs/4.3/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h2>Checkout form</h2>
<p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
</div>
<div class="row">
<div class="col-md-4 order-md-2 mb-4">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Your cart</span>
<span class="badge badge-secondary badge-pill">3</span>
</h4>
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Product name</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$12</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Second product</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$8</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Third item</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$5</span>
</li>
<li class="list-group-item d-flex justify-content-between bg-light">
<div class="text-success">
<h6 class="my-0">Promo code</h6>
<small>EXAMPLECODE</small>
</div>
<span class="text-success">-$5</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>Total (USD)</span>
<strong>$20</strong>
</li>
</ul>
<form class="card p-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="Promo code">
<div class="input-group-append">
<button type="submit" class="btn btn-secondary">Redeem</button>
</div>
</div>
</form>
</div>
<div class="col-md-8 order-md-1">
<h4 class="mb-3">Billing address</h4>
<form class="needs-validation" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid last name is required.
</div>
</div>
</div>
<div class="mb-3">
<label for="username">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" id="username" placeholder="Username" required>
<div class="invalid-feedback" style="width: 100%;">
Your username is required.
</div>
</div>
</div>
<div class="mb-3">
<label for="email">Email <span class="text-muted">(Optional)</span></label>
<input type="email" class="form-control" id="email" placeholder="you#example.com">
<div class="invalid-feedback">
Please enter a valid email address for shipping updates.
</div>
</div>
<div class="mb-3">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
<div class="invalid-feedback">
Please enter your shipping address.
</div>
</div>
<div class="mb-3">
<label for="address2">Address 2 <span class="text-muted">(Optional)</span></label>
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
</div>
<div class="row">
<div class="col-md-5 mb-3">
<label for="country">Country</label>
<select class="custom-select d-block w-100" id="country" required>
<option value="">Choose...</option>
<option>United States</option>
</select>
<div class="invalid-feedback">
Please select a valid country.
</div>
</div>
<div class="col-md-4 mb-3">
<label for="state">State</label>
<select class="custom-select d-block w-100" id="state" required>
<option value="">Choose...</option>
<option>California</option>
</select>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="zip">Zip</label>
<input type="text" class="form-control" id="zip" placeholder="" required>
<div class="invalid-feedback">
Zip code required.
</div>
</div>
</div>
<hr class="mb-4">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="same-address">
<label class="custom-control-label" for="same-address">Shipping address is the same as my billing address</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="save-info">
<label class="custom-control-label" for="save-info">Save this information for next time</label>
</div>
<hr class="mb-4">
<h4 class="mb-3">Payment</h4>
<div class="d-block my-3">
<div class="custom-control custom-radio">
<input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked required>
<label class="custom-control-label" for="credit">Credit card</label>
</div>
<div class="custom-control custom-radio">
<input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required>
<label class="custom-control-label" for="debit">Debit card</label>
</div>
<div class="custom-control custom-radio">
<input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required>
<label class="custom-control-label" for="paypal">PayPal</label>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="cc-name">Name on card</label>
<input type="text" class="form-control" id="cc-name" placeholder="" required>
<small class="text-muted">Full name as displayed on card</small>
<div class="invalid-feedback">
Name on card is required
</div>
</div>
<div class="col-md-6 mb-3">
<label for="cc-number">Credit card number</label>
<input type="text" class="form-control" id="cc-number" placeholder="" required>
<div class="invalid-feedback">
Credit card number is required
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 mb-3">
<label for="cc-expiration">Expiration</label>
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
<div class="invalid-feedback">
Expiration date required
</div>
</div>
<div class="col-md-3 mb-3">
<label for="cc-cvv">CVV</label>
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
<div class="invalid-feedback">
Security code required
</div>
</div>
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
</form>
</div>
</div>
<footer class="my-5 pt-5 text-muted text-center text-small">
<p class="mb-1">© 2017-2019 Company Name</p>
<ul class="list-inline">
<li class="list-inline-item">Privacy</li>
<li class="list-inline-item">Terms</li>
<li class="list-inline-item">Support</li>
</ul>
</footer>
</div>
Hello!
I try to call my function in the Bootstrap example "Checkout" example when all necessary input fields are ok.
But I don't understand where I have to call myfunction in the bootstrap example javascript code.
Myfunction should be called when all nessesary fields are ok and the form should be send.
See the code snippet below.
Thanks for your help!

Jquery not firing onchange with bootstrap 4

I have code which works:
<div id="type" class="btn-group" data-toggle="buttons">
<label class="btn btn-outline-primary" id="type0">
<input id="type0" name="op" type="radio" value="0" />Wholesale</label>
<label class="btn btn-outline-primary" id="type1">
<input id="type1" name="op" type="radio" value="1" />Retail</label>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script>
jQuery(function ($) {
$(document).on('change', 'input:radio[id^="type"]', function (event) {
alert("click fired");
});
});
</script>
This can be seen at http://118.127.41.41/~emmarkho1/calculator/test.html
I have integrated this code into my calculator I'm building but it refuses to fire on change.
Full source can be seen # http://118.127.41.41/~emmarkho1/calculator/
Any assistance would be greatly appreciated.

check the below one hope it helps.
$(document).ready(function() {
$('input[type=radio][name=op]').change(function() {
<!-- event.preventDefault(); -->
alert("click fired");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-xl-8">
<form name="corflute" id="corflute" action="" method="post">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Customer Type</label>
<div class="col-sm-9">
<div id="type" class="btn-group" data-toggle="buttons">
<label class="btn btn-outline-primary" id="type0">
<input id="type0" name="op" type="radio" value="0" />Wholesale</label>
<label class="btn btn-outline-primary" id="type1">
<input id="type1" name="op" type="radio" value="1" />Retail</label>
</div>
<!-- <div class="btn-group" data-toggle="buttons">
<label class="btn btn-outline-primary id="type1" ">
<input type="radio" value="0" name="type" id="type1" autocomplete="off" >Wholesale
</label>
<label class="btn btn-outline-primary id="type2" active">
<input type="radio" value="1" name="type" id="type2" autocomplete="off" checked >Retail
</label>
</div> -->
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label label-top">Size<br><span class="label-info">metres</span></label>
<div class="col-sm-3">
<label class="center">Width</label>
<input class="form-control" type="text" onChange='this.form.submit();' name="width" id="width" value="">
</div>
<div class="col-sm-3">
<label class="center">Height</label>
<input class="form-control" type="text" onchange='myfuction();' name="height" id="height" value="">
</div>
<div class="col-sm-3">
<label class="center">Quantity</label>
<input class="form-control" type="text" name="quantity" id="quantity" value="1">
</div>
</div>
<div class="form-group row">
<label class="col-sm-6 col-form-label top">Signs per sheet<br><span class="label-info">sheet size 2440mm x 1220mm</span></label>
<div class="col-sm-3">
<input class="form-control" type="text" name="sps" id="sps" value="1">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Artwork</label>
<div class="col-sm-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-outline-primary active">
<input type="radio" value="0" name="artwork" id="art1" autocomplete="off">Basic
</label>
<label class="btn btn-outline-primary ">
<input type="radio" value="1" name="artwork" id="art2" autocomplete="off">Standard
</label>
<label class="btn btn-outline-primary ">
<input type="radio" value="2" name="artwork" id="art3" autocomplete="off">Complex
</label>
</div>
</div>
</div>
<div class="form-group row">
<button type="submit" name="corflute" class="right btn btn-warning">Calculate</button>
</div>
</form>
<div class="divider"></div>
</div>
<div class="col-xl-4">
<div class="col-md-12 right-sidebar">
<div class="side-blocks">
<form name="CorfluteSettings" id="CorfluteSettings" action="" method="post">
<input type="submit" name="Settings" style="visibility: hidden;" />
<div class="form-group row">
<label class="col-xs-8 col-form-label top">Substrate Cost<br><span class="label-info">Per Square Metre</span></label>
<div class="col-xs-4">
<input class="form-control" type="text" name="subcost" id="subcost" onchange="javascript:document.forms['CorfluteSettings'].submit()" value="5.5">
</div>
</div>
<div class="form-group row">
<label class="col-xs-8 col-form-label top">Mark-up<br><span class="label-info">Default 250%</span></label>
<div class="col-xs-4">
<input class="form-control" type="text" name="submu" id="submu" onchange="javascript:document.forms['CorfluteSettings'].submit()" value="250">
</div>
</div>
<div class="form-group row">
<label class="col-xs-8 col-form-label top">Substrate rate<br><span class="label-info">Per Square Metre</spane></label>
<div class="col-xs-4">
<input disabled class="form-control" type="text" name="subrate" id="subrate" value="19.25">
</div>
</div>
</div>
<div class="side-blocks">
<div class="form-group row">
<label class="col-xs-8 col-form-label top">Print Media Cost<br><span class="label-info">Per Square Metre</span></label>
<div class="col-xs-4">
<input class="form-control" type="text" name="pmc" id="pmc" onchange="javascript:document.forms['CorfluteSettings'].submit()" value="4.5">
</div>
</div>
<div class="form-group row">
<label class="col-xs-8 col-form-label top">Solvent Ink Cost<br><span class="label-info">Per Square Metre</span></label>
<div class="col-xs-4">
<input class="form-control" type="text" name="sic" id="sic" onchange="javascript:document.forms['CorfluteSettings'].submit()" value="5">
</div>
</div>
<div class="form-group row">
<label class="col-xs-8 col-form-label top">Mark up<br><span class="label-info">default 250%</spane></label>
<div class="col-xs-4">
<input class="form-control" type="text" name="printmu" id="subrate" value="250">
</div>
</div>
<div class="form-group row">
<label class="col-xs-8 col-form-label top">Print Rate<br><span class="label-info">Per Square Metre</spane></label>
<div class="col-xs-4">
<input disabled class="form-control" type="text" name="printrate" id="printrate" value="33.25">
</div>
</div>
</div>
<div class="side-blocks last">
<div class="form-group row">
<label class="col-xs-8 col-form-label top">Mount Time<br><span class="label-info">Per Panel(mins)</span></label>
<div class="col-xs-4">
<input class="form-control" type="text" name="mt" id="bt" onchange="javascript:document.forms['CorfluteSettings'].submit()" value="15">
</div>
</div>
<div class="form-group row">
<label class="col-xs-8 col-form-label top">Track Time<br><span class="label-info">Per Cut(mins)</span></label>
<div class="col-xs-4">
<input class="form-control" type="text" name="tt" id="tt" onchange="javascript:document.forms['CorfluteSettings'].submit()" value="2">
</div>
</div>
<div class="form-group row">
<label class="col-xs-8 col-form-label top">Hourly Rate<br><span class="label-info">Dollars Per hour</spane></label>
<div class="col-xs-4">
<input class="form-control" type="text" name="hr" id="hr" onchange="javascript:document.forms['CorfluteSettings'].submit()" value="110">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

On your page you are using inputs with different ids - art1, art2 etc.
So you should update the code to:
jQuery(function ($) {
$(document).on('change', 'input:radio[id^="art"]', function (event) {
alert("click fired");
});
});
or in your particular case shorter:
$('input:radio[id^="art"]').change(function(){
alert("click fired");
});

AngularJS form refuses to validate on submission

My angular form refuses to validate on submit. I have multiple other forms set up similarly that work completely fine. It prevents submission if invalid, however, it does not show any error messages at all.
<div class="card card-block signup-card">
<h1>Sign Up</h1>
<form role="form" name="signupForm" ng-submit="signupForm.$valid && uploadPic(picFile)" novalidate>
<div class="form-group text-center">
<span ng-show="imageError" style="color: #c0392b; padding-bottom: 1em; font-weight: bold;">Please choose a profile picture</span>
<div class="profile-image">
<div class="profile-preview">
<img ng-show="signupForm.file.$valid" ngf-src="picFile" class="thumb">
<button ng-click="picFile = null" ng-show="picFile">Remove</button>
</div>
<input type="file" id="file" ngf-select ng-model="picFile" name="file"
accept="image/*" ngf-max-size="2MB" required
ngf-model-invalid="errorFiles" style="display:none;">
<label for="file" class="btn btn-green btn-md">Upload Picture</label>
</div>
</div>
<div class="form-group">
<label for="email">Email ending in .edu</label>
<input type="email" class="form-control" edu-email-validate ng-model="user.email" id="email" placeholder="Email must end in .edu" required="">
</div>
<div class="form-group">
<label for="fname">First Name</label>
<input type="text" class="form-control" id="fname" ng-model="user.firstName" placeholder="First Name" name="firstname" required="">
<span ng-show="signupForm.firstname.$error.required"></span>
</div>
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" id="lastname" ng-model="user.lastName" placeholder="Last Name" name="lastname" required>
<span ng-show="signupForm.lastname.$error.required"></span>
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" ng-model="user.username" placeholder="Username" name="username" required>
<span ng-show="signupForm.username.$error.required"></span>
</div>
<div class="form-group">
<label for="gradclass">Graduation Year</label>
<input type="number" class="form-control" min="2016" max="2024" integer id="gradclass" ng-model="user.gradClass" placeholder="Graduation Year" required>
<span ng-show="signupForm.user.gradClass.$error.integer">Not a valid graduation year!</span>
<span ng-show="signupForm.user.gradClass.$error.min || signupForm.size.$error.max"></span>
</div>
<div class="form-group">
<label for="school">School</label>
<select class="form-control" id="school" ng-model="user.schoolId" name="school" required>
<option disabled selected="selected" value="0">Choose School</option>
<option value="1">Champlain College</option>
<option value="2">UVM</option>
</select>
<span ng-show="signupForm.school.$error.required">Please select a school</span>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" ng-model="user.password" equals="{{ user.passwordCheck }}" ng-minlength= "6" placeholder="Password" name="password" required>
<span ng-show="signupForm.password.$error.required"></span>
</div>
<div class="form-group">
<label for="password-2">Password Again</label>
<input type="password" class="form-control" id="password-2" ng-model="user.passwordCheck" equals=" {{ user.password }}" ng-minlength = "6"placeholder="Password Again" name="password2" required>
<span ng-show="signupForm.password2.$error.required"></span>
</div>
<div class="login-bottom-container">
<input type="submit" class="btn btn-green btn-lg" value="Sign up" ng-click="submitted = true">
<div class="right">
<a ui-sref="terms" style="margin-top: 1em; display: block;">By signing up you agree to the terms and conditions of BlackMarket University</a>
</div>
<span class="progress" ng-show="picFile.progress >= 0">
<div style="width:{{picFile.progress}}%; background-color: #2980b9; color: #FFF; padding: 1em .5em;font-weight: 500; border-radius: 50%;" ng-bind="picFile.progress + '%'"></div>
</span>
<span ng-show="picFile.result">Upload Successful</span>
<span class="err" ng-show="errorMsg">Error making account.</span>
</div>
</form>
</div>
Any help is greatly appreciated.
Edit
This is code that is working:
<link href="css/profile.css" rel="stylesheet">
<div class="row" style="padding-top: 1em;padding-bottom: 1em;">
<div class="col-md-8 col col-xs-12">
<div class="buffer">
<div class="profile-picture" style="background-image:url({{ addRoute(currentUser.profile_picture) }}); background-size:cover;">
</div>
<div class="profile-container">
<h2 class="name-highlight">Hi, {{currentUser.firstName}} {{currentUser.lastname}}</h3>
<h4 class="name-highlight">{{ currentUser.school }} class of {{currentUser.grad_class}}</h4>
</div>
</div>
<div class="col-md-6 col-xs-12">
<h2>Update your profile</h2>
<form role="form" name="profileForm" ng-submit="profileForm.$valid && updateUser()" novalidate>
<label for="username">Username</label>
<input type="text" value="{{currentUser.username}}" name = "username" ng-model="currentUser.username" placeholder="Username" id="username" class="item-input-profile form-control" required="">
<div ng-show="profileForm.$submitted || profileForm.username.$touched">
<span ng-show="profileForm.username.$error.required" style="color: red;">Please put a username!</span>
</div>
<label for="email">Email</label>
<input type="email" value="{{ currentUser.email }}" name="email" ng-model="currentUser.email" placeholder="Email" id="email" class="item-input-profile form-control" required="">
<div ng-show="profileForm.$submitted || profileForm.email.$touched">
<span ng-show="profileForm.email.$error.required" style="color: red;">Please put an email!</span>
</div>
<label for="bio">Bio</label>
<textarea type="textarea" role="textarea" name="bio" ng-model="currentUser.bio" id="bio" class="item-input-profile form-control" placeholder="Bio"></textarea>
<input type="submit" class="btn btn-green btn-lg" value="Update Profile">
</form>
</div>
<div class="col-md-6 col-xs-12">
<h2>Update your password</h2>
<form role="form" name="passwordForm" ng-submit="passwordForm.$valid && updatePasswords()" novalidate>
<label for="oldpassword">Your old password</label>
<input type="password" placeholder="Old Password" ng-model="updatePassword.oldpassword" id="oldpassword" name="oldpassword" ng-minlength= "6" class="item-input-profile form-control" required>
<div ng-show="passwordForm.$submitted || passwordForm.oldpassword.$touched">
<span ng-show="passwordForm.oldpassword.$error.required" style="color: red;">Please put in your old password</span>
</div>
<label for="newpassword">Your new password</label>
<input type="password" placeholder="New Password" ng-model="updatePassword.newpassword" id="newpassword" ng-minlength= "6" name="newpassword" equals="{{ currentUser.passwordagain }}"class="item-input-profile form-control" required>
<div ng-show="passwordForm.$submitted || passwordForm.newpassword.$touched">
<span ng-show="passwordForm.newpassword.$error.required" style="color: red;">Please put in your new password</span>
</div>
<label for="passwordagain">Your new password again</label>
<input type="password" placeholder="New Password Again" ng-model="updatePassword.passwordagain" id="passwordagain" ng-minlength= "6" name="passwordagain" equals="{{ currentUser.newpassword }}" class="item-input-profile form-control" required>
<div ng-show="passwordForm.$submitted || passwordForm.passwordagain.$touched">
<span ng-show="passwordForm.passwordagain.$error.required" style="color: red;">Please put in your new password again</span>
</div>
<input type="submit" class="btn btn-green btn-lg" value="Change Password">
</form>
</div>
</div>
<div class="col-md-4 col-xs-12">
<h2 class="gray-header text-center" ng-if="!hasPosts">No posts to show</h2>
<div class="post-card profile-post" ng-repeat="post in currentUser.posts.posts">
<div class="item-slider">
<uib-carousel interval="myInterval" no-wrap="noWrapSlides">
<uib-slide ng-repeat="image in post.images" active="slide.active" index="slide.id">
<img ng-src="{{addRoute(image.path)}}" style="margin:auto;">
</uib-slide>
</uib-carousel>
</div>
<div class="profile-image" style="background-image:url( {{ addRoute(post.profile_picture) }} ); background-size: cover;"></div>
<div class="post-content">
<div class="top-info">
<span><div class="glyphicon glyphicon-user"> </div></span><span class="post-username">{{ post.firstname}} {{ post.lastname }}</span>
<br>
<span><div class="glyphicon glyphicon-tag"> </div></span><span class="post-username">{{ post.category}}</span>
</div>
<div class="wrap">
<h1 class="post-title">{{post.title}} - <span class="price">{{post.price}}</span></h1>
<p class="description">
{{post.content}}
</p>
</div>
<button type="button" class="btn btn-danger btn-lg btn-block" ng-click="deletePost(post.id)">Delete Post</button>
</div>
</div>
</div>
</div>

Updated answer
NOTE: Angular validation works on name attribute
<!DOCTYPE html>
<html lang="en-US" ng-app="">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body>
<div class="card card-block signup-card">
<h1>Sign Up</h1>
<form role="form" name="signupForm" novalidate>
<!-- <div class="form-group text-center">
<span ng-show="imageError" style="color: #c0392b; padding-bottom: 1em; font-weight: bold;">Please choose a profile picture</span>
<div class="profile-image">
<div class="profile-preview">
<img ng-show="signupForm.file.$valid" ngf-src="picFile" class="thumb">
<button ng-click="picFile = null" ng-show="picFile">Remove</button>
</div>
<input type="file" id="file" ngf-select ng-model="picFile" name="file"
accept="image/*" ngf-max-size="2MB" required
ngf-model-invalid="errorFiles" style="display:none;">
<label for="file" class="btn btn-green btn-md">Upload Picture</label>
</div>
</div> -->
<div class="form-group" ng-class="{ 'has-error' : signupForm.email.$invalid && !signupForm.email.$pristine }">
<label for="email">Email ending in .edu</label>
<input type="email" class="form-control" edu-email-validate ng-model="user.email" id="email" placeholder="Email must end in .edu" name="email" required>
<div ng-show="signupForm.email.$touched">
<span ng-show="signupForm.email.$error.required" style="color: red;">email id not proper</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.firstname.$invalid && !signupForm.firstname.$pristine }">
<label for="fname">First Name</label>
<input type="text" class="form-control" id="fname" ng-model="user.firstName" placeholder="First Name" name="firstname" required>
<div ng-show="signupForm.firstname.$touched">
<span ng-show="signupForm.firstname.$error.required" style="color: red;" ng-cloak>Please enter first name</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.lastname.$invalid && !signupForm.lastname.$pristine }">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" id="lastname" ng-model="user.lastName" placeholder="Last Name" name="lastname" required>
<div ng-show="signupForm.lastname.$touched">
<span ng-show="signupForm.lastname.$error.required" style="color: red;">last name required</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.username.$invalid && !signupForm.username.$pristine }">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" ng-model="user.username" placeholder="Username" name="username" required>
<div ng-show="signupForm.username.$touched">
<span ng-show="signupForm.username.$error.required" style="color: red;">username required</span>
</div>
</div>
<div class="form-group">
<label for="gradclass">Graduation Year</label>
<input type="number" class="form-control" min="2016" max="2024" id="gradclass" name="gradclass" ng-model="user.gradClass" placeholder="Graduation Year" required>
<div ng-show="signupForm.school.$touched">
<span ng-show="signupForm.gradclass.$error.required" style="color: red;">Graduaton date required</span>
<span ng-show="signupForm.gradclass.$error.number" style="color: red;">Not valid number!</span>
<span ng-show="!signupForm.gradclass.$valid" style="color: red;">Graduation year between 2016 to 2024</span>
</div>
</div>
<div class="form-group">
<label for="school">School</label>
<select class="form-control" id="school" ng-model="user.schoolId" name="school" required>
<option disabled selected="selected" value="0">Choose School</option>
<option value="1">Champlain College</option>
<option value="2">UVM</option>
</select>
<div ng-show="signupForm.school.$touched">
<span ng-show="signupForm.school.$error.required" style="color: red;">please select a school</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.password.$invalid && !signupForm.password.$pristine }">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" ng-model="user.password" equals="{{ user.passwordCheck }}" ng-minlength= "6" placeholder="Password" name="password" required>
<div ng-show="signupForm.password.$touched">
<span ng-show="signupForm.password.$error.required" style="color: red;">password required</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.password2.$invalid && !signupForm.password2.$pristine }">
<label for="password-2">Password Again</label>
<input type="password" class="form-control" id="password-2" ng-model="user.passwordCheck" equals=" {{ user.password }}" ng-minlength = "6" placeholder="Password Again" name="password2" required>
<div ng-show="signupForm.password2.$touched">
<span ng-show="signupForm.password2.$error.required" style="color: red;">confirmation required</span>
</div>
</div>
<div class="login-bottom-container">
<input type="submit" class="btn btn-green btn-lg" value="Sign up" ng-disabled="signupForm.$invalid" ng-click="submitted = true">
<!-- <button class="btn btn-green btn-lg" ng-disabled="signupForm.$invalid" ng-click="Sign up()">Sign up</button>-->
<div class="right">
<a ui-sref="terms" style="margin-top: 1em; display: block;">By signing up you agree to the terms and conditions of BlackMarket University</a>
</div>
<span class="progress" ng-show="picFile.progress >= 0">
<div style="width:{{picFile.progress}}%; background-color: #2980b9; color: #FFF; padding: 1em .5em;font-weight: 500; border-radius: 50%;" ng-bind="picFile.progress + '%'"></div>
</span>
<span ng-show="picFile.result">Upload Successful</span>
<span class="err" ng-show="errorMsg">Error making account.</span>
</div>
</form>
</div>
</body>
</html>

Angular validations work on the name attribute so try adding name instead of id to the input elements inside your form

Categories

Resources