web-dev-qa-db-ja.com

検証プラグインjqueryを使用して入力の配列を検証する方法

Jquery検証プラグインは初めてですが、検証プラグインを使用して入力ボックスの配列を検証する方法を知りたいです。

以下はhtmlコードです。

<form id="transport-form">
  <input type="text" name="qty[]" id="qty1">
  <input type="text" name="qty[]" id="qty2" >
  <input type="text" name="qty[]" id="qty3">
  <input type="text" name="qty[]" id="qty4">
  <input type="submit value="submit">
</form>

jqueryコードは以下です

jQuery("#transport-form").validate({
        rules: {
            'qty[]': {
                required: true
            }
        },
    });

ただし、[送信]をクリックするたびに、最初の値のみが検証されます。同じ名前のすべての値は検証されません。助けてください。

jqueryjquery-validate
28
Amit

入力要素の配列を検証する必要がある場合があります。たとえば–

<form name="signupForm" class="cmxform" id="signupForm" method="get" action="">
    <select name="category[]" id="cat_1">
    <option value="">Select One</option>
    <option value="1">aa</option>
    <option value="2">bb</option>
    <option value="3">cc</option>
    <option value="4">dd</option>
    </select>

    <select name="category[]" id="cat_2">
    <option value="">Select One</option>
    <option value="5">ee</option>
    <option value="6">ff</option>
    <option value="7">gg</option>
    <option value="8">hh</option>
    </select>

    <select name="category[]" id="cat_3">
    <option value="">Select One</option>
    <option value="9">ii</option>
    <option value="10">jj</option>
    <option value="11">kk</option>
    <option value="12">ll</option>
    </select>

    <input class="submit" type="submit" value="Submit">
    </form>

ここで、フォームの検証にjquery検証プラグインjquery.validate.jsを使用します。条件は、ユーザーが各ドロップダウンからカテゴリを選択する必要があることです。検証用のスクリプトは次のようになります-

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    // validate the comment form when it is submitted
    $("#signupForm").validate({
        rules: {
            "category[]": "required"
        },
        messages: {
            "category[]": "Please select category",
        }
    });
});
</script>

問題は、既製のjquery.validate.jsがcategory []の最初の要素のみを検証することです。そのため、少し変更する必要があります。

Jquery.validate.jsで、checkFormという名前の関数を見つけることができます。以下のように変更する必要があります。

checkForm: function() {
    this.prepareForm();
    for (var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++) {
        if (this.findByName(elements[i].name).length != undefined && this.findByName(elements[i].name).length > 1) {
            for (var cnt = 0; cnt < this.findByName(elements[i].name).length; cnt++) {
                this.check(this.findByName(elements[i].name)[cnt]);
            }
        } else {
            this.check(elements[i]);
        }
    }
    return this.valid();
}

このソリューションは http://www.codeboss.in/web-funda/2009/05/27/jquery-validation-for-array-of-input-elements/ から得たばかりです誰か..

42
Amit

フィールド名の一部を無視するオプションを渡すことができます。元の投稿のコメントに関しては、特にPHPを使用して、HTMLでname []スタイル名を持つための多くのユースケースがあります。

$("#my-form").validate({
  submitHandler: function(form) {
    form.submit();
  },
  ignore: [],
  rules: {
    'category[]': {
      required: true
    }
  }
});
17
Christo

私が使用するjQuery validateプラグインは、特定の名前を持つ最初の要素のみを検出することに気付きました。

JQuery validateプラグインに、最初のもの以外のすべての入力も検出させる別の方法は、名前を一意にすることです。だからあなたは交換することができます：

<input type="text" name="qty[]" />
<input type="text" name="qty[]" />
<input type="text" name="qty[]" />
<input type="text" name="qty[]" />

で：

<input type="text" name="qty[0]" />
<input type="text" name="qty[1]" />
<input type="text" name="qty[2]" />
<input type="text" name="qty[3]" />
9
Quinten

これは私が見つけた最高のソリューションであり、現在私のプロジェクトで使用しています：

