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 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>

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

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">

您已在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/

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

2 个答案: