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; }
Related
I have added form validation via class using Jquery.
However, when i use the addClass it seems to fail. Any Ideas?
$("label.choice3").click(function(){
$(".option").addClass("valueRequired");
});
$("#feedback_form").validate({
errorClass: 'feedback_form_error grid__item'
});
$('.valueRequired').each(function() {
$(this).rules('add', {
required: true,
messages: {
required: "Please select an option"
}
});
});
the class 'option' exists. I need to
<%= radio_button_tag "feedback[#{line_item['id']}][size_feedback]", "0", false, class: "option" %>
Onclick the following code is done.
$("label.choice3").click(function(){
$(".option").addClass("valueRequired");
});
This does add in the class of "valueRequired" which is fine.
But its the validation that does not seem to run once the class is added.
Without seeing your markup, I guess you run this piece:
$('.valueRequired').each(function() {
$(this).rules('add', {
required: true,
messages: {
required: "Please select an option"
}
});
});
against an empty selection? At the moment you run $('.valueRequired').each() do even any elements with that class exist in your code?
I'm working on a form which implements QTip2 to display a tooltip once someone tries to submit a form where data is missing. Everything works as intended, however I would like the tooltip to be removed once the error class is removed (effectively once someone types in the input field). I have the following code for my validation currently:
$('#form0').validate({
rules: {
Name: "required",
Email: {
required: true,
email: true
},
Subject: "required",
Message: "required"
},
errorPlacement: function (error, element) {
$('#Name').qtip({
content: 'Please enter your name',
position: {
target: 'mouse', // Track the mouse as the positioning target
adjust: { x: 5, y: 5 } // Offset it slightly from under the mouse
},
style: { classes: 'qtip-red' }
});
return true;
},
errorClass: "form-error"
});
As you can see, once someone tries to submit the form the class "form-error" is assigned to the input field, so I would like the tooltip to be removed as well once this class is removed. I tried the following, but it did not work, not sure why:
onHide: function() { $(this).qtip('destroy'); }
I found a solution to this problem by adding the following code inside errorPlacement {}:
events: { show: function (event, api) { if (!element.hasClass('form-error')) event.preventDefault(); } },
show: {
delay: 0,
target: element
},
hide: { target: element },
http://jsfiddle.net/sK9tL/1/
When I manually add the rule()'s in the console on my form page, it appears to validate as expected.
I'm not sure if there is something wrong with the way I am formatting this?
$('#freeFormAdd').validate({
rules:{
freeFormName: {
required: true,
},
freeFormPrice: {
required: true,
},
freeFormQty: {
required: true,
}
}
});
Then I use the .valid() to determine if the form is ready to submit. Since the page is "seamless" I don't need the form to submit, just to add some items to a cart (which is commented out in the jsfiddle).
Any advice?
Your form elements should have name attribute not id attribute, validator selects the elements based on their name attributes. Also instead of listening to the click event, you can use the submitHandler method:
$('#freeFormAdd').validate({
rules: {
freeFormName: {
required: true,
},
freeFormPrice: {
required: true,
},
freeFormQty: {
required: true,
}
},
submitHandler: function () {
alert('the form is valid');
}
});
Please note that I have moved the button to the form element's context so it triggers the submit event.
http://jsfiddle.net/QU3XM/
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');
}
});