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

如果出现错误会有所帮助，但是没有错误。

是的，你确实有控制台错误。一个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。在这种情况下，空格也被视为特殊字符，因为它会破坏对象文字key对中的key:value。 （IMO，使用name属性中的空格非常在任何情况下都不常见。）

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

和...

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

DEMO：http://jsfiddle.net/ygokv3a7/

备注：

IMO，name属性中的特殊字符或空格不是一个好主意。

您还应该使用the official CDN links listed here，而不是从开发人员的虚拟主机中获取。

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

1 个答案: