javascript - 入力がフォーカスを受け取ったときに検証エラーを非表示にする

Question

コードは次のとおりです。-ここで変数を宣言しました：

    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.

ありがとうございました..

Answer 1

jQuery validate lib を使用してフォームを検証する必要があると思います。ここに jQuery validate の cdn リンクがあります。

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

その行の前にjQuery libを含める必要があることに注意してください

あなたがしなければならないのは、以下のように数行のコードを書くだけです

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

Answer 2

すでにこのようなことを試しましたか？

function removeError() {
     $(this).removeClass('error_input');
     $("#error"+$(this).attr("id")).text("").removeClass("error");
}

first.focus(removeError);
last.blur(removeError);
username.blur(removeError);
....

Answer 3

これを試して

$('.error_input').focus(function(){
    $(this).removeClass('.error_input');
});