2

選択リストでjQuery Validationを使用する方法のサンプルをたくさん見てきました.1つを実装しようとしていますが、機能していません. 私は一般的にプラグインに本当に慣れていないので、自分が間違っていることに完全に困惑しています。

意図した動作は、ユーザーが選択メニューを「デフォルト」のままにしているかどうかを検証しないことです。彼らは選択をしなければなりません。

まず、新しいバリデータ メソッドを配線します。

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>​

そして、それは検証を拒否するだけです。ここにもフィドルへのリンクがあります：

jsフィドル

4

3 に答える 3

2

ASP.NETMVCを使用していることを伝えておく必要があります。それは役に立ちませんが、人々はカスタム属性名について尋ねるのをやめます。

値のデフォルトと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.NETMVC属性のないバージョンです。

<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();
        }
    });
});
于 2012-12-29T12:44:26.750 に答える
1

The simple way is to use value='' in the default option, and specify that the select is required:

<select id="select_list" class="required">
于 2012-12-29T04:18:33.783 に答える
0

したがって、Barmar による回答は部分的に正しいですが、十分に説明されていません。

この更新されたフィドルを機能させるために行った変更：

select 要素自体にname="select_list"を追加して、探したいものを jquery.validate に与えました。

JavaScript 検証呼び出しを変更しました。

$("#form1").validate({
  rules: {
    select_list: {
      required: true,
      number: true
    }
  },
 submitHandler: function(form) {
   alert($('#form1').valid());
   form.submit();
 }
});
于 2012-12-29T04:47:52.373 に答える