Jquery-Validierung für das dynamische Hinzufügen von Zeilen-

Question

Ich benutze Jquery Validierung Plugin für meine Formularvalidierung .. In meinem Formular hatte ich einen Anwendungsfall von Zeilen dynamisch hinzufügen, wenn Sie auf eine Schaltfläche Hinzufügen klicken..Nach dem Hinzufügen einer neuen Zeile wird generiert ein neuer Name für die Zeile (neuer Name hängt eine Zahl atlast an den ursprünglichen Namen an ..) Ich habe die Validierungslogik geschrieben, die die erste Standardzeile selbst validiert..Aber das nachfolgende Hinzufügen von Zeilen wird nicht validiert. ..Need Hilfe bei der Validierung für diese dynamische Namen wrt Zeilen hinzugefügt .. Unten ist mein HTML-Code, wo Standard-Zeile mit der Klasse und Namen für die Elemente in der Zeile erwähnt wurde. Die js-Datei enthält die Logik, um die Zeilen dynamisch und die Validierungslogik hinzuzufügen ..

Html:

<tbody> 
    <tr> 
     <td> 
     <div class="uriDiv input-group"> 
      <input type="text" name="uriName" class="common form-control authUrl" 
       id="uriName" placeholder="URL for the Policy" /> 
     </div> 
     </td> 
     <td> 
     <div class="uriDiv input-group"> 
      <select class="common authSelect form-control" name="authType" id="authType"> 
       <option value=""> 
        <spring:message 
        code="newPolicy.selectAuthType"></spring:message> 
       </option> 
       <option value="DB">DB</option> 
       <option value="LDAP">LDAP</option> 
      </select> 
     </div> 
     </td> 
     <td> 
     <div class="auth-permission-rd"> 
      <div class="uriDiv radio radio-left"> 
       <label> <input type="radio" class="common anyuser authPermission" 
        value="anyUser" name="authPermission" id="anyUser" disabled="disabled">Any 
       User 
       </label> 
      </div> 
      <div class="uriDiv radio radio-input"> 
       <label> <input type="radio" class="common groupuser authPermission" 
        value="groupUser" name="authPermission" id="groupUser" disabled="disabled"> 
       <input type="text" name="authPermissionValue" disabled="disabled" 
        class="common form-control-placeHolder" id="authPermissionValue" placeholder="Enter custom Permissions - Comma separated" /> 
       </label> 
      </div> 
     </div> 
     </td> 
     <td><button type="button" 
     class="btn btn-primary delete-but-grid"> 
     <span class="glyphicon glyphicon-remove"></span> 
     </button> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="4"> 
     <button type="button" id="addBtn" 
      class="btn add-but-grid glyphicon glyphicon-plus-sign"></button> 
     </td> 
    </tr> 
</tbody> 

js: das Hinzufügen neuer Zeilen

$("#addBtn").click(function() { 
var divAdd = ' 
<tr id=' + dynamicCount + '> 
    <td> 
     <div class="uriDiv input-group"><input type="text" name="uriName' + dynamicCount + '" class="common form-control" id="uriName' + dynamicCount + '" placeholder="URL for the Policy"/></div> 
    </td> 
    ' 
    divAdd = divAdd + ' 
    <td> 
     <div class="uriDiv input-group"> 
     <select class="common authSelect form-control" id="authType' + dynamicCount + '" name="authType' + dynamicCount + '"> 
      <option value="">Select Auth Type </option> 
      <option value="DB">DB</option> 
      <option value="LDAP">LDAP</option> 
     </select> 
     </div> 
    </td> 
    ' 
    divAdd = divAdd + ' 
    <td> 
     <div class="auth-permission-rd"> 
     <div class="uriDiv radio radio-left"><label> <input type="radio" class="common anyuser authPermission" value="anyUser" disabled="disabled" name="authPermission' + dynamicCount + '" id="anyUser">Any User</label></div> 
     ' 
     divAdd = divAdd + ' 
     <div class="uriDiv radio radio-input"> <label> <input type="radio" class="common groupuser authPermission" value="groupUser" disabled="disabled" name="authPermission' + dynamicCount + '"id="groupUser"><input type="text" disabled="disabled" name="authPermissionValue' + dynamicCount + '" class="common form-control-placeHolder" id="authPermissionValue' + dynamicCount + '" placeholder="Enter custom Permissions - Comma separated" /></label></div> 
     </div> 
    </td> 
    ' 
    divAdd = divAdd + ' 
    <td><button type="submit" id=' + dynamicCount + ' class="uriDelte btn btn-primary delete-but-grid"><span class="glyphicon glyphicon-remove"></span></button></td> 
</tr> 
' 
$('#uriInfo tr:last').before(divAdd); 
dynamicCount++; 
}); 

