的Javascript

Question

我已经看到大量关于如何在选择列表中使用jQuery Validation的示例 - 我正在尝试实现一个，但它只是对我不起作用。我对这个插件一般都很陌生，我对我做错了什么感到非常困惑。

预期的行为是它不应验证用户是否已将选择菜单保留为“默认”。他们必须做出选择。

我首先接线新的验证方法。

的Javascript

(function($) {
    $.validator.addMethod('mustbe', function(value, element, params) {
        var testValue = params['propertyvalue'];
        var condition = params['condition'];
        if ((condition == '0') && (value != testValue)) return true;
        if ((condition == '1') && (value == testValue)) return true;
        return false;
    });
})(jQuery);

$(document).ready(function() {
    $("#form1").validate();

    $('#form1').submit(function() {
        alert($('#form1').valid());
    });
});

然后我通过将元数据添加到实际HTML来进行跟进。

HTML

<form id="form1" action="">
<select id="select_list" data-val="true"
        data-val-mustbe="You must select a value"
        data-val-mustbe-condition="0"
        data-val-mustbe-propertyvalue="default"
        data-val-required="You must select a value" >
        <option value="default">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
</select>
<input type="submit" id="submit" value="Submit" />
</form>

它只是拒绝验证。这也是一个小提琴的链接：

jsFiddle

Answer 1

简单的方法是在默认选项中使用value=''，并指定需要select：

<select id="select_list" class="required">

Answer 2

您应该已经告诉过您正在使用ASP.NET MVC。它没有用，但人们会停止询问自定义属性名称。

我重新设计了代码以使用value default和data-val属性。这是一个代码示例：

$(document).ready(function() {    
    $.validator.addMethod("valueNotEquals", function(value, element, arg){
        return arg != value;
    }, "");

    $("#form1").validate({
        rules: {
            select_list : {valueNotEquals: $('#select_list').attr('data-val-mustbe-propertyvalue')},  
        },
        messages: {  
            select_list : { valueNotEquals: $('#select_list').attr('data-val-required') }
        },        
        submitHandler: function(form) {
            alert($('#form1').valid());
            form.submit();
        }
    });
});

编辑：

这是一个jsFiddle示例：http://jsfiddle.net/Gajotres/ekPpS/

这是一个没有ASP.NET MVC属性的版本：

<form id="form1" action="">
    <select id="select_list" name="select_list">
            <option value="default">Choose...</option>
            <option value="1">1</option>
            <option value="2">2</option>
    </select>
    <input type="submit" id="submit" value="Submit" />
</form>

$(document).ready(function() {    
    $.validator.addMethod("valueNotEquals", function(value, element, arg){
        return arg != value;
    }, "");

    $("#form1").validate({
        rules: {
            select_list : {valueNotEquals: "default"},  
        },
        messages: {  
            select_list : { valueNotEquals: "You must select a value" }
        },        
        submitHandler: function(form) {
            alert($('#form1').valid());
            form.submit();
        }
    });
});

Answer 3

所以巴马尔的答案部分正确，但没有得到很好的解释。

我为让this updated fiddle工作所做的更改：

将 name =“select_list”添加到select元素本身，以便为jquery.validate提供它想要查找的内容

修改了javascript验证通话：

$("#form1").validate({
  rules: {
    select_list: {
      required: true,
      number: true
    }
  },
 submitHandler: function(form) {
   alert($('#form1').valid());
   form.submit();
 }
});

jQuery的问题在选择列表上验证

的Javascript

HTML

jsFiddle

3 个答案: