How to validate a form with jQuery?

Question

I tried to find the answer in other questions but actually nothing worked -.- Somehow I hate JavaScript ... Anyway! My Code looks like:

function validate()
{
 if ($(":input").length == 0) 
 {
  $(":input").addClass("notvalid");
  return false;
 }
 else
 {
  $(":input").removeClass("notvalid");
  return true;
 } 

 return true;
}

$(":input").blur(validate());
$(":input").keyup(validate());

$("#customForm").submit(function(){
 if(validate()){
  return true;
 }
 else
 {
  return false;
 }
});

I just want to test every tag to be not empty. The test should be done when the focus is lost or after every key type. And of course after the submit button has been clicked.

It doesn't work. Firefox error console says something like: unknown pseudoclass or pseudoelement 'input'. What does this mean?

Answer 1

The error says the jQuery doesn't know what elements to select with :input. Just replace :input but input:text in your selectors. You could also take a look at the jquery.validate plugin which will simplify your validation logic. There are many demos on the site that should help you get started.

---

UPDATE:

My mistake. There's :input selector according to the documentation.

Answer 2

Instead of:

function validate()
{
 if ($(":input").length == 0) 
 {
  $(":input").addClass("notvalid");
  return false;
 }
 else
 {
  $(":input").removeClass("notvalid");
  return true;
 } 

 return true;
}

Use:

function validate()
{

$(":input").each(function(){
  if ($(this).val() === '')
  {
    $(this).addClass("notvalid");
    return false;
  }
  else
  {
    $(this).removeClass("notvalid");
    return true;
  } 
});

 return true;
}

Answer 3

If your using jQuery already you should really use jquery.validate plugin like Darin said.

This will make you code much cleaner and easier to add standard validation rules like valid email, URL, min length, max length etc. Also removes the need of having to add and remove classes at does it for you.

Answer 4

You can alway use AJAX to validate your fields if you are more familiar with server side scripting like PHP.

Back to JS here what i think you want to accomplish:

$("input:text").bind("blur, keyup", function(){
  if($(this).val().length > 0){
    //Valid not empty
    $(this).removeClass("notvalid");     
  }else{
    //invalid empty
    $(this).addClass("notvalid");
  }
});

$("#customForm").submit(function(){
  $("input:text").keyup(); //triggers the keyup event on input fields 
                         //which then validates your fields according the
                         //code above.

  if($("form .notvalid").length > 0){
    //You got some invalid fields in form

    return false;
  }else{
    //All fields are valid continue

    return true;
  }

});

it may look a whole different then your approach but if you want to learn jQuery is better to get familiar with it. I commented some of the process, but if you have any doubt of the methods or functions used in code above you just google it. Good Luck!