Wie validiert man dynamisch generierte Formular mit Bootstrap Tabs in jquery

Question

In meinem Projekt erzeuge ich dynamisch ein HTML-Formular mit jQuery. Hier besteht die Seite aus fünf Registerkarten mit jeweils separaten Schaltflächen für die vorherige und die nächste Schaltfläche. Die Registerkarte wurde mit Bootstrap entworfen. Kann jemand bitte die einfachste Methode vorschlagen, um diese Seite zu validieren. Wenn ich zum Beispiel auf die Schaltfläche "Weiter" auf der ersten Registerkarte klicke, sollten Felder nur in der ersten Registerkarte validiert werden. Bitte helfen Sie mir, dieses Problem zu lösen. Vielen Dank im Voraus.

Hier ist meine ganze Code:

HTML-Code:

<ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#name" id="id-name">name</a></li> 
    <li><a data-toggle="tab" href="#address" id="id-address">address</a></li> 
</ul> 

<form class="form-horizontal" id="id-fn-employee" method="POST" enctype="multipart/form-data" action="${pageContext.request.contextPath}/employee/saveMe"> 
    <div class="tab-content"> 
     <div id="name" class="tab-pane fade in active" style="height:auto;overflow: hidden;"> 
     <span id ="name1"></span> 
      <div class="form-group"> 
       <label class="col-sm-3 control-label">First Name<a style="color: red">*</a> 
        <p style="font-size: 75%;" class="help-block">First Name</p> 
       </label> 
       <div class="col-xs-4"> 
        <input type="text" placeholder="First Name" required="true" id="id-firstNmae" name="firstNmae" class="form-control"> 
        <p style="font-size: 75%;" class="help-block"></p> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-sm-3 control-label">Last Name<a style="color: red">*</a> 
        <p style="font-size: 75%;" class="help-block">Last Name</p> 
       </label> 
       <div class="col-xs-4"> 
        <input type="text" placeholder="Last Name" required="true" id="id-lastName" name="lastName" class="form-control"> 
        <p style="font-size: 75%;" class="help-block"></p> 
       </div> 
      </div> 
      <ul class="pager"> 
       <li><a href="javascript:void(0);" id="id-cancel">Cancel</a></li> 
       <li><a href="javascript:showTab('address');" id="id-name-next">Next</a></li> 
      </ul> 
     </div> 
     <div id="address" class="tab-pane fade" style="height:auto;overflow: hidden;"> 
     <span id ="address1"></span> 
      <div class="form-group"> 
       <label class="col-sm-3 control-label">house name<a style="color: red">*</a> 
        <p style="font-size: 75%;" class="help-block">house name</p> 
       </label> 
       <div class="col-xs-4"> 
        <input type="text" placeholder="house name" required="true" id="id-houseName" name="houseName" class="form-control"> 
        <p style="font-size: 75%;" class="help-block"></p> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-sm-3 control-label">Street<a style="color: red">*</a> 
        <p style="font-size: 75%;" class="help-block">Street</p> 
       </label> 
       <div class="col-xs-4"> 
        <input type="text" placeholder="Street" required="true" id="id-street" name="street" class="form-control"> 
        <p style="font-size: 75%;" class="help-block"></p> 
       </div> 
      </div> 
      <ul class="pager"> 
       <li><a href="javascript:showPrevTab('name');" id="id-address-prev">Previous</a></li> 
       <li><a href="javascript:showTab('age');" id="id-age-next">Next</a></li> 
      </ul> 
     </div> 
    </div> 
</form> 

JS:

$(document).ready(function(){ 
     var $validator = $("#id-fn-employee").validate({ 
     errorPlacement: function (error, element) { 
      var placement = $(element).data('error'); 
      if($(element).hasClass('grp')){ 
       error.insertAfter($(element).parent()); 
      }else{ 
       if (placement) { 
        $(placement).append(error) 
       } else { 
        error.insertAfter(element); 
       } 
      } 
     } 
    }); 
}); 

ich die erforderlichen js-Dateien zusammen mit

<script src="${pageContext.request.contextPath}/resources/js/plugins/jquery.validate.min.js"></script> 

hier enthalten sind, Wir müssen hinzufügen Der obige Code in js und müssen die ID des Formulars angeben. Diese Validierung funktioniert auf statischen Seiten, konnte jedoch das dynamisch generierte Formular nicht überprüfen.

Answer 1

Nehmen wir an, Sie einige Markup haben wie die folgenden der Einfachheit halber:

<ul class="tabs"> 
    <li class="tab" id="first_tab"> 
     <form> 
      /* form fields are here */ 
      <button class="next_btn">Next</button> 
     </form> 
    </li> 
</ul> 

So können Sie zum click Ereignis auf dem Weiter Taste hören:

$('form .next_btn').on('click', function() { 
    var $btn = $(this), 
     $form = $btn.closest('form'); 

    initValidator($form); 

    if($form.valid()){ 
     // Go to next step 
    } else { 
     alert('Invalid form') 
    } 
}); 


function initValidator($form) { 
    var $validator = $form.validate({ 
     errorPlacement: function (error, element) { 
      var placement = $(element).data('error'); 
      if($(element).hasClass('grp')){ 
       error.insertAfter($(element).parent()); 
      }else{ 
       if (placement) { 
        $(placement).append(error) 
       } else { 
        error.insertAfter(element); 
       } 
      } 
     } 
    }); 
} 

Answer 2

Problem: Das sieht chaotisch aus. Das ist deine derzeitige Struktur.

<form class="form-horizontal" id="id-fn-employee" method="POST" enctype="multipart/form-data" action="${pageContext.request.contextPath}/employee/saveMe"> 
    <div class="tab-content"> 
    <div id="name">...</div> 
    <div id="address">...</div> 
    </div> 
</form> 

Und Ihr Skript

var $validator = $("#id-fn-employee").validate({... 

Da Ihr haben die form als Eltern, die sowohl auf die Registerkarte Inhalt hüllt, zu einem bestimmten Tab Sie in die Validierung der gesamten Form enden.

---

Lösung:

1) Haben Sie eine separate Formulare für jede Registerkarte und auf Klick auf Next-Button können Sie nur das entsprechende Register des Formulars bestätigen. Dein HTML sollte also auf diese Weise neu strukturiert werden.

Und wenn beide Formulare gültig sind, können Sie die Daten beider Formulare kombinieren und dann mit Jquery senden.

2) Wenn Sie Ihren HTML-Code nicht umstrukturieren wollen, müssen Sie nur die Elemente in diesem bestimmten Tab Content-Div manuell erfassen und sie dann manuell validieren.