Javascript 如何清除单个验证错误？

我的订阅表单上方会弹出一个警告框，指示表单中的每个特定输入错误

我想知道，如果输入字段按照我的表单规范进行验证，如何在keyup上一个接一个地清除这些错误？例如，用户经过并点击send，但没有填写任何内容；将有一个错误列表。如果用户决定输入他们的姓名，而不是他们的电子邮件地址，则警报框应清除文本“请输入您的名字”，但所有其他未更正的错误应保留

我尝试在error字段中围绕

标记创建一个函数，但不确定如何在脚本中绕过有效变量

以下是我的代码：

还有一把叉子

谢谢

$(document).ready(function() {
$('form #response2').hide();

$('.button2').click(function(e) {

e.preventDefault();

var valid = '';
var required = ' is required';
var first = $('form #first').val();
var last = $('form #last').val();
var city = $('form #city').val();
var email = $('form #email').val();
var tempt = $('form #tempt').val();
var tempt2 = $('form #tempt2').val();

if(first=='' || first.length<=1) {
    $('form #first').css('border','2px solid #ff0000');
    $('form #first').css('background-color','#ffcece');
    valid += '<p>Your first name is required</p>';
}
else {
  $(this).removeAttr('style');
}

if(last=='' || last.length<=1) {
    $('form #last').css('border','2px solid #ff0000');
    $('form #last').css('background-color','#ffcece');
    valid += '<p>Your last name' + required + '</p>';
}
else {
  $(this).removeAttr('style');
}

if(city=='' || city.length<=1) {
    $('form #city').css('border','2px solid #ff0000');
    $('form #city').css('background-color','#ffcece');
    valid += '<p>Please include your city</p>';
}
else {
  $(this).removeAttr('style');
}

if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
    valid += '<p>A valid E-Mail address is required</p>';
}

if (tempt != 'http://') {
    valid += '<p>We can\'t allow spam bots.</p>';
}

if (tempt2 != '') {
    valid += '<p>A human user' + required + '</p>';
}

if (valid != '') {
    $('form #response2').removeClass().addClass('error2')
        .html('' +valid).fadeIn('fast');
}

else {
    $('form #response2').removeClass().addClass('processing2').html('<p style="top:0px; left:0px; text-align:center; line-height:1.5em;">Please wait while we process your information...</p>').fadeIn('fast');

    var formData = $('form').serialize();
    submitFormSubscribe(formData);
}
});

});

function submitFormSubscribe(formData) {

$.ajax({

type: 'POST',
url: 'http://3elementsreview.com/blog/wp-content/themes/3elements/php-signup/sign-up-complete.php',
data: formData,
dataType: 'json',
cache: false,
timeout: 4000,
success: function(data) {

$('form #response2').removeClass().addClass((data.error === true) ? 'error2' : 'success2')
          .html(data.msg).fadeIn('fast');

if ($('form #response2').hasClass('success2')) {
setTimeout("$('form #response2').fadeOut('fast')", 6000);
}

},
error: function(XMLHttpRequest, textStatus, errorThrown) {

$('form #response2').removeClass().addClass('error2')
.html('<p>There was an <strong>' + errorThrown +
'</strong> error due to an <strong>' + textStatus +
'</strong> condition.</p>').fadeIn('fast');
},
complete: function(XMLHttpRequest, status) {                    
$('form')[0].reset();
}   
});

};

