【问题标题】:Validate Plugin - using the submitHandler验证插件 - 使用 submitHandler
【发布时间】:2009-07-18 11:05:43
【问题描述】:

如果您已经看到或回复了此内容,我深表歉意,但我似乎找不到我最初提交的问题,我迫切需要解决方案。

如果用户点击提交,我需要显示促销信息 他们符合有关其邮政编码的某些标准。我听说你 应该使用 submitHandler 但对 JavaScript 来说是全新的 甚至更新到 JQuery 我有点坚持我应该如何写 这。我以为会是这样,但很明显 不起作用。

submitHandler: function(form) { 
                    var special = /^[T]{1}[A]{1}([1-13|17|25]){2}/.test(value); 
                    if (special); 
                    alert('You have been entered into a competition to win a special    prize'); 
                    form.submit(); 
            }, // end of submitHandler 

我基本上需要在他们单击提交时显示此消息并且 然后他们确认并将表格发送到服务器。

这是我目前用于验证的代码:

 $(document).ready(function(){ 
 $("#orderForm").validate({ 
            onfocusout: function(element) { 
                    this.element(element); 
            }, 
            rules: { 
                    firstName: { 
                            required: true, 
                    }, 
                    surname: { 
                            required: true, 
                    }, 
                    phoneNumber: { 
                            required: true, 
                    }, 
                    streetName: { 
                            required: true, 
                    }, 
                    city: { 
                            required: true, 
                    }, 
                    postalCode: { 
                            required: true, 
                            shipPostalCode: true, 
                    }, 
                    billEmailAddress: { 
                            required: true, 
                    }, 
                    billPhoneNumber: { 
                            required: true, 
                    }, 
                    promoCardNumber: { 
                            required: true, 
                            fidelityCardNumber: true, 
                    }, 
                    billCardNumber: { 
                            required: true, 
                    }, 
                    billCardType: { 
                            required: true, 
                    }, 
            }, //end of rules 
    }); // end of validate 
    }); // end of function 


$.validator.addMethod('postalCode', function (value) { 
            return /^[A-Z]{2}\d{1,2}\s\d{1}[A-Z]{2}$/.test(value); 
            }, 'Please enter a valid postcode'); 
$.validator.addMethod('promoCardNumber', function (value) { 
            return /^[A-Z]{1}([A-Z]|\d){4}\s?([A-Z]|\d){5}\s?([A-Z]|\d){3}\d{1}$/.test  (value); 
            }, 'Please enter a valid card number'); 

这是我的html代码:

   <form id="orderForm" method="post" action="x"> 
  <table id="formTable" cellpadding="5"> 
    <tr> 
      <td> 
        <h3>Shipping and Billing Information</h3> 
      </td> 
      <td>&nbsp;</td> 
    </tr> 
    <tr> 
      <td><label for="firstname">First Name</label></td> 
      <td><input id="firstName" type="text" name="firstName" maxlength="30" /></td> 
    </tr> 
    <tr> 
      <td><label for="surname">Surname</label></td> 
      <td><input id="surname" type="text" name="surname" maxlength="30" /></td> 
    </tr> 
    <tr> 
      <td><label for="phoneNumber">Contact Telephone Number</label></td> 
      <td><input id="phoneNumber" type="text" name="phoneNumber" maxlength="30" /></td> 
    </tr> 
    <tr> 
      <td><label for="streetName">Street Name</label></td> 
      <td><input id="streetName" type="text" name="streetName" maxlength="30" /></td> 
    </tr> 
    <tr> 
      <td><label for="city">City</label></td> 
      <td><input id="city" type="text" name="city" maxlength="30" /></td> 
    </tr> 
    <tr> 
      <td><label for="postalCode">Post Code</label></td> 
      <td><input id="postalCode" type="text" name="postalCode" maxlength="30" /></td> 
    </tr> 
    <tr> 
      <td><label for="billEmailAddress">Email address</label></td> 
      <td><input id="billEmailAddress" type="text" name="billEmailAddress" maxlength="30" /></td> 
    </tr> 
    <tr> 
      <td><label for="billPhoneNumber">Contact Telephone Number</label></td> 
      <td><input id="billPhoneNumber" type="text" name="billPhoneNumber" maxlength="30" /></td> 
    </tr> 
    <tr> 
      <td><label for="promoCardNumber">Promotional Card</label></td> 
      <td><input id="promoCardNumber" type="text" name="promoCardNumber" maxlength="30" /></td> 
    </tr> 
    <tr> 
      <td><label for="billCardNumber">Credit Card Number</label></td> 
      <td><input id="billCardNumber" type="text" name="billCardNumber" maxlength="30" /></td> 
    </tr> 
    <tr> 
      <td><label for="billCardType">Credit Card Type</label></td> 
      <td><select id="billCardType" name="billCardType"> 
        <option value="..."> 
          Choose your card... 
        </option> 
        <option value="visa"> 
          Visa 
        </option> 
        <option value="mastercard"> 
          Mastercard 
        </option> 
      </select></td> 
    </tr> 
    <tr> 
      <td><label for="instructions">Instructions</label></td> 
      <td> 
      <textarea id="instructions" name="instructions" rows="8" cols="30"> 
Enter your requirements here or comments. </textarea></td> 
    </tr> 
    <tr> 
      <td colspan="2"><input id="submit" type="submit" name="Submit" value="Submit" /> 
              </td> 
    </tr> 
  </table> 
</form> 

【问题讨论】:

    标签: javascript jquery validation


    【解决方案1】:

    我认为您的原始问题(以及我试图回答的问题)在这里:JQuery and validate plugin - how to add a promotional message on submit

    【讨论】:

    • 啊,是的,你写的,[code] $("#orderForm").validate({ submitHandler: function(form) { // 显示个人信息的代码 // 处理表单提交的代码 } , onfocusout: function(element) { ... [/code] 正如你所看到的,我已经尝试编写它,但我真的不知道我应该如何编码。我有它的元素只需要拼凑在一起。
    • 你把 submitHandler 方法放在哪里了?它应该是您传递给 $("#orderForm").validate 的对象的一部分。在您的 submitHandler 方法中,您可能需要调用 $(form).ajaxSubmit(); (如果您使用的是 jQuery 表单插件)而不是 form.submit() 因为(我认为)验证插件会取消默认提交行为,因此调用 form.submit() 只会重新触发验证。
    • 我已将提交处理程序置于我拥有的其他规则之下,但在我关闭规则之前。错误控制台不喜欢这样,并说我有语法错误。我应该把它放在规则之后吗?
    • 听起来您已将 submitHandler 指定为规则对象的属性。 submitHandler 应该是 options 对象的成员(您传递给 validate 的对象;这也是在您的代码中包含规则和 onmouseout 的同一对象)。
    • 我有它在规则之外,但仍在验证范围内,它仍然不起作用。它们在控制台中没有错误,因此它必须与我的逻辑有关。一切正常,但是当我单击提交时,当我输入符合条件的邮政编码时,它会在没有显示消息的情况下进入服务器。我的 submitHandler 代码是: submitHandler: function(form) { var special = /^[TA]{2}([1-11|20|22]){2}/.test(value); if (special){ alert('您将收到一份特别的礼物'); } form.submit();我不认为里面的代码是正确的,但我不知道我应该放什么
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-11-08
    • 1970-01-01
    • 1970-01-01
    • 2017-10-23
    相关资源
    最近更新 更多