// Adding rule to each item in qtyi list 
jQuery('[id^=qty]').each(function(e) {
    jQuery(this).rules('add', {
        minlength: 2,
        required: true
    });
});
7
Chris Sim

まず、jQueryで要素を区別するには、要素ごとに異なるIDが必要です。これは、入力を追加するときにプログラムで実行できます。次に、行う必要があるのは、共通名を持つすべての入力を一度に検証することです。そのためには、 ドキュメントで の説明に従ってaddMethod（）関数を使用してカスタムバリデーターを作成します

jQuery.validator.addMethod("allRequired", function(value, elem){
        // Use the name to get all the inputs and verify them
        var name = elem.name;
        return  $('input[name="'+name+'"]').map(function(i,obj){return $(obj).val();}).get().every(function(v){ return v; });
    });

これを配列要素のルールとして使用できます。

$('form').validate(
        {
         rules: { 
               "nbPieces[]": "allRequired"
         },

         submitHandler : function(form, event) {
              event.preventDefault();   
              //... etc
         }
});

ただし、空のフィールドにエラーが正しく表示されるようにするには、validateからerrorPlacementオプションをオーバーライドする必要があります。

3
Eva M

各要素のインデックスを作成する必要があります

以下はhtmlコードです。

<form id="transport-form">
  <input type="text" name="qty[0]" id="qty1">
  <input type="text" name="qty[1]" id="qty2" >
  <input type="text" name="qty[2]" id="qty3">
  <input type="text" name="qty[3]" id="qty4">
  <input type="submit value="submit">
</form>

jqueryコードは以下です

jQuery("#transport-form").validate({
    rules: {
        'qty[]': {
            required: true
        }
    },
});
3
Ajay Patidar

ここでは、配列にインデックスを付けないソリューション。

<form>
    <div>Name:
       <p>
        <input name="name_ct[]" id="id_ct0" type="text" class="form-control" placeholder="Add Variant 1 Name">
        </p>
    </div>
    <input type="button" value="Add Variant" />
    <input type="submit" />
</form>

jsコード

$(document).ready(function () {
 $.validator.addMethod("mytst", function (value, element) {
        var flag = true;

      $("[name^=name_ct]").each(function (i, j) {
                        $(this).parent('p').find('label.error').remove();
$(this).parent('p').find('label.error').remove();                        
                        if ($.trim($(this).val()) == '') {
                            flag = false;

                            $(this).parent('p').append('<label  id="id_ct'+i+'-error" class="error">This field is required.</label>');
                        }
                    });


                    return flag;


    }, "");
$("form").validate({

    ignore: '',
    rules: {
        "name_ct[]": {
            mytst:true
        }
    },
    submitHandler: function () {
        //you can add code here to recombine the variants into one value if you like, before doing a $.post
         form.submit();
        alert('successful submit');
        return false;
    }
});

var j = 1;
$('input[type="button"]').click(function () {
    $('form div').append('<p><input name="name_ct[]" id="id_ct' + j + '" type="text" class="form-control" placeholder="Add Variant ' + j + ' Name " ></p>');

    j++;
});
});

あなたはここでjsフィドルで見ることができます： https://jsfiddle.net/q0d76aqx/42/

1
shankit

AsgarAli Khanusiyaによって提案されたソリューションを使用しましたが、JQuery.Validatorは同じケースで間違った場所にエラーメッセージ付きのラベルを表示します。以前に表示されたメッセージを保存するために発生します。ユーザーがコレクション内の別のアイテムで同じ間違いを犯した場合、バリデーターは問題のある要素の近くに新しいラベルを生成する代わりに、前の場所にラベルを表示します。これを解決するために 'errorsFor'メソッドをオーバーライドしました：

$.validator.prototype.errorsFor = function (element) {
    var name = this.idOrName(element);
    var elementParent = element.parentElement;
    return this.errors().filter(function() {
        return $(this).attr('for') == name && $(this).parent().is(elementParent);
    });
}
0
Pavel