Question

我在尝试使用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&#39;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");
    }
  });
};

Answer 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也不允许提交。

jQuery验证提交处理程序问题| HTML输入

1 个答案: