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）;'或者是？那么为什么不添加'