Question

Here is the code:
– here i’ve declared my variables:

    var first = $('#first');
    var firstError = $('#firsterror'); // the errors are in span tags (if it matters)
    // and so on... 
    first.blur(validateFirst);
    last.blur(validateLast);
    username.blur(validateUsername);
    password.blur(validatePassword);
    confpassword.blur(validateConfpassword);
    month.blur(validateMonth);
    day.blur(validateDay);
    year.blur(validateYear);
    gender.blur(validateGender);

    $('#myForm').submit(function(){
   if( validateFirst() & validateLast() & validateUsername() & validatePassword() &     validateConfpassword() & validateMonth() & validateDay() & validateYear() &   validateGender() ){
        return true;
      }else{
        return false;
      }
    });

    function validateFirst(){
      if(first.val().length < 5){
        first.addClass('error_input');
        firstError.text('You left this empty!');
        firstError.addClass('error');
        return false;
      }else{
        first.removeClass('error_input');
        firstError.text('');
        return true;
      }
    };
      // and so on...  I would like the code to work as so: When an input recives focus the error should hide else the code should run exactly as it is.

thank you..

Answer 1

I think you should use jQuery validate lib to validate your form here is cdn link of jQuery validate..

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

Note that you have to include jQuery lib before that line

All you have to do is just write few lines of code as below

$('#form_id').validate({
    rules : {
        'el_name' : 'validation_rule'  // like, required
    },
    messages : {
        'el_name' : 'Your error message'
    }
});