Question

您好，有人可以通过使用jquery validate plugin和其他方法插件向我解释如何验证克隆的文本字段。我的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;
    });

Vaidation

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

Answer 1

您无法验证＆＃34;克隆＆＃34;字段，因为它将包含重复的name。考虑进行验证的每个字段都必须包含唯一 name属性，就像此插件跟踪验证的方式一样。

因此，您需要重新设计代码，以创建与您创建独特name的方式类似的唯一id。您还需要声明与您初始化.datepicker()插件的方式类似的规则。

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

$('input[name="myNewUniqueName"]').rules('add', {
    required: true,
    minlength: 1
});

如何使用jquery验证验证克隆的textefields？

1 个答案: