Menu
How can I validate dynamically created text inputs?
I have an "add more" link that creates new ones, and a link to remove them. Each one has a uniqe ID.
Also, at least two text boxes must be filled.
532
Using the Validation plugin you could add rules dynamically. Here's an example:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
var count = 0;
$(function() {
$('form').validate({
rules: {
input0: {
required: true
}
},
message: {
input0: {
required: 'This field is required'
}
}
});
$('a').click(function() {
count++;
var newElement = $('<input type="text" name="input' + count + '" value="" />');
$('form').append(newElement);
newElement.rules('add', {
required: true,
messages: {
required: 'This field is required'
}
});
return false;
});
});
</script>
</head>
<body>
<form>
<input type="text" name="input0" value="" />
<input type="submit" value="OK" />
</form>
<a href="#">Add input</a>
</body>
</html>
I wrote a blog post explaining how to dynamically add inputs to a form, and simultaneously add validation rules for the jQuery Validate plugin.
In my example, it was an order form for helmets:
//Each set of helmet inputs gets unique IDs
function newHelmetInputs(i){
var inputSet = '';
inputSet += '<label for="helmet'+ i +'color">Helmet '+ i +' Color</label>'
inputSet += '<input id="helmet'+ i +'color" name="helmet['+ i +'][color]"/>'
inputSet += '<label for="helmet'+ i +'size">Helmet '+ i +' Size</label>'
inputSet += '<input id="helmet'+ i +'size" name="helmet['+ i +'][size]"/>'
return inputSet;
}
//Actually adding them to the page
$('#addhelmet').click(function(){
var i = nextNumber(); //nextNumber() is a closure - see my blog for details
var newInputs = newHelmetInputs(i); //i is used above in IDs
$(this).before(newInputs);
('#helmet' + i + 'size').rules('add', {digits: true}); //matching validation rule
});
The blog post goes into more detail, and also explains how to process this with PHP.
As for the requirement that at least two textboxes must be filled, I wrote a jQuery Validate method for that, and a similar one that says "either fill at least X of the fields in this section, or skip the section entirely."
So, for example, if your form lets people order sandwiches, and each sandwich has an input for bread and filling, you can dynamically add fields for as many sandwiches as they want to order. They don't have to fill in anything for sandwich #2, but if they do, they have to give you both the bread AND the filling type.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
