I am using jquery validate plugin in my web application to validate forms for blank and other simple validations.
I am using below code to setup jquery validate plugin for my form, there is a erroClass option in it, where I have defined a CSS class name authError which I want to apply on error messages, but its applying the same class to INPUT box as well, I don't want to apply it in INPUT box, just want it for error message. Please check and help. Thanks!
$("#frmSignin").validate({
debug: false,
errorClass: "authError",
errorElement: "span",
rules: {
username: {
required: true,
minlength: 10
},
password: {
required: true
}
},
messages: {
username: {
required: "Please enter your username"
},
password: {
required: "Please enter your password"
}
}
});
Thanks, for the tricks guys, but I instead found a better way by using the jQuery code only. There is a highlight event in validate plugin which is called when error occurred to highlight the error fields, I just removed the class form element when this event is called.
$("#frmSignin").validate({
debug: false,
errorClass: "authError",
errorElement: "span",
rules: {
username: {
required: true,
minlength: 10
},
password: {
required: true
}
},
messages: {
username: {
required: "Please enter your username"
},
password: {
required: "Please enter your password"
}
},
highlight: function(element, errorClass) {
$(element).removeClass(errorClass);
}
});
You should actually be just defining different classes for input and span (span since errorElement is set to span, otherwise it will be label), rather than removing the applied class
e.g.
span.authError {color:red;}
input.authError {border:1px dotted red;}
and not just .authError{} which will get applied to both input and span
$("#borrowerForm").validate({
errorElement: 'span',
errorElementClass: 'input-validation-error',
errorClass: 'field-validation-error',
errorPlacement: function(error, element) {},
highlight: function(element, errorClass, validClass) {
$(element).addClass(this.settings.errorElementClass).removeClass(errorClass);
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(this.settings.errorElementClass).removeClass(errorClass);
},
onkeyup: false,
errorPlacement: function (error, element) { error.insertAfter(element); }
});
In the jQuery validation plugin, the errorClass is both applied to the error message element (usually a <label>, but a <span> in your case) and to the validated element itself. Since you only want to style the error message element, you should write:
span.authError {
// Your error element style.
}
If you want to give css for the error message.
Then in place of using errorClass define css rule
label.error
Check this:
jQuery.validator.messages.required = "";
$('#frm-contact').validate({
invalidHandler: function (e, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been highlighted below'
: 'You missed ' + errors + ' fields. They have been highlighted below';
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}
},
onkeyup: false,
submitHandler: function () {
$("div.error").hide();
alert("submit! use link below to go to the other step");
},
highlight: function (element, required) {
$(element).fadeOut(function () {
$(element).fadeIn();
$(element).css('border', '2px solid #FDADAF');
});
},
unhighlight: function (element, errorClass, validClass) {
$(element).css('border', '1px solid #CCC');
}
});
Related
I have some form on my page and jquery validation and it's not working when I pick some value from field suggestions.
customForm.validate({
onkeyup: function(element) {
$(element).valid();
},
errorElement: 'p',
errorClass: "error",
rules: {
phoneNumber: {required: true, minLength: 10}
},
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
});
Is it possible to add validation when suggestion is selected?
UPD: Added some custom validation for form inputs. I guess for now jquery validation doesn't have functionality to do this.
$("#customForm input").on('input', function() { ... });
Hello guys I am submitting my form using submit handler and its working but its very slow. Please help me to make it fast. Thanks in advance
Following is my javascript code for login form......
var handleLoginForm = function () {
$('.login-form').validate({
errorElement: 'label', //default input error message container
errorClass: 'help-inline', // default input error message class
focusInvalid: false, // do not focus the last invalid input
rules: {
username: {
required: true
},
password: {
required: true
},
user_type: {
required: true
},
remember: {
required: false
}
},
messages: {
username: {
required: "Username is required."
},
password: {
required: "Password is required."
},
user_type: {
required: "User Type is Required."
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
$('.alert-error', $('.login-form')).show();
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.control-group').addClass('error'); // set error class to the control group
},
data: $('#form_modulesadd').serialize(),
success: function (label) {
label.closest('.control-group').removeClass('error');
label.remove();
},
errorPlacement: function (error, element) {
error.addClass('help-small no-left-padding').insertAfter(element.closest('.input-icon'));
},
submitHandler: function (form) {
$( ".login-form input" ).submit();
window.location.href = "check.php";
}
});
It was fast when i was submitting the form using php but I must have to use javascript to submit this form......
Run the JS when the form is submitted:
$(".login-form").submit(function(){
$('.login-form').validate({
errorElement: 'label', //default input error message container
errorClass: 'help-inline', // default input error message class
focusInvalid: false, // do not focus the last invalid input
rules: {
username: {
required: true
},
password: {
required: true
},
user_type: {
required: true
},
remember: {
required: false
}
},
messages: {
username: {
required: "Username is required."
},
password: {
required: "Password is required."
},
user_type: {
required: "User Type is Required."
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
$('.alert-error', $('.login-form')).show();
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.control-group').addClass('error'); // set error class to the control group
},
data: $('#form_modulesadd').serialize(),
success: function (label) {
label.closest('.control-group').removeClass('error');
label.remove();
},
errorPlacement: function (error, element) {
error.addClass('help-small no-left-padding').insertAfter(element.closest('.input-icon'));
},
submitHandler: function (form) {
$( ".login-form input" ).submit();
window.location.href = "check.php";
}
});
});
This keeps the JS from running until the form is submitted.
UPDATE:
$(".login_form").submit(function(){
$(this).validate({ ... });
});
Not sure if this will work, but the repeated selector seemed a bit awkward to me.
I solved the same problem by changing the implementation of submitHandler like below. I just take the first item [0] of the forms selector.
submitHandler: function (form) {
$(".login-form input")[0].submit();
...
}
I used Jquery Validation ..
If possible to add unique Id on each has-error div.
I tried but not working...
Demo
Example i used '#test'. Each div added #test the same. but i need test1,test2......testn.
$(document).ready(function() {
$("#question_form").validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "",
rules: {
fill: "required",
radios1: "required",
radios5: "required",
},
highlight: function(element, errorClass, validClass) { // hightlight error inputs
$(element).closest('.qst_opt_val').addClass('has-error'); // set error class to the control group
if($('.qst_opt_val').hasClass('has-error')){
$('.qst_opt_val').attr('id','test');
}
},
submitHandler: function(form) {
error.hide();
form.submit();
}
});
});
Ok, a quick and dirty way is to loop thru the elements that has the error class, grab the index of the element, add a string plus the index as the ID. Below is the section I modified:
highlight: function(element, errorClass, validClass) { // hightlight error inputs
$(element).closest('.qst_opt_val').addClass('has-error'); // set error class to the control group
$('.qst_opt_val.has-error').each(function(index) {
this.id = "test" + (index+1)
});
}
Here is a demo with your code.
I am using the jQuery Validate plugin and I have this code to catch a error and apply a class (myerror) to the field that caused the validations to fail.
I would like to extend this to capture which type of error that was captured.
Example1: if you did not fill in the field. Class1 applied (css background-color:lightRed)
Example2: format of data in field wrong. Class2 applied (css background-color:lightBlue)
jQuery(function ($) {
var validator = $('#form').validate({
rules: {
ip: {
required: true,
ipv4: true
}
},
messages: {},
errorPlacement: function (error, element) {},
highlight: function (element, errorClass, validClass) {
$(element).addClass('myerror')
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass('myerror')
}
});
});
Well it turns out you can... (sort-off) do it.
I used $(element).val(); in the validation to determine if the field is blank or not.
If the field is blank, well then its missing.
If the field is filed in but triggers the validation, then it must be formatted incorrectly.
So Ive used a bubble class to display the error in a separate div element. Not like the traditional inline error message.
The reason for this 'madness' is because the html form is small and if you allow the error message to appear inline, it pulls the poor html form to bits. I feel there is more control doing it this way.
VALIDATE CODE
var validator = $("#storeEditFrm").validate({
rules: {
"store_name": "required",
"street_name": "required",
"suburb_name": "required",
"city_name": "required",
"country_name": "required",
"phone": "required",
"store_email": {
required: true,
email: true
},
"ip_address": {
required: true,
ipv4: true
}
},
messages: {},
errorPlacement: function(error, element) {},
highlight: function (element, errorClass, validClass) {
$(element).prev().prev().addClass('bubble');
var v = $(element).val();
if(v == ''){$(element).prev().prev().html('Required field')}
if(v != ''){$(element).prev().prev().html('Please check format')}
},
unhighlight: function (element, errorClass, validClass) {
$(element).prev().prev().removeClass('bubble');
}
});
Here is a fiddle, needs a bit of CSS work, but you get the idea.
FIDDLE
How can i highlight error in input jquery validation??
please help me
$(function () {
// Setup form validation on the #register-form element
$("#register-form").validate({
// Specify the validation rules
rules: {
firstname: "required",
lastname: "required",
month: "required",
day: "required",
year: "required",
gender: "required",
email: "required",
phone: {
required: true,
minlength: 11
},
password: {
required: true,
minlength: 6,
equalTo: "#confirm-password"
},
submitHandler: function (form) {
form.submit();
}
});
});
this two element put in jquery validate to highlight error
errorElement: "div",
errorClass: 'help-block animation-slideDown',
errorPlacement: function (error, element) {
error.insertAfter(element);
element.addClass("edited");
element.parents(".form-control-focus > div").append(error);
error.insertAfter(element);
element.parents(".form-group > div").append(error);
},
highlight: function (e)
{
$(e).closest(".input-group ").parent().removeClass("has-error").addClass("has-error"), $(e).closest(".help-block").remove();
$(e).closest(".form-group").removeClass("has-error").addClass("has-error"), $(e).closest(".help-block").remove();
},
You have to edit CSS - not Javascript. Input field with error will get "error" class attached to itself.
Next time - use HTML inspector to see what classes are added/changed ;)
You can simply do this by adding CSS styles.
If you look the jQuery validation behavior, error class will be added to your input elements.
So simple do this
.error {
border: 1px solid #c00;
}
JSFiddle
The documentation of the jQuery validate plugin explains how to do it:
errorClass (default: "error")
Type: String
Use this class to
create error labels, to look for existing error labels and to add it
to invalid elements.
Example: Sets the error class to “invalid”.
$(".selector").validate({
errorClass: "invalid"
});
Also the valid one:
$(".selector").validate({
validClass: "success"
});
You will of course need to add these two classes to your css.
.invalid { border: 1px solid red }
Something else to think about is native browser functionality with HTML 5. You can use the required attribute and other validation attributes based on input type as well.