Question

我创建了一个js脚本来验证电子邮件输入。当用户输入不具有电子邮件形式的字符串时，文本变为红色。

我想知道在用户提交了错误的字符串并想再次提交后，如何让文本回到之前的状态，而不是红色。我希望文本保持红色，直到用户再次开始输入。

这是我的代码：

$('.submit').bind("click", function(e){
    var error = 0;
    e.preventDefault();
    var email = $('.email').val();          
    if(!validateEmail(email) || email === "" ){
        $(".email").addClass('error')//this class makes my text red
        $(".email").focus();
        error = error + 1;
        console.log (error)

        return false
    } else {
         $.ajax({
           type: "POST",
           url: 'email.php',
           data: {
            email: email
           }, // serializes the form's elements.
         });
    }
    // $(".email").removeClass('error');
    // if(error === 1)
    // {
        // $(".email").removeClass('error');

    // }        
})

Answer 1

$( ".email" ).keypress(function() {
  $(this).removeClass("error");
});

因此，当您开始输入时，它将删除错误类。

您可能只使用.change而不是.keypress添加相同的行，因此粘贴电子邮件也会清除错误。

另一个答案是更好的我猜，但如果你这样做我会实现一个else语句来添加错误类，因为现在它将切换到正常但如果你制作一个无效的电子邮件它将保持那样。

Answer 2

以下代码将事件绑定到用户键入输入时。在更改制定有效电子邮件之前，它不会删除红色边框。如果您愿意，只需移除if语句即可删除红色边框。

$('.email').keyup(function() {
    if (validateEmail($(this).val()) {
        $(this).removeClass("error");
    }
});

用户在表单中提交错误的电子邮件后如何回滚到以前的状态

2 个答案: