New Jquery based form validation plugin created for Bootstrap 5 framework. jbvalidator plugin will support both client side and server side validation. Following are the main features
Multiple languages.
Custom error messages.
Custom validation rules.
Easy to use via HTML data attribute.
Guidance
The form’s attribute have to novalidate
<script src="dist/jbvalidator.min.js"></script>
<script>
$(function (){
let validator = $('form.needs-validation').jbvalidator({
errorMessage: true,
successClass: true,
language: "https://emretulek.github.io/jbvalidator/dist/lang/en.json"
});
//custom validate methode
validator.validator.custom = function(el, event){
if($(el).is('[name=password]') && $(el).val().length < 5){
return 'Your password is too weak.';
}
}
validator.validator.example = function(el, event){
if($(el).is('[name=username]') && $(el).val().length < 3){
return 'Your username is too short.';
}
}
//check form without submit
validator.checkAll(); //return error count
//reload instance after dynamic element is added
validator.reload();
})
</script>Serverside validation
<script src="dist/jbvalidator.min.js"></script>
<script>
$(function (){
let validatorServerSide = $('form.validatorServerSide').jbvalidator({
errorMessage: true,
successClass: false,
});
//serverside
$(document).on('submit', '.validatorServerSide', function(){
$.ajax({
method:"get",
url:"http://jsvalidation.test/test.json",
data: $(this).serialize(),
success: function (data){
if(data.status === 'error') {
validatorServerSide.errorTrigger($('[name=username]'), data.message);
}
}
})
return false;
});
})
</script>Options
{
language: '', //json file url
errorMessage: true,
successClass: false,
html5BrowserDefault: false,
validFeedBackClass: 'valid-feedback',
invalidFeedBackClass: 'invalid-feedback',
validClass: 'is-valid',
invalidClass: 'is-invalid'
}
