formulario - Cómo validar la matriz de entradas usando validate plugin jquery

validar formulario jquery validate

Question

Soy nuevo en el complemento de validación de jquery, pero me gustaría saber cómo validamos la matriz de cuadros de entrada utilizando el complemento de validación

A continuación se muestra el código 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>

y el código jquery está debajo

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

Pero cada vez que hago clic en enviar, está validando solo el primer valor. Resto todos los valores del mismo nombre no son validados. Por favor ayuda.

Answer 1

A veces necesitamos validar una matriz de elementos de entrada: por ejemplo,

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

Ahora usaremos el complemento de validación jquery jquery.validate.js para validar el formulario. La condición será que el usuario tendrá que elegir la categoría de cada menú desplegable. El script para validación será el siguiente:

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

Ahora el problema es que el jquery.validate.js readymade solo valida el primer elemento de la categoría []. Entonces, necesitamos modificarlo un poco.

En jquery.validate.js, podemos encontrar una función llamada checkForm, tenemos que modificarla de la siguiente manera:

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();
}

Acabo de recibir esta solución de http://www.codeboss.in/web-funda/2009/05/27/jquery-validation-for-array-of-input-elements/ espero que esto ayude a alguien ...

Answer 2

Aquí la solución sin dar indexación a matriz.

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

Código 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++;
});
});

Se puede ver aquí en js fiddle: https://jsfiddle.net/q0d76aqx/42/

Answer 3

Esta es la mejor solución que encontré y actualmente estoy usando en mi proyecto:

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

Answer 4

He utilizado la solución propuesta por AsgarAli Khanusiya pero JQuery.Validator muestra la etiqueta con el mensaje de error en los mismos casos en el lugar equivocado. Sucede porque almacena los mensajes mostrados anteriormente. Si el usuario comete el mismo error con un elemento diferente en la colección, el validador muestra la etiqueta en el lugar anterior en lugar de generar una nueva etiqueta cerca del elemento con el problema. He anulado el método ''errorsFor'' para resolver esto:

$.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);
    });
}

Answer 5

Necesitas hacer indexación de cada elemento.

A continuación se muestra el código 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>

y el código jquery está debajo

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

Answer 6

Noté que el complemento de validación de jQuery que utilizo solo detectará el primer elemento con un nombre específico.

Otra forma de hacer que el complemento de validación de jQuery también detecte todas las entradas más allá de la primera podría ser haciendo que los nombres sean únicos. Para que puedas reemplazar:

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

con:

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

Answer 7

Primero, para que jQuery distinga entre los elementos que necesita para tener un ID diferente por elemento. Esto se puede hacer mediante programación cuando se agregan las entradas. Entonces, lo que debe hacer es verificar todas las entradas con un nombre común a la vez. Para eso, cree un validador personalizado usando la función addMethod () como se describe en la documentación.

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; });
    });

Puedes usar esto como una regla en tus elementos de matriz:

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

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

Sin embargo, para que los errores aparezcan correctamente en los campos vacíos, es posible que deba anular la opción errorPlacement de validar ...

Answer 8

Puede pasar una opción para ignorar parte de un nombre de campo; En cuanto a los comentarios de las publicaciones originales, hay muchos casos de uso para tener un nombre de estilo [] en HTML, especialmente con PHP.

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

Answer 9

jQuery Form Validator es un complemento de jQuery multilingüe y rico en funciones que facilita la validación de la entrada del usuario mientras mantiene el marcado HTML limpio del código javascript. Aunque este complemento tiene una amplia gama de funciones de validación, está diseñado para requerir el menor tráfico de red jQuery posible. Esto se logra agrupando las funciones de validación en "módulos", lo que hace posible cargar solo las funciones que se necesitan para validar un formulario en particular.

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