jQuery验证插件未验证选择框

Question

我在让jquery.validation.js验证选择框时遇到问题。它正在处理文本输入，但不显示select的错误消息。如果我完成了文本输入的验证，它就会提交。有没有人看到我错过了什么？

<form name="consumerRegistration" id="consumerRegistration" action="" method="post">
    <label for="name" class="baseline-10">Full Name</label>
    <input type="text" name="name" id="name" class="required" placeholder="John Doe" min-length="2"/>
    <label for="email" class="baseline-10">Email</label>
    <input type="text" name="email" id="email" class="required email" placeholder="jdoe@yahoo.com"/>
    <label for="company" class="baseline-10">Company</label>
    <input type="text" name="company" id="company" placeholder="ie. Yahoo"/>
    <select name="country" id="country" class="required" required="required">
        <option selected="" val="" disabled="disabled">Country</option>
        <option val="United States">United States</option>
        <option val="Canada">Canada</option>
    </select>
    <a href="javascript:document.void(1);" title="Register" class="cta"><span>Register</span></a>

​

(function($){
if($('form#consumerRegistration').length){
    $('input').placeholder();
    $('form#consumerRegistration').find('a').on('click', function(e){
        e.preventDefault();
        if($('form#consumerRegistration').valid()){
            $('form#consumerRegistration').submit();
        } else {
            return false;
        }
    });
}
})(jQuery);

如果我在这个网站的其他地方错过了一个解决方案，我发誓我看起来很粗略。:)

该插件来自http://bassistance.de/jquery-plugins/jquery-plugin-validation/。

Answer 1

好吧，你的问题是你没有真正正确地使用jquery validate。你需要做的更像这样：

首先，在document.ready上设置验证，如果不这样做，它不会以任何其他方式验证表单：

$('form#consumerRegistration').validate(...//options here

接下来，为刚刚提交表单的a元素创建一个click事件(然后validate将执行它的操作)

$('form#consumerRegistration').find('a').on('click', function(e){
    $('form#consumerRegistration').submit();
});

最后，没有正确处理select的原因是没有正确指定它的属性。简单地说，对于您的选项，val不是正确的属性，value才是。因此，只需在所有选项中进行更改：

    <option selected="" value="" disabled="disabled">Country</option>
    <option value="United States">United States</option>
    <option value="Canada">Canada</option>

下面是它的工作原理：http://jsfiddle.net/ryleyb/TTpSB/

Answer 2

Jquery验证插件要求select的第一个选项为空以验证它们。例如:您的选择框应如下所示：

<select name="country" id="country" class="required">
        <option></option>
        <option val="United States">United States</option>
        <option val="Canada">Canada</option>
</select>