Как проверить массив входов с помощью validate plugin jquery

Ответ 1

Иногда нам нужно проверить массив входных элементов: например -

<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 validation jquery.validate.js для проверки формы. Условием будет то, что пользователю придется выбирать категорию из каждого раскрывающегося списка. script для проверки будет ниже:

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

Теперь проблема в том, что readymade 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/ надеюсь, что это кому-то поможет.

Ответ 2

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

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

Ответ 3

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

Другой способ заставить плагин проверки jQuery также обнаруживать все входы, выходящие за пределы первого, может быть уникальным. Таким образом, вы можете заменить:

<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]" />

Ответ 4

Это лучшее решение, которое я нашел, и который я сейчас использую в своем проекте:

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

Ответ 5

Во-первых, для 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 из проверки...

Ответ 6

Вам нужно сделать индексацию каждого элемента

Ниже приведен код 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
        }
    },
});

Ответ 7

Здесь решение без указания индексации на массив.

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

Ответ 8

Я использовал решение, предложенное 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);
    });
}

Ответ 9

jQuery Form Validator - это многофункциональный и многоязычный плагин jQuery, который позволяет легко проверять ввод пользователя, сохраняя при этом вашу разметку HTML с javascript-кодом. Несмотря на то, что этот плагин обладает широким спектром функций проверки, он рассчитан на минимальный сетевой трафик jQuery. Это достигается путем группировки функций проверки в "модулях", что позволяет загружать только те функции, которые необходимы для проверки конкретной формы.

<form action="" id="registration-form">
  <p>
    E-mail
    <input name="email" data-validation="email">
  </p>
  <p>
    User name
    <input name="user" data-validation="length alphanumeric" 
         data-validation-length="3-12" 
         data-validation-error-msg="User name has to be an alphanumeric value (3-12 chars)">
  </p>
  <p>
    Password
    <input name="pass_confirmation" data-validation="strength" 
         data-validation-strength="2">
  </p>
  <p>
    Repeat password
    <input name="pass" data-validation="confirmation">
  </p>
  <p>
    Birth date
    <input name="birth" data-validation="birthdate" 
         data-validation-help="yyyy-mm-dd">
  </p>
  <p>
    Country
    <input name="country" id="country" data-validation="country">
  </p>
  <p>
    Profile image
    <input name="image" type="file" data-validation="mime size required" 
         data-validation-allowing="jpg, png" 
         data-validation-max-size="300kb" 
         data-validation-error-msg-required="No image selected">
  </p>
  <p>
    User Presentation (<span id="pres-max-length">100</span> characters left)
    <textarea name="presentation" id="presentation"></textarea>
  </p>
  <p>
    <input type="checkbox" data-validation="required" 
         data-validation-error-msg="You have to agree to our terms">
    I agree to the <a href="..." target="_blank">terms of service</a>
  </p>
  <p>
    <input type="submit" value="Validate">
    <input type="reset" value="Reset form">
  </p>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script>

  $.validate({
    modules : 'location, date, security, file',
    onModulesLoaded : function() {
      $('#country').suggestCountry();
    }
  });

  // Restrict presentation length
  $('#presentation').restrictLength( $('#pres-max-length') );

</script>
...