how to highlight invalid jquery input by creating border red - javascript

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.

Related

jquery validation not working with suggestions

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() { ... });

How to dynamically add a validation rule using jquery validation plugin

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!");
});
});

How to add id on has error div in form validation

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.

how to show a 'looks good' message in jquery validator?

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; }

errorClass in jquery validate plugin?

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');
}
});

Categories

Resources