web-dev-qa-db-ger.com

Wie man ein Array von Eingaben mit validate plugin jquery validiert

Ich bin neu in jquery validation plugin, aber ich würde gerne wissen, wie wir ein Array von Eingabefeldern mithilfe von validation plugin validieren können.

Unten ist HTML-Code.

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

und jquery code ist unten

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

Jedes Mal, wenn ich auf "Senden" klicke, wird nur der erste Wert bestätigt. Alle Werte desselben Namens werden nicht überprüft. Bitte helfen.

22
Amit

Manchmal müssen wir ein Array von Eingabeelementen validieren: Zum Beispiel -

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

Jetzt verwenden wir das Jquery-Validierungs-Plugin jquery.validate.js zur Validierung des Formulars. Die Bedingung ist, dass der Benutzer aus jedem Dropdown eine Kategorie auswählen muss. Das Skript zur Validierung wird wie folgt aussehen:

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

Das Problem ist nun, dass die readymade-Datei jquery.validate.js nur das erste Element der Kategorie [] validiert. Wir müssen es also ein wenig ändern.

In jquery.validate.js finden wir eine Funktion namens checkForm, die wir wie folgt ändern müssen:

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

Ich habe diese Lösung gerade von http://www.codeboss.in/web-funda/2009/05/27/jquery-validation-for-array-of-input-elements/ erhalten. Ich hoffe, das hilft jemandem ..

36
Amit

Sie können eine Option übergeben, um einen Teil eines Feldnamens zu ignorieren. In Bezug auf die Kommentare der Originalbeiträge gibt es viele Anwendungsfälle für die Benennung eines name [] - Stils in HTML, insbesondere mit PHP.

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

Ich habe festgestellt, dass das von mir verwendete jQuery-Validierungs-Plugin nur das erste Element mit einem bestimmten Namen erkennt.

Eine andere Möglichkeit, das jQuery-Validierungs-Plugin dazu zu bringen, alle Eingaben nach der ersten zu erkennen, könnte darin bestehen, die Namen eindeutig zu machen. Sie könnten also ersetzen:

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

mit:

<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

Dies ist die beste Lösung, die ich gefunden habe und die ich derzeit in meinem Projekt verwende:

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

Damit jQuery zwischen den Elementen unterscheiden kann, müssen Sie für jedes Element eine andere ID angeben. Dies kann programmgesteuert erfolgen, wenn Sie die Eingaben hinzufügen .. Dann müssen Sie alle Eingaben mit gemeinsamem Namen gleichzeitig überprüfen. Erstellen Sie dazu einen benutzerdefinierten Validator mit der Funktion addMethod () wie in in der Dokumentation beschrieben

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

Sie können dies als Regel für Ihre Array-Elemente verwenden:

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

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

Damit die Fehler in den leeren Feldern richtig angezeigt werden, müssen Sie möglicherweise die Option errorPlacement von validate überschreiben.

2
Eva M

Sie müssen die Indizierung der einzelnen Elemente vornehmen 

Unten ist HTML-Code.

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

und jquery code ist unten

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

Hier die Lösung, ohne Array zu indizieren.

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

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

sie können hier in js Fiddle sehen: https://jsfiddle.net/q0d76aqx/42/

1
shankit

Ich habe eine von AsgarAli Khanusiya vorgeschlagene Lösung verwendet, aber JQuery.Validator zeigt das Etikett mit der Fehlermeldung in denselben Fällen an der falschen Stelle. Dies geschieht, weil zuvor angezeigte Nachrichten gespeichert werden. Wenn der Benutzer denselben Fehler mit einem anderen Element in der Sammlung macht, zeigt der Prüfer das Label an der vorherigen Stelle an, anstatt ein neues Label in der Nähe des Elements mit Ausgabe zu generieren. Ich habe die "errorsFor" -Methode überschrieben, um dieses Problem zu lösen:

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