Question

我正在使用Jquery validate插件进行表单验证。

在我的表单中，我有一个在单击添加按钮时动态添加行的用法。

添加新行将导致为该行生成新名称（新名称将数字附加到原始名称）。

我编写了验证逻辑，它将验证第一个标准行本身，但后续添加的行将无法验证。

需要帮助验证这些动态名称w.r.t添加行。

下面是我的html代码，其中提到标准行的类和行中元素的名称。 js文件包含动态添加行的逻辑和验证逻辑。

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：添加新行

$("#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验证：部分内容。

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

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

},

需要帮助来获取动态行的验证。

感谢。

Answer 1

通常Jquery验证通过输入'Name'来工作..在这种情况下，因为我的输入行可以动态添加，我创建了一个自定义类验证方法，它根据类名而不是行名进行验证..所以通过进行这些更改，我的Jquery验证工作正常。下面是我的新代码......

验证：

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

我的动态行添加/删除代码：

    $('#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++;

        });

对于我的jsp页面，请参阅我的问题.. 干杯：）

用于动态添加行的Jquery验证 -

1 个答案: