我有一个警告框会弹出我的订阅表单上方，表示我表单中的每个特定输入错误。
我想知道如果输入字段随后被验证为我的表单规范，我怎么能在密钥上一个接一个地清除这些错误？例如，用户来过并点击发送并且没有填写任何内容;会有一个错误列表。如果那时，用户决定输入他们的姓名，而不是他们的电子邮件地址，则警告框应该清除文本，＆＃34;请输入您的名字＆＃34;，但所有其他错误尚未得到纠正应该留下来。
我尝试在错误字段中围绕<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();
}
});
};
答案 0 :(得分：0)
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