jQuery Validate插件按钮不起作用，并且数字字段 [英] jQuery Validate plugin button not working, and digits field

问题描述

我有一个简单的插件，jquery验证插件有很多问题: 我需要设置一个包含3个字段的表单，名称(必填)，电子邮件(必填，电子邮件格式)，电话(不需要)，11位数字格式.

I've a lot of problem with a simple plugin, jquery validation plugin: I need to set a form with 3 fields, the name (required) the email (required, email format), the phone (not required, number format of 11 digits).

这是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 [e-mail]"
        },
        phone: {
            minlenght: "please insert a number of 11 digits",
            digits: "The value must be a number"
        }
      }
    });
});

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

I'm using the validator plugin and jquery scripts:

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

此代码无法正常工作，我尝试了很多次，并且按钮似乎根本无法工作.如果单击提交按钮，但在字段中没有任何值，则需要在重新填写的字段下显示消息.

This code not work properly, I try many times, and the button doesn't seems to work at all. I need to show message under the reuided fields if submit button is clicked without any value in the fields.

推荐答案

此处有两个问题:

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

1. Change type="button" into type="submit" to get the submit button working.

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

在rules和messages选项中，您已经将minlength规则拼写为minlenght.

You've misspelled the minlength rule as minlenght both within your rules and messages options.

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

注释:

• 由于包含了additional-methods.js文件，因此可以仅使用内置电话号码规则之一.

• Since you've included the additional-methods.js file, you could just used one of the built-in phone number rules instead.

• phoneUS
• phoneUK
• phonesUK
• phoneNL
• mobileNL
• mobileUK

• phoneUS
• phoneUK
• phonesUK
• phoneNL
• mobileNL
• mobileUK

您无需将required显式设置为false.只需省略required规则就足够了.

You do not need to explicitly set required to false. Simply leaving out the required rule is enough.

您将在自定义消息中使用占位符{0}.然后，消息将自动使用与规则相同的参数.

You would use the placeholder, {0}, within your custom message. Then the message automatically uses the same parameter as the rule.

minlength: "please insert a number of {0} digits"

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

Working DEMO: http://jsfiddle.net/fbhacfy4/

这篇关于jQuery Validate插件按钮不起作用，并且数字字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！