Forums

Dynamic Field validation

csdpl 07 Oct, 2014
iam trying to validate a field which is created dynamically in chronoforms,
i have checked this link - http://www.chronoengine.com/forums/posts/f2/t88582/validation-for-dynamic-fields.html?hilit=validation+for+dynamic+fields
but following link is not working
http://www.chronoengine.com/forums.html?cont=posts&p=298661#p298661

can you advise us how to go forward
csdpl 09 Oct, 2014
Hi Bob,

We've tried following the example given, but somehow the validation seems to fail.

In our case, the form's name is NewForm3

and the dynamically added input has the id : FirstName

and we used the syntax :

formCheck_NewForm3.register($('FirstName'));

We seem to have followed the example code correctly, but still the submit button doesnt trigger the validation on the FirstName field.

Any suggestions ?

Thanks in advance
GreyHead 09 Oct, 2014
Hi csdpl,

Please post a link to the form so I can take a quick look.

Bob
csdpl 11 Oct, 2014
Hi bob,

Quick update, we misread the issue actually. This is a super simplified version of what we have in a custom code dropped into the chronoform.

<div id="childElements"></div>
<input type="button" onclick="addNewField();"  value="Add"/>
<script>
addNewField();//adds the first dynamic input field by default

function addChildField(parent,type,value,name,readOnlyS)
{
	var ipt= document.createElement('input');
	ipt.type=type;
	ipt.value=value;
	if (type=="text")
	{
                ipt.style="width: 25%;";	
		ipt.name=name+"[]";
		if (readOnlyS=="true")
		{
                     ipt.setAttribute("readonly","readonly");
		}
        }
        ipt.addClass("validate['required']");
        parent.appendChild(ipt);         
}

function addNewField()
{
var iDiv = document.createElement('div');
addChildField(iDiv,"text","","firstname","false");
document.getElementById('childElements').appendChild(iDiv);
}
</script>

As you can see, clicking on the add button permits to add any number of input fields dynamically each of which is required.
The problem occurs when the submit button is clicked. The validation works correctly only for the first field. It just doesn't work for any of the other fields.

[[>> Updated with corrected code example <<]]
csdpl 13 Oct, 2014
Hi bob,

Not sure if there is some issue with the forums, but all the forum post dates have changed. Please help 😀
csdpl 13 Oct, 2014
Sorry, my bad. I got confused for a moment. Please help with this example.
GreyHead 13 Oct, 2014
Answer
Hi csdpl,

Adding classes after the page is loaded won't add a validation in CFv4. The FormCheck library used there reads the classes when the page loads.

You need to use the formCheck.register() and formCheck.dispose() methods that are used in the post I linked to.

Bob
csdpl 13 Oct, 2014
OK bob,

Thanks a lot. will try and if it doesnt work, we will give you the link so you can access the code. Really appreciate your help.
csdpl 14 Oct, 2014
Thanks a million bob! It worked this time around. We didnt realize that we were passing in a reference to a div instead of the actual input tag itself. Works like a charm now.
This topic is locked and no more replies can be posted.