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() { ... });
Related
I am using jQuery validation library to validate both password inputs to have the same value. My code is written below.
$(".woocommerce-ResetPassword").validate({
onfocusout: false,
onkeyup: false,
rules: {
password_2: {
equalTo: "#password_1"
}
},
messages: {
password_2: "<div class='woocommerce-password-strength bad'>Passwords do not match</div>"
},
submitHandler: function(form) {
return true;
}
});
I want to execute a jQuery code to add a class to an element when the notification of password_2 appears.
I want to modify this part of the code by adding a jQuery script inside the messages: {} but the code below does not work. You can see that I added $(".woocommerce-form-row--last").addClass("notif-triggered");
messages: {
password_2: "<div class='woocommerce-password-strength bad'>Passwords do not match</div>"
$(".woocommerce-form-row--last").addClass("notif-triggered");
},
Any help is greatly appreciated. Thanks.
You don't tell us, but I'll assume you're using the validation library linked here.
You should be able to add functionality within an invalidHandler, e.g. something think this:
$(".woocommerce-ResetPassword").validate({
onfocusout: false,
onkeyup: false,
rules: {
password_2: {
equalTo: "#password_1"
}
},
messages: {
password_2: "<div class='woocommerce-password-strength bad'>Passwords do not match</div>"
},
submitHandler: function(form) {
$(".woocommerce-form-row--last").removeClass("notif-triggered");
return true;
},
invalidHandler: function(event, validator) {
$(".woocommerce-form-row--last").addClass("notif-triggered");
}
});
jQuery chosen select validation messages are not disappearing until the form submit. I applied required validation if I submit the form without choosing the value error message is displaying. But after I choose it is not disappearing as normal select boxes, it is staying until the form submit.
$.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" });
$("#postJob").validate({
rules: {
skills:{
required:true,
},
});
please provide a running code snippets to understand the problem more easily.
jQuery validate messages are disappeared once the validation is fulfilled.
$(document).ready(function () {
$("#form").validate({
rules: {
"name": {
required: true,
minlength: 5
},
"email": {
required: true,
email: true
}
},
messages: {
"name": {
required: "Please, enter a name"
},
"email": {
required: "Please, enter an email",
email: "Email is invalid"
}
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});
});
Here is the fiddle:
http://jsfiddle.net/amwmedia/sw87W/
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.
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');
}
});