I'm using jQuery validation plugin for my js form validation. I am also using Bootstrap 4. I've found that I needed to modify errorPlacement
, highlight
, and unhighlight
to make it so that the validation errors properly show up in the BS4 style.
$('#login-form').validate({
rules: {
login_username: {
required: true
},
login_password: {
required: true
}
},
errorElement: 'span',
errorPlacement: function (error, element) {
error.addClass('invalid-feedback');
element.closest('.form-group').append(error);
},
highlight: function (element, errorClass, validClass) {
$(element).addClass('is-invalid');
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass('is-invalid');
},
submitHandler: function (form) {
neou_cms.remove_error_messages();
var username = form.elements['login_username'].value;
var password = CryptoJS.SHA512(form.elements['login_password'].value).toString();
login.login_user(username, password);
}
});
Thus for every function I find myself repeating those properties. Is there a way of "extending" the validation library so that I don't have to repeat the errorPlacement
, highlight
, and unhighlight
code every time I use validate?
Here's how form validation works with Bootstrap: HTML form validation is applied via CSS's two pseudo-classes, :invalid and :valid . It applies to <input> , <select> , and <textarea> elements. Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form> .
For jQuery form validation to work, we set "HtmlHelper. UnobtrusiveJavaScriptEnabled = false;" property false in the register form instead of "web. config" file; this means if we set the value false for above property in "web. config" file, then we will disable client side validation across application.
The new remote method way As you can see to pass through data you can simply use the key pair syntax so the request sent below the data is “&[email protected]”. The return values for your backend script is either json encoded true for a validation pass or html msg for validation fail.
Validation in JQuery: Using JQuery, a form is validated on the client-side before it is submitted to the server, hence saves the time and reduce the load on the server. Form Validation means to validate or check whether all the values are filled correctly or not.
Solution:
https://jqueryvalidation.org/jQuery.validator.setDefaults/
jQuery.validator.setDefaults({
errorElement: 'span',
errorPlacement: function (error, element) {
error.addClass('invalid-feedback');
element.closest('.form-group').append(error);
},
highlight: function (element, errorClass, validClass) {
$(element).addClass('is-invalid');
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass('is-invalid');
}
});
The set defaults as discribed will work on bootstrap 4 with the following :
jQuery.validator.setDefaults({
highlight: function(element) {
jQuery(element).closest('.form-control').addClass('is-invalid');
},
unhighlight: function(element) {
jQuery(element).closest('.form-control').removeClass('is-invalid');
},
errorElement: 'span',
errorClass: 'label label-danger',
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
dont forget to add the class class="form-control" to the input field. The only thing i was not able to find is how to get the input field colored red when it has an error or green when its ok. Maybe any can add that option to my answer ?
above an indicator solution didn't have the desired input spacing with the error label, use the code below and see the most pleasant result
jQuery.validator.setDefaults({
onfocusout: function (e) {
this.element(e);
},
onkeyup: false,
highlight: function (element) {
jQuery(element).closest('.form-control').addClass('is-invalid');
},
unhighlight: function (element) {
jQuery(element).closest('.form-control').removeClass('is-invalid');
jQuery(element).closest('.form-control').addClass('is-valid');
},
errorElement: 'div',
errorClass: 'invalid-feedback',
errorPlacement: function (error, element) {
if (element.parent('.input-group-prepend').length) {
$(element).siblings(".invalid-feedback").append(error);
//error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With