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');
});