2
美好的一天。感謝德里克和羅斯的大力協助，我設法將一個表格與驗證選項結合在一起。具體的事情是，該頁面包含3個窗體，根據下拉列表僅顯示一個窗體。除了一件事之外，一切似乎都是完美的。我無法提交表單，因爲在其他兩個隱藏的表單中包含未填充的字段。我怎樣才能克服這個問題？我認爲這是一個向jquery添加一個會在驗證過程中忽略隱藏元素的部分。但不幸的是，我不知道該怎麼辦下面這一信息。代碼：與隱藏字段一起進行表單驗證
HTML：
<select id='selector'>
<option value='opt1' id="opt1">Quote Request</option>
<option value='opt2' id="opt2">General Enquiry</option>
<option value='opt3' id="opt3">Feedback</option>
</select>
<form action="" method="post" id="form1" class="form" action="scripts/form-quote.php">
<ul>
<li>
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Name" class="required"/>
</li>
<li>
<label for="email">E-mail</label>
<input id="email" name="email" type="text" placeholder="E-mail" class="required"/>
</li>
<li>
<label for="msg">Message</label>
<textarea id="msg" name="msg" cols="43" rows="8" placeholder="Please specify your requirements" class="required"></textarea>
</li>
<li>
<label for="ad">Referrer</label>
<input id="ad" name="ad" type="text" placeholder="Where did you hear about us?" />
</li>
</ul>
<button type="submit" class="submit">Request a quote</button>
</form>
<form action="" method="post" id="form2" class="form" action="scripts/form-general.php">
<ul>
<li>
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Name" class="required"/>
</li>
<li>
<label for="email">E-mail</label>
<input id="email" name="email" type="text" placeholder="E-mail" class="required"/>
</li>
<li>
<label for="msg">Message</label>
<textarea id="msg" name="msg" cols="43" rows="8" placeholder="Please enter your message" class="required"></textarea>
</li>
<li>
<label for="ad">Referrer</label>
<input id="ad" name="ad" type="text" placeholder="Where did you hear about us?" />
</li>
</ul>
<button type="submit" class="submit">Send your message</button>
</form>
<form action="" method="post" id="form3" class="form" action="scripts/form-feedback.php">
<select>
<option value='General feedback'>General feedback</option>
<option value='Website feedback'>Website feedback </option>
<option value='Services feedback'>Provided services feedback</option>
</select>
<ul>
<li>
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Name" class="required"/>
</li>
<li>
<label for="email">E-mail</label>
<input id="email" name="email" type="text" placeholder="E-mail" class="required"/>
</li>
<li>
<label for="msg">Message</label>
<textarea id="msg" name="msg" cols="43" rows="8" placeholder="Your feedback" class="required"></textarea>
</li>
<li>
<label for="ad">Referrer</label>
<input id="ad" name="ad" type="text" placeholder="Where did you hear about us?" />
</li>
</ul>
<button type="submit" class="submit">Send your feedback</button>
</form>
的jQuery：
$(function() {
var addErrorMessage = function (field) {
var err = $(document.createElement('p')).addClass('validation-error').text('Required field');
field.addClass('err').after(err);
},
clearError = function() {
var t = $(this);
if (t.hasClass('err')) {
t.removeClass('err');
t.next('p').empty().remove();
}
},
isEmpty = function (str) {
return str.trim().length < 1;
},
isValidEmail = function (str) {
var regexp = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regexp.test(str);
},
validateForm = function() {
var requiredFields = $(this).find('.required'),
email = $('#email'),
fieldsValidate = true;
// check that required fields are not empty
requiredFields.each(function() {
var t = $(this);
if (isEmpty(t.val())) {
fieldsValidate = false;
if (!t.hasClass('err')) {
addErrorMessage(t);
}
}
});
// check that email is valid
if (!isValidEmail(email.val().trim())) {
fieldsValidate = false;
if (!email.hasClass('err')) {
addErrorMessage(email);
}
}
return fieldsValidate;
};
$('input, textarea').keyup(clearError);
$('#form1').submit(validateForm);
var $select = $("#selector");
$select.change(function() {
if ($('#selector option:selected').attr("id") == "opt1") {
if ($('#form1').is(":hidden")) {
$('#form1').fadeIn(500);
}
$('#form2').hide();
$('#form3').hide();
}
if ($('#selector option:selected').attr("id") == "opt2") {
if ($('#form2').is(":hidden")) {
$('#form2').fadeIn(500);
}
$('#form1').hide();
$('#form3').hide();
}
if ($('#selector option:selected').attr("id") == "opt3") {
if ($('#form3').is(":hidden")) {
$('#form3').fadeIn(500);
}
$('#form1').hide();
$('#form2').hide();
}
});
});
而且的jsfiddle here
標記時，請多加小心。 [tag：jquery-validate]用於特定插件。固定。謝謝。 – Sparky
謝謝，不知道。請記住這一點。謝謝@Sparky –
但是如果你使用'$（'＃form1'）。submit（validateForm）;'或者是？那麼爲什麼不添加'