jQuery 验证插件按钮不起作用，以及数字字段

Question

我对一个简单的插件有很多问题，jquery 验证插件：我需要设置一个包含 3 个字段的表单，名称（必填）电子邮件（必填，电子邮件格式），phone（不需要，11 位数字格式）。

这是 html:

<form class="form" id="contactusform">
<div class="row">
    <div class="col-sm-4 form-label">
    <label for="cname">Contact Name*</label>
    </div>
    <div class="col-sm-6 form-row">
    <input id="cname" name="name" type="text" class="form-field" required>
    </div>
</div>
<div class="row">
    <div class="col-sm-4 form-label">
    <label for="cemail">Contact Email Address*</label>
    </div>
    <div class="col-sm-6 form-row">
    <input id="cemail" name="email" type="email"  class="form-field" required>
    </div>
</div>
<div class="row">
    <div class="col-sm-4 form-label">
    <label for="cphone">Contact Phone Number</label>
    </div>
    <div class="col-sm-6 form-row">
    <input id="cphone" name="phone" type="text" class="form-field">
    </div>
</div>
<div class="row">
    <div class="col-sm-6 form-send-button">
    <div class="">
    <input id="submit" type="button" class="btn send-button" value="SEND">
    </div>
    </div>
</div>

这是脚本：

$(document).ready(function () {
    $("#contactusform").validate({
      rules: {
        name: "required",
        email: {
          required: true,
          email: true
        },
        phone: {
            required: false,
            digits: true,
            minlenght: 11
        }
      },
      messages: {
        name: "Please specify your name",
        email: {
            required: "We need your email address to contact you",
            email: "Email must be in the format of name@domain.com"
        },
        phone: {
            minlenght: "please insert a number of 11 digits",
            digits: "The value must be a number"
        }
      }
    });
});

我正在使用验证器插件和 jquery 脚本：

    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.min.js"></script>

此代码无法正常运行，我尝试了很多次，按钮似乎根本不起作用。如果在字段中没有任何值的情况下单击提交按钮，我需要在 reuided 字段下显示消息。

Answer 1

大功告成，只需将按钮类型更改为 submit。

<input id="submit" type="submit" class="btn send-button" value="SEND">

这里是 jsfiddle.

Answer 2

这里有两个问题：

将 type="button" 更改为 type="submit" 以使提交按钮正常工作。

<input id="submit" type="submit" class="btn send-button" value="SEND">

您在 rules 和 messages 选项中将 minlength 规则拼错为 minlenght。

phone: {
    // required: false,  // superfluous
    digits: true,
    minlength: 11
}

备注:

既然你已经包含了 additional-methods.js 文件，你可以只使用一个内置的 phone 数字规则相反。
- phoneUS
- phoneUK
- phonesUK
- phoneNL
- mobileNL
- mobileUK
您不需要明确地将 required 设置为 false。只需省略 required 规则就足够了。
您可以在自定义消息中使用占位符 {0}。然后邮件自动使用与规则相同的参数。
```
minlength: "please insert a number of {0} digits"
```

工作演示：http://jsfiddle.net/fbhacfy4/

jQuery 验证插件按钮不起作用，以及数字字段

jQuery Validate plugin button not working, and digits field

jquery

button

jquery-validate