0

嗨，任何人都可以向我解释如何使用 jquery validate 插件和附加方法插件来验证克隆的文本字段。我的 HTML 代码是这样的。这里我有一个 addnew 按钮，当我点击它时，我将克隆相同的文本字段到波纹管。

JSP

 <input type="hidden" id="experiencelength" name="experiencelength" value=""/>
                                    <tr>
                                    <td> <input type="text" id="previouscompanyname" name="previouscompanyname" maxlength="200" class="input-large" style="height:27px; " value="${param.previouscompanyname}"/>          
                                        <p id="previouscompanyname" style="color: red"/>
                                        <html:errors property="previouscompanyname"/></td>
                                    <td> <input type="text" id="jobtitle" name="jobtitle" maxlength="200" class="input-large" style="height:27px; " value="${param.jobtitle}"/>          
                                        <p id="jobtitle" style="color: red"/>
                                        <html:errors property="jobtitle"/></td>
                                    <td> <input type="text"  class="input-large datepicker" style="height:27px;" readonly="true" id="jobfromdate" name="jobfromdate"  value="${param.dateofjoining}"/>
                                        <html:errors property="jobfromdate"/></td>
                                    <td>  <input type="text"  class="input-large datepicker" style="height:27px;" readonly="true" id="jobtodate" name="jobtodate"  value="${param.dateofjoining}"/>
                                        <html:errors property="jobtodate"/></td><td></td>
                                    </tr>
                                    <tr>
                                    <td>
                                    <button type="button" class="btn btn-info" id="workexperience">Add New</button>

克隆脚本

 $("#workexperience").click(function() {
//        var jobfromdate = 0;
        var date = '<td><input type="text" class="input-large datepicker" style="height:27px;" readonly="true" id="jobtodate1' + j + '" name="jobtodate1"/></td>';
        var date1 = '<td><input type="text" class="input-large datepicker" style="height:27px;" readonly="true" id="jobfromdate' + k + '" name="jobfromdate"/></td>';
        var remve = '<td><button type="button"  class="removeworkexperience" class="btn btn-info" >x</button></td>';
        $(this).closest('tr').prev('tr').clone(true).insertAfter($(this).closest('tr').prev('tr')).find('td:last-child').remove().find('td:last-child').remove();
        $(this).closest('tr').prev('tr').find('td:last-child').remove();
        $(this).closest('tr').prev('tr').find('td:last-child').remove();
        $(this).closest('tr').prev('tr').append(date).append(date1).append(remve);
        $('#jobtodate1' + j).datepicker();
        $('#jobfromdate' + k).datepicker();
        ++k;
        ++j;
        document.getElementById("experiencelength").value = j;
    });

验证

 $('#employee_table').validate({
        rules: {
            firstname: {
                required: true,
                letterswithbasicpunc: true
            },
            lastname: {
                minlength: 1,
                required: true,
                letterswithbasicpunc: true
            },
            generateemployeeID: {
                required: true,
                minlength: 3
            },
            email: {
                required: true,
                email: true
            },
            sourceofhire: {
                required: true
            },
            designation: {
                letterswithbasicpunc: true
            },
            otheremail: {
                email: true,
                minlength: 10

            },
            previouscompanyname:{
                 required: true
            },
            agree: "required"

        },
        highlight: function(element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function(element) {
            element
                    .text('OK!').addClass('valid')
                    .closest('.control-group').removeClass('error').addClass('success');
        }
    });
4

1 回答 1

1

您无法验证“克隆”字段，因为它将包含重复的name. 考虑进行验证的每个字段都必须包含一个唯一 name属性，因为这是该插件跟踪验证的方式。

因此，您需要重新编写代码以创建一个独特的name，类似于您创建独特的id. 您还需要声明类似于初始化.datepicker()插件的规则。

使用插件的.rules()方法....

$('input[name="myNewUniqueName"]').rules('add', {
    required: true,
    minlength: 1
});
于 2014-03-24T04:48:51.277 回答