web-dev-qa-db-ja.com

名前値の代わりにクラスを使用したjQuery検証

Jquery validateプラグインを使用してフォームを検証したいのですが、html内で 'name'値を使用できません-これはサーバーアプリでも使用されるフィールドであるためです。具体的には、グループからチェックされるチェックボックスの数を制限する必要があります。 （最大3）私が見たすべての例では、各要素のname属性を使用しています。私がやりたいのは、代わりにクラスを使用し、そのためのルールを宣言することです。

html

これは動作します：

<input class="checkBox" type="checkbox" id="i0000zxthy" name="salutation"  value="1" />

これは機能しませんが、私が目指しているものです：

<input class="checkBox" type="checkbox" id="i0000zxthy" name="i0000zxthy"  value="1" />

javascript：

var validator = $(".formToValidate").validate({    
    rules:{     
    "salutation":{  
             required:true,  
        },  
        "checkBox":{  
             required:true,  
          minlength:3  }  
   }   
});

これを行うことは可能ですか？ルールオプション内の名前の代わりにクラスをターゲットにする方法はありますか？または、カスタムメソッドを追加する必要がありますか？

乾杯、マット

javascriptjqueryhtmlcssjquery-validate
55
Matt

.rules("add", options) を使用して、そのセレクターに基づいてルールを追加し、検証オプションからクラスに基づいたルールを削除し、$(".formToValidate").validate({... });を呼び出した後、これを行う：

$(".checkBox").rules("add", { 
  required:true,  
  minlength:3
});
81
Nick Craver

別の方法として、addClassRulesを使用します。セレクターと.rulesを使用するオプションはより一般的な方法ですが、クラス固有のものです。

電話する前に

$(form).validate()

次のように使用します。

jQuery.validator.addClassRules('myClassName', {
        required: true /*,
        other rules */
    });

参照： http://docs.jquery.com/Plugins/Validation/Validator/addClassRules#namerules

私はこのような場合にこの構文を好みます。

33
Ricardo Silva

これは古い質問です。しかし、私も最近同じものを必要としており、この質問はstackoverflow +このブログからの別の回答から得ました。ブログにあった答えは、この種の検証に特に焦点を当てているため、より簡単でした。方法は次のとおりです。

$.validator.addClassRules("price", {
     required: true,
     minlength: 2
});

このメソッドでは、この呼び出しの上にメソッドを検証する必要はありません。

これが将来誰かにも役立つことを願っています。ソース ここ 。

11
Nimeshka Srimal

JQueryを使用したソリューションは次のとおりです。

    $().ready(function () {
        $(".formToValidate").validate();
        $(".checkBox").each(function (item) {
            $(this).rules("add", {
                required: true,
                minlength:3
            });
        });
    });
6
Ajay Sharma

私のソリューションは次のとおりです（jQueryは不要で、JavaScriptのみが必要です）。

function argsToArray(args) {
  var r = []; for (var i = 0; i < args.length; i++)
    r.Push(args[i]);
  return r;
}
function bind() {
  var initArgs = argsToArray(arguments);
  var fx =        initArgs.shift();
  var tObj =      initArgs.shift();
  var args =      initArgs;
  return function() {
    return fx.apply(tObj, args.concat(argsToArray(arguments)));
  };
}
var salutation = argsToArray(document.getElementsByClassName('salutation'));
salutation.forEach(function(checkbox) {
  checkbox.addEventListener('change', bind(function(checkbox, salutation) {
    var numChecked = salutation.filter(function(checkbox) { return checkbox.checked; }).length;
    if (numChecked >= 4)
      checkbox.checked = false;
  }, null, checkbox, salutation), false);
});

これを<body>の最後のスクリプトブロックに入れると、スニペットは魔法をかけ、チェックインするチェックボックスの数を最大3つ（または指定した任意の数）に制限します。

ここでは、テストページを提供します（ファイルに貼り付けて試してみます）。

<!DOCTYPE html><html><body>
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<script>
    function argsToArray(args) {
      var r = []; for (var i = 0; i < args.length; i++)
        r.Push(args[i]);
      return r;
    }
    function bind() {
      var initArgs = argsToArray(arguments);
      var fx =        initArgs.shift();
      var tObj =      initArgs.shift();
      var args =      initArgs;
      return function() {
        return fx.apply(tObj, args.concat(argsToArray(arguments)));
      };
    }
    var salutation = argsToArray(document.getElementsByClassName('salutation'));
    salutation.forEach(function(checkbox) {
      checkbox.addEventListener('change', bind(function(checkbox, salutation) {
        var numChecked = salutation.filter(function(checkbox) { return checkbox.checked; }).length;
        if (numChecked >= 3)
          checkbox.checked = false;
      }, null, checkbox, salutation), false);
    });
</script></body></html>
2
Delan Azabani

カスタムメソッドを追加したい場合は、それを行うことができます

（この場合、少なくとも1つのチェックボックスが選択されています）

<input class="checkBox" type="checkbox" id="i0000zxthy" name="i0000zxthy"  value="1" onclick="test($(this))"/>

javascriptで

var tags = 0;

$(document).ready(function() {   

    $.validator.addMethod('arrayminimo', function(value) {
        return tags > 0
    }, 'Selezionare almeno un Opzione');

    $.validator.addClassRules('check_secondario', {
        arrayminimo: true,

    });

    validaFormRichiesta();
});

function validaFormRichiesta() {
    $("#form").validate({
        ......
    });
}

function test(n) {
    if (n.prop("checked")) {
        tags++;
    } else {
        tags--;
    }
}
1
Barno

私にとっては、ページの読み込み時に作成される要素と、ユーザーによって動的に追加される要素があります。これを使用して、すべてが乾燥したままであることを確認しました。

送信時に、クラスxですべてを見つけ、クラスxを削除し、ルールxを追加します。

$('#form').on('submit', function(e) {
    $('.alphanumeric_dash').each(function() {
        var $this = $(this);
        $this.removeClass('alphanumeric_dash');
        $(this).rules('add', {
            alphanumeric_dash: true
        });
    });
});
1
Farzher