I have a code that I created in JS that uses together with jQuery Validator, where it validates all form fields that have the attribute required, this way you don’t need to be validating one by one.
The only drawback is that it has no specific error message for each field and only validates whether the field has been filled or not, but I believe I can already help.
As @Papacharlie said, it’s a more aesthetic validation.
$('form').not('.no-validate').each(function(key, form) {
$(form).data('validator', $(form).validate({
ignore : "",
errorElement : false,
highlight : function(field) {
$(field).closest('.form-group, .input-group').addClass('has-error').removeClass('has-success');
},
unhighlight : function(field) {
$(field).closest('.form-group, .input-group').removeClass("has-error").addClass('has-success');
},
errorPlacement : function() {
}
}));
});
For this code to work just you have the input
within a div
with class form-group
or input-group
, and have your CSS class has-error
and has-success
created, see below how I created the classes.
.has-error .form-control, .has-error input[type="email"]{
border-color: #A94442;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .form-control {
border-color: #3c763d;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
These two classes are present in Bootstrap if you use.
In this code you can improve by adding a div
with the error message you want, or hide the div
if the field is filled in, etc.
It’s just an idea and a quick and simple way to validate whether the required fields have been filled in.
By all indications, its validation is only being done by PHP, there is, or did not inform the use of any validation plugin. Anyway, you can validate by PHP and make use of a Tooltip to create the 'balloon' on the field that contains error.
– Papa Charlie
That’s what I needed @Papacharlie
– ndroid
validation is by the server, NEVER omit PHP validation, because if the user disables js, you will not have any validation.
– Papa Charlie
@Papa Charlie Great websites for example Facebook, Gmail uses this method
– ndroid
I never hear any complaints from users
– ndroid
Have you ever worked on facebook or gmail? But if you know well about security, ok good luck.
– Papa Charlie
@Papacharlie I am aware that php is the best method to validate fields, but it validates with a Beta interface, jquery validates with a more modern interface
– ndroid
You certainly have no idea what you’re talking about, but that’s fine. I won’t lengthen the comments here, but if you want to use the chat can call me.
– Papa Charlie
Let’s go continue this discussão in chat.
– ndroid
@Papacharlie Thank you very much I understood well is a very simple way, it was what I was exactly looking for
– ndroid
Cool. It was a basic model, just increase as your need.
– Papa Charlie