"jquery validation"
Bootstrap 3.0.0 Snippet by xrozix

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Jquery validation</h2> <form id="register-form"> <fieldset> <legend>Sign up for a business account</legend> </fieldset> <p>Create a login</p> <div class="form-group col-md-12"> <input class="form-control" name="email" placeholder="Email address" type="email"> </div> <div class="form-group col-md-6"> <input class="form-control" name="password" id="password" placeholder="Password" type="password"> </div> <div class="form-group col-md-6"> <input class="form-control" name="password2" placeholder="Re-enter password" type="password"> </div> <div class="clearfix"> </div> <p>Tell us about your business</p> <div class="form-group col-md-6"> <input class="form-control" name="firstName" placeholder="First name" type="text"> </div> <div class="form-group col-md-6"> <input class="form-control" name="secondName" placeholder="Last name" type="text"> </div> <div class="form-group col-md-12"> <input class="form-control" name="businessName" placeholder="Business name" type="text"> </div> <div class="form-group col-md-12"> <input class="form-control" name="phone" placeholder="Business phone" type="tel"> </div> <div class="form-group col-md-12"> <input class="form-control" name="address" placeholder="Business address" type="text"> </div> <div class="form-group col-md-6"> <input class="form-control" name="town" placeholder="Town" type="text"> </div> <div class="form-group col-md-6"> <input class="form-control" name="postcode" placeholder="Postcode" type="text"> </div> <div class="form-group col-md-12"> <div class="checkbox"> <label> <input id="terms" name="terms" type="checkbox"> I have read, consent and agree to Company's User Agreement and Privacy Policy (including the processing and disclosing of my personal data), and I am of legal age. I understand that I can change my communication preferences at any time. Please read the Key Payment and ServiceInformation. </label> </div> </div> <div> <input class="btn btn-primary" id="submit-button" type="submit" value="Sign Up"> </div> </form> </div> </div> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.min.js"></script>
$(function() { $.validator.setDefaults({ errorClass: 'help-block', highlight: function(element) { $(element) .closest('.form-group') .addClass('has-error'); }, unhighlight: function(element) { $(element) .closest('.form-group') .removeClass('has-error'); }, errorPlacement: function (error, element) { if (element.prop('type') === 'checkbox') { error.insertAfter(element.parent()); } else { error.insertAfter(element); } } }); $.validator.addMethod('strongPassword', function(value, element) { return this.optional(element) || value.length >= 6 && /\d/.test(value) && /[a-z]/i.test(value); }, 'Your password must be at least 6 characters long and contain at least one number and one char\'.') $("#register-form").validate({ rules: { email: { required: true, email: true, remote: "http://localhost:3000/inputValidator" }, password: { required: true, strongPassword: true }, password2: { required: true, equalTo: '#password' }, firstName: { required: true, nowhitespace: true, lettersonly: true }, secondName: { required: true, nowhitespace: true, lettersonly: true }, businessName: { required: true }, phone: { required: true, digits: true, phonesUK: true }, address: { required: true }, town: { required: true, lettersonly: true }, postcode: { required: true, postcodeUK: true }, terms: { required: true } }, messages: { email: { required: 'Please enter an email address.', email: 'Please enter a <em>valid</em> email address.', remote: $.validator.format("{0} is already associated with an account.") } } }); });

Related: See More


Questions / Comments: