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() { ... });
I'm trying to dynamically add a validation rule to some dynamic controls using http://jqueryvalidation.org/ but its not working.
$(".rtxt").each(function () {
$(this).rules('add', {
required: true
});
});
<input class='rtxt' name='txtDocName' id='txtDocName' style='width:220px;' type='text' >
Don't know what i am missing here.
I can't use 'required' attribute as its not supported by IE9 so i will have to use jquery validation plugin.
Here is fiddle
http://jsfiddle.net/ed4fg1xo/
Also, i need to do validation on div click event.
$(document).ready(function () {
// 1. prepare the validation rules and messages.
var rules = {
textbox1: {
required: true,
minlength: 2
},
textbox2: "required",
textbox3: "required"
};
var messages = {
textbox1: {
required: "textbox1 is required",
minlength: "textbox1 needs to be at least length 2"
},
textbox2: "textbox2 is requried",
textbox3: "textbox3 is required"
};
// 2. Initiate the validator
var validator
= new jQueryValidatorWrapper("FormToValidate",
rules, messages);
// 3. Set the click event to do the validation
$("#DivIdName").click(function () {
if (!validator.validate())
return;
alert("Validation Success!");
});
});
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 wondering if something like this is posible
.validate({
rules: {
email: {
required: true,
email: true
}
},
messages: {
email: {
required: "<?php echo get_texto_clave('error_validate_empty'); ?>",
email: 'Please enter a valid email address',
whenFieldIsValid: 'looks good'
}
}
});
To show a message, not error but a confirmation that the input is valid,
how can i do so?
You can use the validClass option to write this functionality. When an input is valid, the plugin will add a specified class to that element.
Insert a hidden div after each of the inputs:
<input id="exampleinput" /><div class="correctmessage">Looks Good</div>
To hide:
.correctmessage{ display: none; }
In your validate statement, include the validClass option, as well as onkeyup and onclick if you want the messages to appear as changes are made to the form:
.validate({
validClass: "success",
onkeyup: true,
onclick: true
})
Then CSS to display the first element of class correctmessage after a success class (the specificity should override the other CSS block):
.success + .correctmessage{ display: block;}
display: inline is also valid.
You can easily mark each valid field before the form is submitted by slightly modifying the "highlight" and "unhighlight" option:
$(form).validate({
highlight: function(element) {
$(element).removeClass("valid").addClass("error");
},
unhighlight: function(element) {
$(element).removeClass("error").addClass("valid");
}
})
You can add a hidden element after each input and toggle it's visibility (or display) through css:
.valid_message { visibility: hidden; }
.valid + .valid_message { visibility: visible; }
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');
}
});