2016-11-25 4 views
5

Ich habe mehrere Form wie folgt aus:Multiple Form dynamisches Feld Javascript Validierung

<?php for ($i = 0; $i > $n; $i++) { ?> // n is no. of value (no limit) 
    <form> 
     <input name="<?php echo $i; ?>venue" type="text"> 
     <input name="roster" type="text"> 
     <input type="submit" name="btn_venue"> 

    </form> 
<?php } ?> 
    <form> 
     <input name="hospitality" type="text"> 
     <input name="template" type="text"> 
     <input type="submit" name="btn_hospitality"> 
    </form> 
    ... 
    ... 
    <form> 
     <input name="element" type="text"> 
     <input name="alignment" type="text"> 
     <input type="submit" name="btn_xyz"> 
    </form> 

ich überprüfen möchten (Feld sollte nicht leer sein) in aller Form so, wie kann ich die Validierung verwenden?

ich jQuery Validierung versucht:

<script> 
    $('document').ready(function() { 
     $('form').each(function (key, form) { 
      $(form).validate({ 
       rules: { 
        hospitality: { 
         required: true 
        }, 
        //... 
        //... 
        alignment: { 
         required: true 
        } 
      }); 
     }); 
    }); 
</script> 

I statisches Namensfeld Validierung verwalten haben, aber ich weiß nicht Ahnung von dynamischem venue Namen validation.Can mir jemand helfen?

Wenn nur ein Formular die einfach zu verwalten, aber dynamisch mehrere Formular senden validieren, wie zu validieren.

zu einem Zeitpunkt nur ein Formular senden, aber bestimmte Formularfeld validieren, wie es möglich ist?

+1

Wie senden Sie das Formular ein? Sie haben keine Schaltflächen ...? –

+0

@StefanMichelangeloMihajlovic aktualisiert Code bitte überprüfen Sie es. –

+0

Fügen Sie in den Eingaben das Attribut "required" hinzu, Browser mit HTML5-Unterstützung validieren es automatisch. Wenn Sie benutzerdefinierte Fehlermeldung möchten, können Sie Parsley.js verwenden – rogeriolino

Antwort

2

Versuchen Sie es. Es durchläuft jedes Formular und für jeden von ihnen durch jede Eingabe (vom Typ Text) und erstellt eine erforderliche Regel für jeden von ihnen. Übergibt dann die dynamisch erstellten Regeln an die Validierungsfunktion.

$('document').ready(function() { 
    $('form').each(function (key, form) { 
     // build the rules object dynamically 
     var rules = {}; 
     // loop through each input in the form 
     $(form).find('input[type="text"]').each(function(idx, obj) { 
      // make a rule for this input 
      rules[obj.name] = {"required": true}; 
     }); 
     $(form).validate({ 
      "rules": rules 
     }); 
    }); 
}); 
1

Okey dies ist nicht sicher der sauberste Weg, dies zu tun, aber es ist die erste, die mir in den Sinn kommt. Zuerst editieren Sie Ihre HTML, so Formular hat id="form$i", Eingang hat id="input$i", und senden hat id="$i". Auch Klasse in dem class="validate"

<?php for ($i = 0; $i > $n; $i++) { ?> // n is no. of value (no limit) 
    <form id="form<?php echo $i; ?>">//so id="form2" for example 
     <input id="input<?php echo $i; ?>" name="<?php echo i; ?>venue" type="text">// id="input2" 
     <input name="roster" type="text"> 
     <input id="<?php echo $i; ?>" class="validate" type="submit" name="btn_venue">//id="2" 
    </form> 
<?php } ?> 

JQuery einreichen, die funktionieren soll, ich jede Zeile im Code erklären würde

<script> 
    $(function() { 
     $(".validate").click(function() { //this is call for each click button with class validate 
      var id = $(this).attr('id');//getting id of the clicked element which is $i 
      var formid = 'form' + id;//creating new var formid which will target formid (for example: in first loop $i=1, so id=1, and formid=form1) 
      var input = 'input' + id;//creating input which value will be input$i 
      $('#' + formid).on('submit', function (e) {//on form submit validate function 
       if ($(#input).value == '') { 
        return false; 
       } else { 
        return true; 
       } 
      }); 
     }); 
    }); 
</script> 

hoffen, dass Sie Logik verstehen, könnte es sein, ich Fehler irgendwo gemacht, so genau hinsieht ..