Develop Reference

jQuery Validate function not working

This problem, i am sure is very trivial but i am not able to get past it.
My form is not getting validated using jquery validate.
$(document).ready(function () {
$("#loginForm").validate({
rules: {
email: "required",
passwd: "required",
email:{
minlength: 10
}
},
messages: {
email: "Please enter your email",
passwd: "Please enter your passwd",
email:{
minlength: "Minlength has to be 10"
}
},
submitHandler: function(form) {
$("#pp").text("right");
form.submit();
}
});
})
No console errors. I have following
name, passwd are name, id of the fields i am trying to validate and loginForm is id of form. The problem is i don't see the error messages when i pass invalid input. Going through debug mode, i don't see the stack reaching inside validate function ever although an alert inside ready function before validate is called.

You did not show your HTML markup, so this answer assumes you correctly named your input elements.
In your code, you're specifying email twice...
rules: {
email: "required",
passwd: "required",
email:{ // <- duplicate
minlength: 10
}
},
If you need to specify multiple rules for one field, then specify the field once and list the rules inside...
rules: {
email: {
required: true,
minlength: 10
},
passwd: "required"
},
Your messages option has the same problem.
Working DEMO: http://jsfiddle.net/4937t/

Select method is not validated dynamically

I am using a select method in form and when I click on submit method without filing the form, various errors are shown which I have included in validate methods, like first name required, email required, etc.
So the problem is when I start entering the first name, the error disappears. But the same is not happening in case of select method. When I select certain options there, the error still remains saying, select at least one option. This error goes away when I click submit button. But I want this error to go away when I select at least one option, like in the case of first name when I start typing, the error goes away.
I have included my validation methods in $(document).ready(function()
Any help will be appreciated.
The following is the code snippet:
var newusercontainer = $('#newUsererrorcontainer');
var newuservalidator = $("#newUserForm").validate({
submitHandler: function(form) {
registerUser();
},
errorContainer: newusercontainer,
errorLabelContainer: $("ul", newusercontainer),
wrapper: 'li',
meta: "validate",
rules: {
newUserFirstName: {
required:true,
maxlength:50,
},
sector: {
required: true,
},
},
messages: {
newUserFirstName: {
required: "The First name field is required.",
maxlength: "Please enter with in 60 characters"
},
sector: {
required: "The Sector field is required.",
},
}
});

The first element will error message to go on focus. Javascript

I have a form with some input fields:
Folder Name:
<input type="text" id="folderName" name="folderName" data-bind = "value: FolderName" />
Prefix:
<input id="prefix" name="prefix" data-bind = "value: Prefix" />
I validate those fields using jquery validation plugin:
rules: {
folderName: {
required: true
},
prefix: {
required: true,
exactLength: 4
},
}
When submitting the form with empty fields, error messages are displayed for both inputs. What I want to accomplish is the first element with error message to go on focus. My skills in javascript are rather poor so any working example will be greatly appreciated. Thank You!

drop something like this after your validation fires
// set focus to first input
$('body').find(':input:first').focus();

Changing box color using jQuery on email validation?

I have an input box which tests whether the email in the box is a valid one. This is the script:
$("#myform").validate({
rules: {
field: {
required: true,
email: true
}
}
});
This tests for the email. I also have this script which would change the color by adding another class to the form.
$("#myform").toggleClass("othercolor");
Im just not sure where to put this code. Sorry for the newby question just new to jQuery. Thanks =D

Here's a demo... (UPDATED)
It looks like you might be using the jQuery validation plugin. Assuming that you are, you just need to initialise the form validation by executing $("#myform").validate() when the page loads (e.g. by putting it calling it from $(document).ready()).
$(document).ready(function(){
$("#myform").validate();
});
​
If you want to apply a CSS class when the focus leaves the email field, you could do something like this:
var validator = null;
$(document).ready(function(){
validator = $("#myform").validate({
rules: {
cemail: {
required: true,
email: true
}
}
});
$("#cemail").blur(function() {
if (validator.form()) {
$("#myform").addClass("othercolor");
}
else {
$("#myform").removeClass("othercolor");
}
});
});​
​
validator.form() returns true if the form is valid, and false if it isn't. Note that .toggleclass() won't do what you want here; you'll need to add or remove the class based on the return value of validator.form().

why dont you add it into the success callback in jQuery:
$("#myform").validate({
rules: {
field: {
required: true,
email: true
}
},
success: function(){
$(this).toggleClass('red');
}
});

Several custom validate rules in Jquery Validate plugin

I am using Jquery Validate plugin to check the user input
however, i found that the option is not sufficient and i decided to use custom rules
Are there any website provide those rules?
What i would like to check is the format of date and integer only
Thank you

you can customized jQuery validate plugin like this.
jQuery("form#my-form").validate({
rules: {
//input field name "inputName"
//implement your rules here
inputName: {
minlength: 3
}
},
messages: {
inputName: {
required : 'Your customized message'
}
}
});

you can add custom rules by extending the jquery validator
jQuery.validator.addMethod("customdate", function(value, element) {
return this.optional(element) || {your rules}
}, "eg YYYY-MM-DD");
see in here
http://docs.jquery.com/Plugins/Validation/Validator/addMethod#namemethodmessage
For number only, you don't need to write your own rules.It already include the feature,try digits and number
1 $("#form").validate({
rules:{
inputtype:{required:true,digits:true}
},
messages:{
inputtype:{required:"Please provide Number",digits,"Number Only!"}
}
});
2. $("#form").validate({
rules:{
inputtype:{required:true,number:true}
},
messages:{
inputtype:{required:"Please provide Number",number,"Number Only!"}
}
});