我在尝试使用jQuery Validate提交HTML表单时遇到了一些问题。我想在输入上使用默认的HTML提交属性来重定向用户，但我的提交处理程序似乎阻止我这样做。
您会看到名称属性＆＃34; retURL ＆＃34;在表单顶部的输入重定向到Google。
我想使用jQuery validate来检查表单是否有效，然后HTML提交的操作将用户重定向到所需的链接。
这是我的标记：
<form id="testform" name="testform" class="test-form validate" method="post" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" data-script="/static/js/form-ebuLead-min.js">
<input type="hidden" name="formID" value="nPpNZLT_U0qn4QjQnfgSdw"/>
<input type="hidden" name="retURL" value="http://www.google.com">
<input type="hidden" name="oid" value="00D2000000007y2">
<input type="hidden" name="00N20000002A4au" type="text" value="<please populate with the page referrer information>"/>
<div class="smGrid12">
<span class="form-heading">Register your interest</span>
<p>Give us a few details on how we can help and we'll get back to you.</p>
</div>
<div class="smGrid12 lgGrid6">
<input id="businessName" name="businessName" type="text" tabindex="201" maxlength="50" placeholder="Business name">
<span class="error-msg errorPlacement"></span>
</div>
<div class="smGrid12 lgGrid6">
<input id="yourName" name="yourName" type="text" tabindex="202" maxlength="50" placeholder="Your name">
<span class="error-msg errorPlacement"></span>
</div>
<div class="smGrid12 lgGrid6">
<span class="form-sub-heading">Please contact me by</span>
<div class="smGrid6 no-pad pad-right">
<label for="email-radio" class="branded-radio-select is-selected">
Email
<input id="email-radio" name="contact-method_${asset.id}" type="radio" checked="checked" tabindex="203" value="email">
</label>
</div>
<div class="smGrid6 no-pad pad-left">
<label for="phone-radio" class="branded-radio-select">
Phone
<input id="phone-radio" name="contact-method_${asset.id}" type="radio" tabindex="204" maxlength="30" value="phone">
</label>
</div>
</div>
<div class="smGrid12">
<input id="emailAddress" class="email-input" name="emailAddress" type="email" tabindex="205" placeholder="Email Address">
<input id="phoneNumber" class="phone-input" name="phoneNumber" type="tel" tabindex="206" maxlength="30" placeholder="Phone Number">
<span class="error-msg email-phone-error-msg errorPlacement"></span>
</div>
<div class="smGrid12">
<textarea id="question" class="placeholderText" name="question" tabindex="207" rows="9" maxlength="300" placeholder="Specific Question"></textarea>
<span class="error-msg errorPlacement"></span>
</div>
<div class="smGrid12 mdGrid6">
<div class="branded-dropdown-select-wrap">
<select id="numberOfEmployees" class="branded-dropdown-select" name="numberOfEmployees" tabindex="208">
<option value="" selected disabled style="display:none;">Number of employees</option>
<option value="0-10">Less than 10 staff</option>
<option value="10-100">Between 10-100</option>
<option value="100+">100+ people</option>
</select>
</div>
</div>
<div class="smGrid12 mdGrid6">
<div class="branded-dropdown-select-wrap">
<select id="businessLocation" name="businessLocation" tabindex="209">
<option value="" selected disabled style="display:none;">Your business location</option>
<option value="Northern">Auckland</option>
<option value="Waikato">Bay of Plenty</option>
<option value="Southern">Canterbury</option>
<option value="Waikato">Gisborne</option>
<option value="Central">Hawke's Bay</option>
<option value="Central">Manawatu-Wanganui</option>
<option value="Southern">Marlborough</option>
<option value="Northern">Northland</option>
<option value="Southern">Otago</option>
<option value="Southern">Southland</option>
<option value="Central">Taranaki</option>
<option value="Southern">Tasman-Nelson</option>
<option value="Waikato">Waikato</option>
<option value="Central">Wellington</option>
<option value="Southern">West Coast</option>
</select>
</div>
</div>
<div class="smGrid12">
<input type="submit" name="submit" class="submit_form" value="Submit" tabindex="210" />
</div>
这是我的jQuery：
EbuLeadForm.prototype.setUpValidationRules = function () {
var self = this;
$j(self.formID).validate({
debug: true,
onclick: false,
onfocusout: false,
ignore: ":hidden", // Forces override of hidden elements!
rules: {
businessName : {
required: true,
minlength: 1
},
yourName : {
required: true,
minlength: 1
},
emailAddress : {
required: true,
email: true
},
phoneNumber : {
required: true,
number: true,
minlength: 6
},
question : {
required: true,
minlength: 1
}
},
messages: {
businessName: {
required: "Please enter your business name"
},
yourName: {
required: "Please enter your name"
},
emailAddress: {
required: "Please enter your email address"
},
phoneNumber: {
required: "Please enter your phone number",
number: "Please enter your phone number without spaces"
},
question: {
required: "Please enter your question"
}
},
errorPlacement : function(errorMsg, element) {
if (element[0].nodeName === 'SELECT' && element.hasClass('error')) {
element.next().addClass('error');
} else if (element[0].nodeName === 'SELECT') {
element.next().removeClass('error');
}
errorMsg.appendTo( element.parent().find('.errorPlacement') );
},
submitHandler : function (form) {
console.log("Form Submitted");
}
});
};
答案 0 :(得分：1)
如果您想提交到form action网址，请不要使用submitHandler回调。最常见的情况是，submitHandler回调用于ajax()代替form action网址。
否则，如果您因任何原因需要使用submitHandler回调，则必须手动添加submit()。
submitHandler : function (form) {
console.log("Form Submitted");
$(form).submit(); // <-- uses the "form" argument, not the "form" tag.
}
这是因为默认submitHandler包含.submit()，当您指定自定义submitHandler时，您将覆盖默认值。在您的情况下，submitHandler为空，因此不会发生任何事情。
请注意，上面的代码几乎与默认代码完全相同，因此完全删除它会产生相同的结果。
此外，用于问题排查的debug: true也不允许提交。