Question

在用户再次修正输入后，如何隐藏/删除分配给每个字段的错误消息？当输入无效时，下面的脚本会显示错误信息，但是当用户再次键入有效值并单击按钮时，错误信息仍然存在，如何解决？

这是回调

 $('#btn_register').click(function(){
    var parameters = $('#register_form').serialize();
    $.ajax({
        url: 'request.php',
        type: 'POST',
        data: parameters,
        dataType: 'json',
        success: function(response){
            if(response.success == 'success'){

                alert('Success');
                $('#register_form')[0].reset();

            }else{
                if(response.error.email != ''){
                    $('#email_error').html(response.error.email);
                }
                if(response.error.password != ''){
                    $('#password_error').html(response.error.password);
                }
                if(response.error.rpassword != ''){
                    $('#rpassword_error').html(response.error.rpassword);
                }
                if(response.error.fname != ''){
                    $('#fname_error').html(response.error.fname);
                }
                if(response.error.contact != ''){
                    $('#contact_error').html(response.error.contact);
                }
                if(response.error.dob != ''){
                    $('#dob_error').html(response.error.dob);
                }
                if(response.error.captcha != ''){
                    $('#captcha_error').html(response.error.captcha);
                }
            }
        },
        error: function(){
            console.log(arguments);
        }
    });

});

这是表单字段，用于在回调无效时显示错误消息：

<input type="text" id="email" name="email" /><br /><span class="error" id="email_error"></span>

请告知并谢谢。

Answer 1

在给定的标记下，我将做类似

的事情

success: function(response){
    if(response.success == 'success'){
        .....
    } else {
        $('[id$="_error"]').html('');

        $.each(response.error, function(key, value){
            if(value){
                $('#' + key + '_error').html(value);
            }
        });
    }
}

要清除所有错误消息，逻辑基于以下假设：所有错误占位符元素的id属性都以_error结尾，然后使用attribute ending with selector

$('[id$="_error"]').html('');

但我建议将error-label这样的类添加到所有错误占位符，并将$('[id$="_error"]').html('')更改为$('.error-label').html('')

Answer 2

试试这个：

<input type="text" id="email" name="email" onChange="resetInput(this);"/>

function resetInput(placeholder) {
      $('#'+$('placeholder').attr('id')+'_error').text('');
}

或尝试你的ajax成功：

    success :function () {
    $('[id$="_error"])').text('');
if(response.success == 'success'){
                alert('Success');
                $('#register_form')[0].reset();
            }else{...............}
    }

重新验证正确的输入时，jQuery隐藏/删除错误消息

2 个答案: