javascript - bassistance jQuery 验证抛出错误

Question

使用 bassistance.de 的 jQuery 验证插件，验证并不总是有效，尤其是当最初验证的输入已删除其值时。

表单将通过缺少输入的验证测试，并且在 JS 控制台中也会看到以下错误。

错误

jQuery 库

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>

表格

<form id="payment-form" class="payment-form" method="POST" action="/checkout-process">
    <fieldset>
        <legend>Customer Info</legend>
        <label>Full Name</label>
        <input type="text" name="first_name" placeholder="First Name">
        <input type="text" name="last_name" placeholder="Last Name">
        <label>Email</label>
        <input type="text" name="email" placeholder="me@email.com">
        <label>Phone</label>
        <input type="text" name="phone" placeholder="Phone">
    </fieldset>
</form>

JS

$(function($) {

    // Validation
    $('#payment-form').validate({
        rules: {
            first_name: "required",
            last_name: "required",
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true,
                phone: true
            }
        },

        errorClass: 'alert alert-error'
    });

});

Answer 1

问题出在规则 phone 上，没有名为 phone 的验证方法。

如果您包含 additional-methods.js , 然后你可以有像 phoneUS, phoneUK, mobileUK, phoneNL 等电话验证规则

例如:

$(function($) {

    // Validation
    $('#payment-form').validate({
        rules: {
            first_name: "required",
            last_name: "required",
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true,
                phoneUS: true
            }
        },

        errorClass: 'alert alert-error'
    });

});

如果这些都不符合您的要求，那么您可能必须编写自定义规则