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

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 语句来添加错误类，因为现在它会切换到正常状态，但如果你发送无效的电子邮件，它将保留就这样。