jQuery 验证不工作 - 没有错误？

Question

我正在尝试验证网站上的捐赠表格。我在网上找到了几个验证示例并将其实现到表单中，但没有任何反应，也没有产生任何错误。

这是我所有的代码（jquery 也被拉入页面）：

<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>

HTML:

<form id="donateForm" method="post">
    <div class="row">
    <div class="col-sm-12">
    <p><strong>Make your donation in memory, honour or in celebration of someone:</strong></p>

    <div class="showhideradios">
       <input name="In Honor/Memory Of" type="radio" value="No"> <label>No Thanks</label><br>
       <input id="others" name="In Honor/Memory Of" type="radio" value="In Memory"> <label>In Memory</label><br>
       <input id="noticeweeks" name="In Memory Note" style="display: none;" type="text" value=""> <input id="others1" name="In Honor/Memory Of" type="radio" value="In Celebration"> <label>In Celebration</label><br>
       <input id="noticeweeks1" name="In Celebration Note" style="display: none;" type="text" value=""></div>


    <input id="others2" name="radio2" type="checkbox" value="Attach A Meessage"> <label>Attach a message:</label> <!-- extra input, just hidden -->           <textarea id="noticeweeks2" name="Attached Message" style="display: none;" type="text" value=""></textarea></div>

    <hr>
    <div class="col-md-6">
       <label>Name:</label><input name="Name" required="" type="text" value=""> 
       <label>Email:</label><input name="Email" required="" type="text" value=""> 
       <label>City:</label><input name="City" required="" type="text" value=""> 
       <label>Postal Code:</label> <input name="Postal Code" required="" type="text" value="">
    </div>

    <div class="col-md-6"> 
       <label>Phone #:</label> <input name="Phone" required="" type="text" value=""> 
       <label>Street and Apt #:</label> <input name="Street and Apt #" required="" type="text" value=""> 
       <label>Province :</label> <input name="Province" required="" type="text" value=""> 
       <label>Amount (Canadian Dollars):</label> <input name="Amount" required="" type="text" value=""> 
    </div>
    </div>

    <div class="row">
    <div class="col-md-12"><input name="terms" required="" type="checkbox">
    <p>I agree to the <a href="/donations/" target="_blank">Terms of Service</a></p>
    <input name="submit" type="submit" value="Submit"></div>
    </div>
    </form>

验证码：

<script>
    jQuery.validator.addMethod("cdnPostal", function(postal, element) {
    return this.optional(element) || 
    postal.match(/[a-zA-Z][0-9][a-zA-Z](-| |)[0-9][a-zA-Z][0-9]/);
}, "Please specify a valid postal code.");
    jQuery(function ($) {
    $('#donateForm').validate({
        rules: {
            Name: {
                required: true,
                minlength: 2,
                lettersonly: true
            },
            Email: {
                required: true,
                email: true
            },
            City: {
                required: true
            },
            Postal Code: {
                required: true,
                cdnPostal: true
            },
            Phone: {
                required: true,
                phoneUS: true
            },
            Street and Apt #: {
                required: true
            },
            Province: {
                required: true,
                maxlength: 24
            },
            Amount: {
                required: true
            }
        },
        messages: {
            Name: {
                required: "Please enter your name",
                minlength: "Name should be more than 2 characters",
                maxlength: "Name should be less than 20 characters",
                lettersonly: "Name should contain only letters"
            },
            Email: {
                required: "Please enter a valid email address"
            },
            City: {
                required: "Please enter a city"
            },
            Postal Code: {
                required: "Please enter a valid postal code"
            },
            Phone: {
                required: "Please enter a valid phone number"
            },
            Street and Apt #: {
                required: "Please enter your address"
            },
            Province: {
                required: "Please enter a province"
            },
            Amount: {
                required: "Please enter a Donation Amount"
            }
        },
    });
});
</script>

我错过了什么？如果有错误会很有帮助，可惜没有。

谢谢！

Answer 1

It would be helpful if there were errors but alas there are not.

是的，您确实遇到了控制台错误。一个 JavaScript 错误表明 : 应该在 Postal.

之后

Postal Code: {
    required: true,
    cdnPostal: true
},

Street之后...

Street and Apt #: {
    required: true
},

你必须enclose those particular names in quotes because they contain special characters。在这种情况下，space 也被认为是一个特殊字符，因为它打破了对象文字的 key:value 对中的 key。 （IMO，在 name 属性中使用 space 在任何情况下都是非常不寻常。）

"Postal Code": {
    required: true,
    cdnPostal: true
},

和...

"Street and Apt #": {
    required: true
},

演示：http://jsfiddle.net/ygokv3a7/

备注：

IMO，name 属性中的特殊字符或 spaces 不是一个好主意。
您还应该使用 the official CDN links listed here，而不是从开发人员的虚拟主机中吸取资金。

jQuery 验证不工作 - 没有错误？

jQuery Validate not working - no errors?

html

jquery

jquery-validate