Validierung js: ein Teil davon .

$("#policy-form").validate({ 
rules:{ 

    uriName:{ 
     required: true 
    }, 
    authType:{ 
     required: true 
    }, 
    authPermission:{ 
     required: true 
    }, 

}, 

Benötigen Sie die Validierung für dynamische Zeilen bekommen .. Dank ..

Answer 1

Normalerweise Jquery Validierung funktioniert durch die Eingabe ‚Name‘ helfen .. hier in diesem Fall als meine Eingabezeilen dynamisch hinzugefügt werden können, Ich habe eine benutzerdefinierte Klassenüberprüfungsmethode erstellt, die die Validierung auf der Grundlage des Klassennamens statt des Zeilennamens ausführt.so, indem ich diese Änderungen vornahm, funktioniert meine Jquery-Validierung einwandfrei ... darunter ist mein neuer Code ...

Validierung:

$.validator.addClassRules({ 
    authUrl:{ // here authUrl is one of the class Name for the input row.. 
     crequiredUrl:true 
    }, 
    authSelect:{ 
     crequiredSelect:true 
    }, 
    authPermission:{ 
     crequiredPermission:true 
    }, 
    authPermissionMulti:{ 
     crequiredPermCust:true 
    } 
}); 
$.validator.addMethod('crequiredUrl', $.validator.methods.required, 
'Please enter the Url'); 

$.validator.addMethod('crequiredSelect', $.validator.methods.required, 
' Auth Type for policy is required'); 

$.validator.addMethod('crequiredPermission', $.validator.methods.required, 
' AuthPermission for policy is required'); 

$.validator.addMethod('crequiredPermCust', $.validator.methods.required, 
' Custom AuthPermissions cannot be empty'); 

$("#policy-form").validate({ 
    rules:{ 
     targetEnv:{ 
      required:true 
     }, 
     domainName: { 
      required:true 
     }, 
     authSchemaType: { 
      required: true 
     }, 
     headersRequired: { 
      required: true 
     }, 
     headersReqEle: { 
      required: true 

    // other form validation rules.. 

meine dynamische Zeile hinzufügen/löschen Code:

$('#headerCheck').hide(); 
    var dynamicCount=0; 

    // var validateArray=new Array('uriName','authType','authPermission','authPermissionValue'); 
    $("#addBtn").click(function() { 

      var divAdd = '<tr id=' + dynamicCount + '><td><div class="uriDiv input-group"><input type="text" name="uriName' + dynamicCount + '" class="common form-control authUrl" id="uriName' + dynamicCount + '" placeholder="URL for the Policy"/></div></td>' 

      divAdd = divAdd + '<td><div class="uriDiv input-group"><select class="common authSelect form-control" id="authType' + dynamicCount + '" name="authType' + dynamicCount + '"><option value="">Select Auth Type </option><option value="RACF">RACF</option><option value="LDAP">LDAP</option></select></div></td>' 

      divAdd = divAdd + '<td><div class="auth-permission-rd"><div class="uriDiv radio radio-left"><label> <input type="radio" class="common anyuser authPermission" value="anyUser" disabled="disabled" name="authPermission' + dynamicCount + '" id="anyUser">Any User</label></div>' 

      divAdd = divAdd + '<div class="uriDiv radio radio-input"> <label> <input type="radio" class="common groupuser authPermission" value="groupUser" disabled="disabled" name="authPermission' + dynamicCount + '"id="groupUser"><input type="text" disabled="disabled" name="authPermissionValue' + dynamicCount + '" class="common form-control-placeHolder authPermissionMulti" id="authPermissionValue' + dynamicCount + '" placeholder="Enter custom Permissions - Comma separated" /></label></div></div></td>' 

      divAdd = divAdd + '<td><button type="submit" id=' + dynamicCount + ' class="uriDelte btn btn-primary delete-but-grid"><span class="glyphicon glyphicon-remove"></span></button></td></tr>' 

      $('#uriInfo tr:last').before(divAdd); 
      dynamicCount++; 

     }); 

für meine jsp Seite, pls auf meine Frage verweisen .. cheers :)