index.html
Validator Html 2016
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Validation Bootstrap 3</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css'> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css'> <link rel="stylesheet" href="css/style_validate_bootstrap_3.css"> </head> <body> <div class="container"> <form class="well form-horizontal" action=" " method="post" id="contact_form"> <fieldset> <!-- Form Name --> <center><legend>Validation Bootstrap 3</legend></center> <!-- Text input username--> <div class="form-group"> <label class="col-md-4 control-label">User Name</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input name="username" placeholder="Enter text Username" class="form-control" type="text"> </div> </div> </div> <!-- Text input password--> <div class="form-group"> <label class="col-md-4 control-label">Password</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input name="password" type="password" class="form-control" placeholder="Enter text Password" > </div> </div> </div> <!-- Text input confirm password--> <div class="form-group"> <label class="col-md-4 control-label">Confirm Password</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input type="password" name="confirmPassword" class="form-control" placeholder="Confirm password" > </div> </div> </div> <!-- Text input age--> <div class="form-group"> <label class="col-md-4 control-label">Age</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-heart"></i></span> <input type="text" name="ages" class="form-control" placeholder="Enter number Age" > </div> </div> </div> <!-- Text input Email--> <div class="form-group"> <label class="col-md-4 control-label">E-Mail</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span> <input name="email" placeholder="Enter text E-Mail Address" class="form-control" type="text"> </div> </div> </div> <!-- Text input number phone--> <div class="form-group"> <label class="col-md-4 control-label">Phone #</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span> <input name="phone" placeholder="###-###-####" data-format="+84(ddd)ddd-ddd" class="form-control" type="text" > </div> </div> </div> <!-- Select option basic --> <div class="form-group"> <label class="col-md-4 control-label">Option</label> <div class="col-md-4 selectContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span> <select name="state" class="form-control selectpicker" > <option value=" " >Please select your option</option> <option>Ha Noi</option> <option>TP HCM</option> <option >Vung Tau</option> <option >Da Nang</option> <option >Hue</option> <option >Hai Phong</option> <option >Cam Ranh</option> <option >Nha Trang</option> </select> </div> </div> </div> <!-- Text input Zip Code--> <div class="form-group"> <label class="col-md-4 control-label">Zip Code</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-tasks"></i></span> <input name="zip" placeholder="Enter number Zip Code" class="form-control" type="text"> </div> </div> </div> <!-- Text input Number --> <div class="form-group"> <label class="col-md-4 control-label">Money</label> <div class="col-md-4 inputGroupContainer" > <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span> <input type="text" class="form-control" name="money" placeholder="Enter number money"/> </div> </div> </div> <!-- Number input Date--> <div class="form-group"> <label class="col-md-4 control-label">Birthday</label> <div class="col-md-4 inputGroupContainer" > <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span> <input type="text" class="form-control" name="birthday" placeholder="(YYYY/MM/DD)" /> </div> </div> </div> <!-- Text input http --> <div class="form-group"> <label class="col-md-4 control-label">Website</label> <div class="col-md-4 inputGroupContainer" > <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-link"></i></span> <input type="text" class="form-control" name="website" placeholder="http://google.com.vn" /> </div> </div> </div> <!-- Text area --> <div class="form-group"> <label class="col-md-4 control-label">Comment</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span> <textarea class="form-control" name="comment" placeholder="Enter textarea"></textarea> </div> </div> </div> <!-- Success message --> <div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label"></label> <div class="col-md-4"> <button type="submit" class="btn btn-warning" >Send <span class="glyphicon glyphicon-send"></span></button> </div> </div> </fieldset> </form> </div> </div><!-- /.container --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script> <script src="js/validate_bootstrap_3.js"></script> </body> </html>
validate_bootstrap_3.js
Validator Html 2016
$(document).ready(function () {
$('#contact_form').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
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 ...
$('#contact_form').data('bootstrapValidator').resetForm();
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post($form.attr('action'), $form.serialize(), function (result) {
console.log(result);
}, 'json');
});
});
Validate Radio and CheckBox Bootstrap 3
Download zip | Xem thêm (examples)
0 nhận xét:
Post a Comment