validate.js
JQuery 2017
$(document).ready(function () { $('#reg_form').bootstrapValidator({ fields: { username: { message: 'The username is not valid', validators: { notEmpty: { message: 'The username is required and can\'t be empty' }, stringLength: { min: 6, max: 30, message: 'The username must be more than 6 and less than 30 characters long' }, regexp: { regexp: /^[a-zA-Z0-9_\.]+$/, message: 'The username can only consist of alphabetical, number, dot and underscore' } } }, password: { validators: { notEmpty: { message: 'The password is required and can\'t be empty' }, stringLength: { min: 6, max: 30, message: 'The password must be more than 6 and less than 30 characters long' } } }, confirmPassword: { validators: { notEmpty: { message: 'The confirm password is required and can\'t be empty' }, identical: { field: 'password', message: 'The password and its confirm are not the same' } } }, ages: { validators: { notEmpty: { message: 'Please supply your age' }, lessThan: { value: 100, inclusive: true, message: 'The ages has to be less than 100' }, greaterThan: { value: 10, inclusive: false, message: 'The ages has to be greater than or equals to 10' } } }, email: { validators: { notEmpty: { message: 'Please supply your email address' }, emailAddress: { message: 'Please supply a valid email address' } } }, phone: { validators: { notEmpty: { message: 'Please supply your phone number' }, // phone: { // //http://formvalidation.io/validators/phone/ // country: 'US', // message: 'Please supply a // vaild phone number with // area code' // }, regexp: { // Test regex: // https://regex101.com regexp: /^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$/, message: 'Please supply a vaild phone number with area code' } } }, state: { validators: { notEmpty: { message: 'Please select your Option' } } }, zip: { validators: { notEmpty: { message: 'Please supply your zip code' }, zipCode: { country: 'US', message: 'Please supply a vaild zip code' } } }, money: { validators: { integer: { message: 'The value is not an integer' }, between: { // http://formvalidation.io/validators/numeric/ min: 1, max: 1000000000, message: 'The latitude must be between 1 and 1.000.000.000 VND' }, notEmpty: { message: 'Please supply money' } } }, birthday: { validators: { notEmpty: { message: 'Please supply your birthday' }, date: { format: 'YYYY/MM/DD', message: 'The birthday is not valid' } } }, website: { validators: { notEmpty: { message: 'Please supply URL' }, uri: { allowLocal: true, message: 'The input is not a valid URL' } } }, comment: { validators: { stringLength: { min: 10, max: 200, message: 'Please enter at least 10 characters and no more than 200' }, notEmpty: { message: 'Please supply a description of your project' } } } } }) .on( 'success.form.bv', function (e) { $('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ... $('#reg_form').data( 'bootstrapValidator') .resetForm(); e.preventDefault(); var $form = $(e.target); var bv = $form .data('bootstrapValidator'); $.post($form.attr('action'), $form .serialize(), function (result) { console.log(result); }, 'json'); }); });
index.html
JQuery 2017
<!doctype html> <html> <head> <title>Validation JQuery</title> </head> <body> <div class="col-lg-9"> <form id="reg_form" > <div class="form-group"> <!--class form-group này giúp thông báo hiển thị ở gần ngay tại input đó nhưng nó nằm bên phải--> <div class="input-group"> <!--Thêm class input-group này bên trong để thống báo hiển thị nhảy xuống dòng ngay dưới input đó--> <input name="username" placeholder="Enter text Username" type="text"> </div> </div> <div class="form-group"> <div class="input-group"> <input name="password" type="password" placeholder="Enter text Password"> </div> </div> <div class="form-group"> <div class="input-group"> <input type="password" name="confirmPassword" placeholder="Confirm password"> </div> </div> <div class="form-group"> <div class="input-group"> <input type="text" name="ages" placeholder="Enter number Age"> </div> </div> <div class="form-group"> <div class="input-group"> <input name="email" placeholder="Enter text E-Mail Address" type="text"> </div> </div> <div class="form-group"> <div class="input-group"> <input name="phone" placeholder="###-###-####" data-format="+84(ddd)ddd-ddd" type="text"> </div> </div> <div class="form-group"> <div class="input-group"> <select name="state" class="selectpicker"> <option value=" ">Please select your option</option> <option>Ha Noi</option> <option>TP HCM</option> <option>Vung Tau</option> </select> </div> </div> <div class="form-group"> <div class="input-group"> <input name="zip" placeholder="Enter number Zip Code" type="text"> </div> </div> <div class="form-group"> <div class="input-group"> <input type="text" name="money" placeholder="Enter number money" /> </div> </div> <div class="form-group"> <div class="input-group"> <input type="text" name="birthday" placeholder="(YYYY/MM/DD)" /> </div> </div> <div class="form-group"> <div class="input-group"> <input type="text" name="website" placeholder="http://google.com.vn" /> </div> </div> <div class="form-group"> <div class="input-group"> <textarea name="comment" placeholder="Enter textarea"></textarea> </div> </div> <div class="form-group"> <input type="submit" class="btn btn-warning" value="Send"/> </div> </form> </div> <!--Cần đến sự có mặt của jquery.min và bootstrapvalidator--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script> <!--Còn validate.js để chúng ta trực tiếp điều khiển logic validate lên đó--> <script src="js/validate.js"></script> </body> </html>
0 nhận xét:
Post a Comment