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

Question

我有一个简单的插件，jquery验证插件有很多问题：我需要设置一个包含3个字段的表单，名称（必填）电子邮件（必填，电子邮件格式），电话（不需要，数字格式为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 [email protected]"
        },
        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>

这段代码不能正常工作，我尝试了很多次，按钮似乎根本不起作用。如果单击提交按钮而在字段中没有任何值，我需要在重新生成的字段下显示消息。

Answer 1

这里有两个问题：

1. 将type="button"更改为type="submit"以使提交按钮正常工作。 <input id="submit" type="submit" class="btn send-button" value="SEND">
2. 你在minlength和minlenght选项中错误地将rules规则拼错为messages。

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

笔记：

• 由于您已经包含了additional-methods.js文件，因此您可以使用其中一个内置电话号码规则。 phoneUS phoneUK phonesUK phoneNL mobileNL mobileUK
• 您无需将required明确设置为false。简单地省略required规则就足够了。
• 您可以在自定义消息中使用占位符{0}。然后，该消息将自动使用与规则相同的参数。 minlength: "please insert a number of {0} digits"

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

Answer 2

你几乎就在那里，你只需要将按钮的类型更改为submit。

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

这是jsfiddle。