如何清除單個驗證錯誤？

Question

我有一個警報框，它將在我的訂閱表單上方彈出，指示我的表單中每個特定的輸入錯誤。

我想知道如果輸入字段隨后按照表單的規格進行驗證，如何逐個清除這些錯誤？ 例如，用戶經過並點擊發送，但沒有填寫任何內容； 將會出現錯誤列表。 如果這樣，用戶決定輸入他們的姓名，而不是他們的電子郵件地址，則警報框應清除文本“請輸入您的名字”，但所有其他尚未糾正的錯誤應保留。

我嘗試在錯誤字段內的<p>標記周圍創建一個函數，但不確定如何在腳本中使用有效變量。

這是我的代碼：

還有一個JSFiddle http://jsfiddle.net/cqf8guys/2/

謝謝

$(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();
}   
});

};

Answer 1

HTML代碼

<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>

jQuery代碼

$(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();
        }   
    });
};

這應該工作！

看看這個JSFiddle