$（文档）.ready（函数（）{
$（'form#response2'）.hide（）；
$（'.button2'）。单击（函数（e）{
e、 预防默认值（）；
var有效=“”；
var required='是必需的'；
var first=$（'form#first'）.val（）；
var last=$（'form#last'）.val（）；
var city=$（'form#city'）.val（）；
var email=$（'form#email'）.val（）；
var test=$（'form#test'）.val（）；
var test2=$（'form#test2'）.val（）；
if（first=''| | first.lengthHTML代码

<header class="main-hd">
    <h1 class="page-headline">Join 3Elements Review's email list</h1>
</header>
<section>
    <form class="contact-me" action="php-signup/sign-up-complete.php" method="post" name="contact-me">
        <div id="response2"><!-----------------CONTAINS FORM ERROR MESSAGE--------------></div>
        <input id="first" class='txt1' title="Your First Name is Required" maxlength="15" name="First" pattern="[A-Za-z]{2,15}" type="text" autofocus="" placeholder="First Name" />
        <input id="last" class='txt1' title="Your Last Name is Required" maxlength="15" name="Last" pattern="[A-Za-z]{2,15}" type="text" placeholder="Last Name" />
        <input id="email" class='txt1' title="Your E-Mail Address is Required" maxlength="50" name="Email" pattern="[A-Za-z0-9\@\.com]{7,50}" type="email" placeholder="E-Mail Address" />
        <input id="city" class='txt1' title="Please fill in your 'City'" maxlength="40" name="City" pattern="[A-Za-z\s]{3,40}" type="text" placeholder="City" />
        <select id="country" name="Country">
            <option value="">Country</option>
            <option value="United States">United States</option>
            <option value="United Kingdom">United Kingdom</option>
            <option value="Australia">Australia</option>
            <option value="Brazil">Brazil</option>
            <option value="Canada">Canada</option>
            <option value="Egypt">Egypt</option>
            <option value="France">France</option>
            <option value="India">India</option>
            <option value="Indonesia">Indonesia</option>
            <option value="Italy">Italy</option>
            <option value="Mexico">Mexico</option>
            <option value="New Zealand">New Zealand</option>
            <option value="Saudi Arabia">Saudi Arabia</option>
            <option value="South Africa">South Africa</option>
            <option value="Spain">Spain</option>
        </select>
        <div id="ajaxLoader" style="display: none;">
            <img src="images/loader.gif" alt="loading..." /></div>
        <div id="cityAjax" style="display: none;">
            <select id="state" name="State">
                <option value="">-State/Region-</option>
            </select>
        </div>
        <input id="tempt" name="tempt" type="hidden" value="http://" />
        <input id="tempt2" class="clear" name="tempt2" type="hidden" value="" />

        <button class="txt1 button2">SUBSCRIBE</button>

    </form>
</section>

$(document).ready(function() {
    $('form #response2').hide();

    $('.txt1').on('keyup click', function(e) {
        e.preventDefault();

        var valid = '';
        var required = ' is required';
        var first = $('form #first').val();
        var last = $('form #last').val();
        var city = $('form #city').val();
        var email = $('form #email').val();
        var tempt = $('form #tempt').val();
        var tempt2 = $('form #tempt2').val();

        if(first=='' || first.length<=1) {
            $('form #first').css('border','2px solid #ff0000');
            $('form #first').css('background-color','#ffcece');
            valid += '<p>Your first name is required</p>';
        }
        else {
            $('form #first').removeAttr('style');
        }

        if(last=='' || last.length<=1) {
            $('form #last').css('border','2px solid #ff0000');
            $('form #last').css('background-color','#ffcece');
             valid += '<p>Your last name' + required + '</p>';
        }
        else {
            $(this).removeAttr('style');
        }

        if(city=='' || city.length<=1) {
            $('form #city').css('border','2px solid #ff0000');
            $('form #city').css('background-color','#ffcece');
            valid += '<p>Please include your city</p>';
        }
        else {
            $('form #city').removeAttr('style');
        }

        if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
            valid += '<p>A valid E-Mail address is required</p>';
        }

        if (tempt != 'http://') {
            valid += '<p>We can\'t allow spam bots.</p>';
        }

        if (tempt2 != '') {
            valid += '<p>A human user' + required + '</p>';
        }

        if (valid != '') {
            $('form #response2').removeClass().addClass('error2')
            .html('' +valid).fadeIn('fast');
        }else {
            if($('.button2').data('clicked')){
                $('form #response2').removeClass().addClass('processing2').html('<p style="top:0px; left:0px; text-align:center; line-height:1.5em;">Please wait while we process your information...</p>').fadeIn('fast');

                var formData = $('form').serialize();
                submitFormSubscribe(formData);
            }
        }

    });

});

function submitFormSubscribe(formData) {
    $.ajax({
        type: 'POST',
        url: 'http://3elementsreview.com/blog/wp-content/themes/3elements/php-signup/sign-up-complete.php',
        data: formData,
        dataType: 'json',
        cache: false,
        timeout: 4000,
        success: function(data) {

            $('form #response2').removeClass().addClass((data.error === true) ? 'error2' : 'success2')
                .html(data.msg).fadeIn('fast');

            if ($('form #response2').hasClass('success2')) {
                setTimeout("$('form #response2').fadeOut('fast')", 6000);
            }   
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {

            $('form #response2').removeClass().addClass('error2')
                .html('<p>There was an <strong>' + errorThrown +
                    '</strong> error due to an <strong>' + textStatus +
                    '</strong> condition.</p>').fadeIn('fast');
        },
        complete: function(XMLHttpRequest, status) {                    
            $('form')[0].reset();
        }   
    });
};


加入3Elements Review的电子邮件列表
国家
美国
大不列颠联合王国
澳大利亚
巴西
加拿大
埃及
法国
印度
印度尼西亚
意大利
墨西哥
新西兰
沙特阿拉伯
南非
西班牙
-州/地区-
订阅

jQuery代码

<header class="main-hd">
    <h1 class="page-headline">Join 3Elements Review's email list</h1>
</header>
<section>
    <form class="contact-me" action="php-signup/sign-up-complete.php" method="post" name="contact-me">
        <div id="response2"><!-----------------CONTAINS FORM ERROR MESSAGE--------------></div>
        <input id="first" class='txt1' title="Your First Name is Required" maxlength="15" name="First" pattern="[A-Za-z]{2,15}" type="text" autofocus="" placeholder="First Name" />
        <input id="last" class='txt1' title="Your Last Name is Required" maxlength="15" name="Last" pattern="[A-Za-z]{2,15}" type="text" placeholder="Last Name" />
        <input id="email" class='txt1' title="Your E-Mail Address is Required" maxlength="50" name="Email" pattern="[A-Za-z0-9\@\.com]{7,50}" type="email" placeholder="E-Mail Address" />
        <input id="city" class='txt1' title="Please fill in your 'City'" maxlength="40" name="City" pattern="[A-Za-z\s]{3,40}" type="text" placeholder="City" />
        <select id="country" name="Country">
            <option value="">Country</option>
            <option value="United States">United States</option>
            <option value="United Kingdom">United Kingdom</option>
            <option value="Australia">Australia</option>
            <option value="Brazil">Brazil</option>
            <option value="Canada">Canada</option>
            <option value="Egypt">Egypt</option>
            <option value="France">France</option>
            <option value="India">India</option>
            <option value="Indonesia">Indonesia</option>
            <option value="Italy">Italy</option>
            <option value="Mexico">Mexico</option>
            <option value="New Zealand">New Zealand</option>
            <option value="Saudi Arabia">Saudi Arabia</option>
            <option value="South Africa">South Africa</option>
            <option value="Spain">Spain</option>
        </select>
        <div id="ajaxLoader" style="display: none;">
            <img src="images/loader.gif" alt="loading..." /></div>
        <div id="cityAjax" style="display: none;">
            <select id="state" name="State">
                <option value="">-State/Region-</option>
            </select>
        </div>
        <input id="tempt" name="tempt" type="hidden" value="http://" />
        <input id="tempt2" class="clear" name="tempt2" type="hidden" value="" />

        <button class="txt1 button2">SUBSCRIBE</button>

    </form>
</section>

$(document).ready(function() {
    $('form #response2').hide();

    $('.txt1').on('keyup click', function(e) {
        e.preventDefault();

        var valid = '';
        var required = ' is required';
        var first = $('form #first').val();
        var last = $('form #last').val();
        var city = $('form #city').val();
        var email = $('form #email').val();
        var tempt = $('form #tempt').val();
        var tempt2 = $('form #tempt2').val();

        if(first=='' || first.length<=1) {
            $('form #first').css('border','2px solid #ff0000');
            $('form #first').css('background-color','#ffcece');
            valid += '<p>Your first name is required</p>';
        }
        else {
            $('form #first').removeAttr('style');
        }

        if(last=='' || last.length<=1) {
            $('form #last').css('border','2px solid #ff0000');
            $('form #last').css('background-color','#ffcece');
             valid += '<p>Your last name' + required + '</p>';
        }
        else {
            $(this).removeAttr('style');
        }

        if(city=='' || city.length<=1) {
            $('form #city').css('border','2px solid #ff0000');
            $('form #city').css('background-color','#ffcece');
            valid += '<p>Please include your city</p>';
        }
        else {
            $('form #city').removeAttr('style');
        }

        if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
            valid += '<p>A valid E-Mail address is required</p>';
        }

        if (tempt != 'http://') {
            valid += '<p>We can\'t allow spam bots.</p>';
        }

        if (tempt2 != '') {
            valid += '<p>A human user' + required + '</p>';
        }

        if (valid != '') {
            $('form #response2').removeClass().addClass('error2')
            .html('' +valid).fadeIn('fast');
        }else {
            if($('.button2').data('clicked')){
                $('form #response2').removeClass().addClass('processing2').html('<p style="top:0px; left:0px; text-align:center; line-height:1.5em;">Please wait while we process your information...</p>').fadeIn('fast');

                var formData = $('form').serialize();
                submitFormSubscribe(formData);
            }
        }

    });

});

function submitFormSubscribe(formData) {
    $.ajax({
        type: 'POST',
        url: 'http://3elementsreview.com/blog/wp-content/themes/3elements/php-signup/sign-up-complete.php',
        data: formData,
        dataType: 'json',
        cache: false,
        timeout: 4000,
        success: function(data) {

            $('form #response2').removeClass().addClass((data.error === true) ? 'error2' : 'success2')
                .html(data.msg).fadeIn('fast');

            if ($('form #response2').hasClass('success2')) {
                setTimeout("$('form #response2').fadeOut('fast')", 6000);
            }   
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {

            $('form #response2').removeClass().addClass('error2')
                .html('<p>There was an <strong>' + errorThrown +
                    '</strong> error due to an <strong>' + textStatus +
                    '</strong> condition.</p>').fadeIn('fast');
        },
        complete: function(XMLHttpRequest, status) {                    
            $('form')[0].reset();
        }   
    });
};

$（文档）.ready（函数（）{
$（'form#response2'）.hide（）；
$（'.txt1'）。on（'keyup click'，函数（e）{
e、 预防默认值（）；
var有效=“”；
var required='是必需的'；
var first=$（'form#first'）.val（）；
var last=$（'form#last'）.val（）；
var city=$（'form#city'）.val（）；
var email=$（'form#email'）.val（）；
var test=$（'form#test'）.val（）；
var test2=$（'form#test2'）.val（）；
如果（first=''|| first.LENGTH您不想单击“订阅”来检查错误。这就是为什么您要在输入时选择“向上键”。这就是您想要告诉的吗？最初，当用户点击“订阅”时，表单会立即验证是否有错误。我想知道，当警报框打开时，当使用r在输入字段中键入。Rahul，fiddle可以工作，但我也遇到了语法错误。另外，有没有办法保持keyup功能以保持实时验证，但在实际点击提交之前不进行表单处理？目前，表单在输入框中放入正确的信息后立即提交。还有，当您如果将焦点放在任何字段上，就会出现错误，只有在表单首次提交时，在相应的输入框中没有任何信息，才会出现错误。