jQuery - Live Validation Plug-ins

Question

I'm looking for a plugin for jQuery that can validate as a key is pressed and after it loses focus (text boxes).

I'm currently using jVal - jQuery Form Field Validation Plugin. It works pretty good. The only issue I have is that I can only use a generic error message.

For example: I need a string to between 2 and 5 characters. If its too short I would like to display an error message that indicates it to short, equally if its too long. I know I could display an error message that requires the string to between 2 and 5 characters. The validation that is being done is more complicated.

Any ideas of other validators or how I could use this plug-in to display unique error messages.

---

Edit:

The validation tool needs to prevent particular letters or numbers and not require a form.

Thanks

Answer 1

This one looks like it would fit your description:

• jQuery plugin:validation (Homepage)
• demo
• API docs

Here's a snippet of code copied from the source of the demo:

// validate signup form on keyup and submit
$("#signupForm").validate({
 rules: {
  firstname: "required",
  lastname: "required",
  username: {
   required: true,
   minlength: 2
  },
  password: {
   required: true,
   minlength: 5
  },
  confirm_password: {
   required: true,
   minlength: 5,
   equalTo: "#password"
  },
  email: {
   required: true,
   email: true
  },
  topic: {
   required: "#newsletter:checked",
   minlength: 2
  },
  agree: "required"
 },
 messages: {
  firstname: "Please enter your firstname",
  lastname: "Please enter your lastname",
  username: {
   required: "Please enter a username",
   minlength: "Your username must consist of at least 2 characters"
  },
  password: {
   required: "Please provide a password",
   minlength: "Your password must be at least 5 characters long"
  },
  confirm_password: {
   required: "Please provide a password",
   minlength: "Your password must be at least 5 characters long",
   equalTo: "Please enter the same password as above"
  },
  email: "Please enter a valid email address",
  agree: "Please accept our policy"
 }
});

Answer 2

I've use jQuery plugin:validation. it works pretty with creating DOM elements on the fly. When creating them on the fly make sure the attributes name and ID are included. I'm pretty sure the plugin uses the name attribute to find them in the html. If the name is missing they can't be found.

Also this might be another good validation tool. http://www.livevalidation.com

Answer 3

In the current trunk of jVal 0.1.4 it can handle a little more robust error checking functionality than previous versions allowing you to return strings as the error message. Fetch the current revision 11 jVal 0.1.4 trunk at http://jquery-jval.googlecode.com/svn/trunk/jVal.js

Here's an example of a password field that will check for:

1. If the password has 8 chars or more
2. If the password has at least one numeric character
3. If the password has at least one of more alpha character

It will display a custom message if it fails a specific check

<input id="web_pswd" type="password" size="20"
    jVal="{valid:function (val) { if ( val.length < 8 ) return '8 or more characters required'; else if ( val.search(/[0-9]/) == -1 ) return '1 number or more required'; else if ( val.search(/[a-zA-Z]/) == -1 ) return '1 letter or more required'; else return ''; }, styleType:'pod'}"

Answer 4

Try this:

http://www.geektantra.com/2009/09/jquery-live-form-validation/

Answer 5

for me the best would be http://livevalidation.com/ or the one from baseassistance http://bassistance.de/jquery-plugins/jquery-plugin-validation/

jVal and live-form-validation can be ok, but I think the whole point of usin gjQuery is to use clean unobstructive code, and they require so much mess it's not an option for me.

I guess live-form-validation will evolve in the future, really weird to have to type thw whole regular expression to validate an email in each form....