it-roy-ru.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
            }
        },
    });

Но каждый раз, когда я нажимаю «Отправить», он проверяет только первое значение. остальные все значения с одинаковыми именами не проверены. Пожалуйста помоги.

22
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 проверяет только первый элемент категории []. Итак, нам нужно немного его изменить.

В 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/ надеюсь, что это кому-то поможет ..

36
Amit

Вы можете передать опцию, чтобы игнорировать часть имени поля; Что касается исходных комментариев к постам, существует множество вариантов использования имени стиля [] в HTML, особенно с использованием PHP.

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

Я заметил, что плагин проверки jQuery, который я использую, обнаружит только первый элемент с определенным именем.

Другой способ заставить плагин 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]" />
8
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 различал элементы, вы должны иметь разные идентификаторы для каждого элемента. Это может быть сделано программно, когда вы добавляете входные данные . Тогда вам нужно проверить сразу все входные данные с общим именем. Для этого создайте пользовательский валидатор, используя функцию 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
         }
});

Чтобы ошибки правильно отображались в пустых полях, возможно, вам придется переопределить опцию errorPlacement из validate ...

2
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
        }
    },
});
2
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 fiddle: 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