javascript或jquery中的动态字段验证

Question

这是我创建表单和动态字段的Html表单

<div style="margin:10px 0;color:#574F44;margin-left:160px;">
    <form name="frmsignup3" method="post" action="new_user2.php" style="margin-top:0px; line-height:60px;" enctype="multipart/form-data" onsubmit="return validateForm2()" >
        <input type="hidden" name="user_name" value="<?php echo $_POST['user_name']?>" />
        <input type="hidden" name="user_email" value="<?php echo $_POST['user_email']?>" />
        <input type="hidden" name="user_pass" value="<?php echo $_POST['user_pass']?>" />
        <input type="hidden" name="user_gen" value="<?php echo $_POST['user_gen']?>" />
        <input type="hidden" name="user_dob_m" value="<?php echo $_POST['user_dob_m']?>" />
        <input type="hidden" name="user_dob_d" value="<?php echo $_POST['user_dob_d']?>" />
        <input type="hidden" name="user_dob_y" value="<?php echo $_POST['user_dob_y']?>" />
        <input type="hidden" name="user_ili" value="<?php echo $_POST['user_ili']?>" />
        <input type="hidden" name="user_pc" value="<?php echo $_POST['user_pc']?>" />
        <input type="hidden" name="user_prof" value="<?php echo $_POST['user_prof']?>" />

        <label id="l" style="width:80px;">Specialities:</label>
        <input id="l" type="text" size="37" onblur="" value="" style="width:auto;" name="user[]"/>
        <!---------Dyanmic Fields  for specialities---------->
        <div id="add_user" style="display: none;"><label id="l" style="width:80px;">&nbsp;</label><input id="l"  class="l"type="text" size="37" style="width:auto;" name="user[]" value="" /></div>
        <input type="button" id="add_user()" onclick="add_user('add_user')" value="Add More!" /><br>
        <br class="clear"/>
        <!---------Dyanmic Fields ---------->

        <label id="l" style="width:120px;">Employment History:</label>
        <br class="clear"/>
        <label id="l" style="width:80px;">Role:</label>
        <input id="l" type="text" size="37" onblur="" value="" style="width:auto;" name="user_role[]"/>
        <br class="clear"/>
        <label id="l" style="width:80px;">Company:</label>
        <input id="l" type="text" size="37" onblur="" value="" style="width:auto;" name="user_com[]"/>
        <br class="clear"/>
        <label id="l" style="width:80px;">From:</label>
        <input id="datepicker"  class="l" type="text" size="37" onblur="" value="" style="width:auto;" name="user_from[]"/>
        <br class="clear"/>
        <label id="l" style="width:80px;">To:</label>
        <input id="datepicker1" class="l" type="text" size="37" onblur="" value="" style="width:auto;" name="user_to[]"/>
        <br class="clear"/>

        <!---------Dyanmic Fields for employment history---------->
        <div id="add_user1" style="display: none;" >
        <label id="l" style="width:80px;">Role:</label><input id="l" type="text" size="37" style="width:auto;" name="user_role[]" value="" /><br class="clear"/>
        <label id="l" style="width:80px;">Company:</label><input id="l" type="text" size="37" style="width:auto;" name="user_com[]" value="" /><br class="clear"/>
        <label id="l" style="width:80px;">From:</label><input class="datepicker"  type="text" size="37" onblur="" value="" style=":Arial;font-weight:normal;font-size:11px;color:#7c7b77;outline: none;border: 1px solid #c7c7c7;margin:3px 5px;padding:8px 0;padding-left:5px;-moz-box-shadow: 0 0 5px #c7c7c7;-webkit-box-shadow: 0 0 5px #c7c7c7;box-shadow: 0 0 5px #c7c7c7;float:left;border-radius: 5px;" name="user_from[]" /><br class="clear"/>
        <label id="l" style="width:80px;">To:</label><input class="datepicker" type="text" size="37" onblur="" value="" style=":Arial;font-weight:normal;font-size:11px;color:#7c7b77;outline: none;border: 1px solid #c7c7c7;margin:3px 5px;padding:8px 0;padding-left:5px;-moz-box-shadow: 0 0 5px #c7c7c7;-webkit-box-shadow: 0 0 5px #c7c7c7;box-shadow: 0 0 5px #c7c7c7;float:left;border-radius: 5px;" name="user_to[]"/><br class="clear"/></div>
        <input type="button" id="add_user1()" onclick="add_user1('add_user1')" name="btn" value="Add More!" /><br>
        <br class="clear"/>
        <!---------Dyanmic Fields ---------->

        <label id="l" style="width:80px;">Qualification:</label>
        <br class="clear"/>
        <label id="l" style="width:80px;">Degree:</label>
        <input id="l" type="text" size="37" onblur="" value="" style="width:auto;" name="user_quli[]"/>
        <br class="clear"/>
        <label id="l" style="width:80px;">Institute:</label>
        <input id="l" type="text" size="37" onblur="" value="" style="width:auto;" name="user_ins[]"/>
        <br class="clear"/>
        <label id="l" style="width:80px;">From:</label>
        <input id="datepicker2" class="l" type="text" size="37" onblur="" value="" style="width:auto;" name="user_qfrom[]"/>
        <br class="clear"/>
        <label id="l" style="width:80px;">To:</label>
        <input id="datepicker3" class="l" type="text" size="37" onblur="" value="" style="width:auto;" name="user_qto[]"/>
        <br class="clear"/>

        <!---------Dyanmic Fields for education---------->
        <div id="add_user2" style="display: none;">
        <label id="l" style="width:80px;">Degree:</label><input id="l" type="text" size="37" style="width:auto;" name="user_quli[]" value="" /><br class="clear"/>
        <label id="l" style="width:80px;">Institute:</label><input id="l" type="text" size="37" style="width:auto;" name="user_ins[]" value="" /><br class="clear"/>
        <label id="l" style="width:80px;">From:</label><input  class="datepicker"  type="text" size="37" onblur="" value="" style=":Arial;font-weight:normal;font-size:11px;color:#7c7b77;outline: none;border: 1px solid #c7c7c7;margin:3px 5px;padding:8px 0;padding-left:5px;-moz-box-shadow: 0 0 5px #c7c7c7;-webkit-box-shadow: 0 0 5px #c7c7c7;box-shadow: 0 0 5px #c7c7c7;float:left;border-radius: 5px;" name="user_qfrom[]" /><br class="clear"/>
        <label id="l" style="width:80px;">To:</label><input class="datepicker"  type="text" size="37" onblur="" value="" style=":Arial;font-weight:normal;font-size:11px;color:#7c7b77;outline: none;border: 1px solid #c7c7c7;margin:3px 5px;padding:8px 0;padding-left:5px;-moz-box-shadow: 0 0 5px #c7c7c7;-webkit-box-shadow: 0 0 5px #c7c7c7;box-shadow: 0 0 5px #c7c7c7;float:left;border-radius: 5px;" name="user_qto[]"/><br class="clear"/></div>
        <input type="button" id="add_user2()" onclick="add_user2('add_user2')" value="Add More!" /><br>
        <br class="clear"/> 
        <!---------Dyanmic Fields ---------->
        <!--Error Div-->
        <div  id="errorcv" style="display: none"> 

        </div>  
        <!--Error Div-->               
        <label id="l" style="width:80px;">Upload CV:</label>
        <input id="l" type="file" size="37"  style="width:auto;" name="user_cv" onblur="return checkcv('user_cv')" accept="application/msword"/>
        <br class="clear"/>
        <!--Error Div-->
        <div  id="errorimg" style="display: none"> 
        </div>  
        <!--Error Div-->
        <label id="l" style="width:80px;">Upload Image:</label>
        <input id="l" type="file" size="37"  style="width:auto;" name="user_img" onblur="return checkPhoto('user_img')" accept="image/*"/>
        <br class="clear"/>
        <label id="l" style="width:80px; margin-left:90px; margin-right:15px;"><a href="" >Skip this step</a></label>
        <input type="image" src="<?php echo DIR_PATH?>images/btn_next.gif" alt=""/>
        <br class="clear"/>
    </form>

