kota srinu kota srinu - 5 months ago 21
Javascript Question

Jquery validation for dynamically adding rows-

i am using Jquery validate plugin for doing my form validation..In my form, i had an usecase of adding rows dynamically upon clicking an add button..Adding new row, will result in generating a new name for the row( new name is appending a number atlast to the original name..).I written the validation logic, which will validate the first standard row itself..But the subsequent addition of rows will not be getting validated...Need help in making validation for these dynamic Names w.r.t added rows..
Below is my html code, where standard row was mentioned with the class and Names to the elements in the row.
The js file contains the logic to add the rows dynamically and the validation logic..

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:adding new rows

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


js validation: some part of it.

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

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

},


Need help in getting the validation for dynamic rows..
thanks..

Answer

Normally Jquery validation works by input 'Name'..here in this case as my input rows can be dynamically added,i created a custom class validation method, which does the validation based on the class name, instead of the row name..so by making these changes, my Jquery validation is working fine..below is my new code...

validation :

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

my dynamic row add/delete 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++;

        });

for my jsp page, pls refer to my question.. cheers :)