Validatebox validation on dynamically created from elements

[sm_79]

Hi,
I am using jquery easyui validatebox for validating data in my form. However, in one of the forms, there is scope to create a group of form elements dynamically by clicking 'add elements' button.

Code:

                 <fieldset id="teacher_2">
                        <legend style="display: none">Teacher Details</legend>
                        <div id="tchentry1" class="clonedInputTch">
                            <h2 id="reference_tch" name="reference_tch" class="heading-reference">Detail #1</h2>
                            <div class="form-group">
                                <input type="text" name="tch_fname[]" class="form-control easyui-validatebox" placeholder="First name" data-options="required:true"/>
                            </div>
                            <div class="form-group">
                                <input type="text" name="tch_lname[]" class="form-control easyui-validatebox" placeholder="Last name" data-options="required:true"/>
                            </div>
                            <div class="form-group">
                                <input type="text" name="tch_email[]" class="form-control easyui-validatebox" placeholder="Email" data-options="required:true,validType:'email'"/>
                            </div>
                            <div class="form-group">
                                <input type="text" name="tch_userid[]" class="form-control easyui-validatebox" placeholder="User ID" data-options="required:true,validType:'minLength[5]'" />
                            </div>
                        </div>
                        <p class="text-center">
                            <button type="button" id="btnAddTch" name="btnAddTch" class="btn bg-olive">add teacher</button>
                            <button type="button" id="btnDelTch" name="btnDelTch" class="btn btn-danger">remove teacher above</button>
                        </p>
                    </fieldset>

On clicking the 'add teacher' button, basically I am using jquery .clone() method to create a copy of the div with class 'clonedInputTch'. As you can see, I have used "easyui-validatebox" class for validation of the form elements.

When there is only set of form elements, the validation is working fine. However, once a new set of fields have been generated dynamically, the validation is not working. And at this point getting following error in console:

Code:

Uncaught TypeError: Cannot read property 'options' of undefined jquery.easyui.min.js:5943
_43b jquery.easyui.min.js:5943
(anonymous function) jquery.easyui.min.js:5984
x.extend.each jquery.js:590
x.fn.x.each jquery.js:237
$.fn.validatebox.methods.enableValidation jquery.easyui.min.js:5983
$.fn.validatebox jquery.easyui.min.js:5955
(anonymous function) registerParent.php:200
x.event.dispatch jquery.js:4692
y.handle

Please let me know if this functionality is possible. If so, kindly guide on how to implement the same.
Thanks in advance.

[stworthy]

Please call $.parser.parse function to parse the validatebox components after generating elements.

Code:

var ff = $('#tchentry1').clone().attr('id','').appendTo('#teacher_2');
$.parser.parse(ff);

[globule]

Hmmm... and how can I do if have 2 forms and once the first is validated (ajax submit to check availability), all the fields in the first form are injected (prepend) into the second ?
Actually, only the first form is correctly validated but the second returns

Code:

Cannot read property 'options' of undefined

when running

Code:

	$('#formCreate2').form({
		onSubmit: function(){
			if( $('input#phone').val().length < 10 && $('input#phone_mobile').val().length < 10	){
				$.messager.alert( 'Attention', 'Vous devez entrer au moins un numéro de téléphone !');
				return false;
			}
			return $(this).form('validate');
		},
		success: function(data){
			return false;
		}
	});

in the second form !

[sm_79]

Please call $.parser.parse function to parse the validatebox components after generating elements.

Code:

var ff = $('#tchentry1').clone().attr('id','').appendTo('#teacher_2');
$.parser.parse(ff);

Thanks a lot. This solves the issue I mentioned. However, it creates one side effect...if my form has a combo box as below:

Code:

<input type="text" id="locCode" name="loc" class="form-control easyui-combobox" placeholder="Location Code"
                               data-options="
                                    required:true,
                                    width:320,
                                    height:34,
                                    url:'register.php?action=load',
                                    method:'get',
                                    valueField:'id',
                                    textField:'locationName',
                                    panelHeight:'auto',
                                    formatter: formatItem" />

On executing $.parser.parse(ff); it is un-setting the user selected value from combobox. Can you suggest any fixes for this? Thanks again in advance.

[stworthy]

Please set the 'value' property for combobox to set the initialized value.

Code:

<input type="text" id="locCode" name="loc" class="form-control easyui-combobox" value="..." ...>

Also, you can set the data item with 'selected' property set to true for the returned json array from 'register.php?action=load'. The data may looks like this:

Code:

[{
	"id":1,
	"text":"Java"
},{
	"id":2,
	"text":"C#"
},{
	"id":3,
	"text":"Ruby",
	"selected":true
}]

[sm_79]

Please set the 'value' property for combobox to set the initialized value.

Code:

<input type="text" id="locCode" name="loc" class="form-control easyui-combobox" value="..." ...>

Also, you can set the data item with 'selected' property set to true for the returned json array from 'register.php?action=load'. The data may looks like this:

Code:

[{
	"id":1,
	"text":"Java"
},{
	"id":2,
	"text":"C#"
},{
	"id":3,
	"text":"Ruby",
	"selected":true
}]

Hi,
Sorry about reviving this old topic. But I am stuck again at a similar problem.

You have suggested to set the value or set selected property to 'true' in json array. But if this is not an edit form, I simply need to load the data in the combobox with no pre-defined initialized value. Now if user selects a value from the combobox for inserting in DB for first time, on submit I am executing $.parser.parse(ff); but it is un-setting the user selected value from combobox. Please advise on how this can be resolved. Thanks in advance.