这是我生成动态字段的javascript。现在我想验证动态生成的字段

var counter = 0;
function add_user(FieldName) {
    counter++;
    var newFields = document.getElementById(FieldName).cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name
        if (theName)
            newField[i].name = theName + counter;
    }

    var insertHere = document.getElementById(FieldName);
    insertHere.parentNode.insertBefore(newFields,insertHere);
}

var counter = 0;
function add_user1(FieldName) {
    counter++;
    var newFields = document.getElementById(FieldName).cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name
        if (theName)
            newField[i].name = theName + counter;
    }
    var insertHere = document.getElementById(FieldName);
    insertHere.parentNode.insertBefore(newFields,insertHere);
    $(newFields).find('.datepicker').datepicker();

}

var counter = 0;
function add_user2(FieldName) {
    counter++;
    var newFields = document.getElementById(FieldName).cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name
        if (theName)
            newField[i].name = theName + counter;
    }
    var insertHere = document.getElementById(FieldName);
    insertHere.parentNode.insertBefore(newFields,insertHere);
    $(newFields).find('.datepicker').datepicker();
}

我想验证动态创建的文本字段。

Answer 1

我假设你有不同的类型字段。因此，当您添加新字段时，将相同的类添加到每个不同的类型。然后你可以轻松地发布验证函数，然后发布到chekc这样的所有类型：

function your_validator() {
var passed = true;
$('.Specialities').each(function(){
 var current = $.trim($(this).val());
 if (your_false_condition) passed = false;//chekc specialiti value if its not ok
});

if (passed == false) {
alert('error');
return false;
}
return true;
}