File Validation.js
$(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');
});
});
code index.html
Validation JQuery
pm mình để lấy code index nhé như demo trên nhé