How to validate a fields which was created on button click
Question
My concept is to create maximum 20 fields on button click "+", If you tap on "+" button then new field could be added, that was successfully done.. But now my problem is to do validation for the fields which was created on "+" button tap.
I have code for validation, but it is working for only one field.. Can any one please help me to work on all the fields. Here is my sample code..
<html>
<head>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/jQuery - v1.11.1.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#myform').validate({
rules: {
userid: {
required: true,
},
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});
});
</script>
<script>
var field = 1;
function add_fields()
{
field++;
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("div");
divtest.innerHTML = '<div class="label">Field '+ field +':</div><input type="text" name="userid " id="userid' + field +'" maxlength="50" placeholder="User ID" class="userid"/></div>';
objTo.appendChild(divtest)
}
</script>
</head>
<body>
<form id="myform">
<input type="button" id="more_fields" onclick="add_fields();" value="+" />
<div id="room_fileds">
<div class="label">Field 1:</div>
<input type="text" name="userid" id="userid" maxlength="50" placeholder="User ID" class="userid"/><br>
</div>
<input type="submit" />
</form>
</body>
</html>
3 answers
solution1
2 2016-10-20 06:34:26
It looks that validation is not applying on dynamically added inputs.
For that, you need to add rules for newly created inputs by
$('input').rules('add', 'required')
solution2
2 2016-10-20 06:36:09
In your add fields method, you will have to re-validate the form and add a new rule.
<script>
var field = 1;
function add_fields()
{
field++;
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("div");
divtest.innerHTML = '<div class="label">Field '+ field +':</div> <input type="text" name="userid " id="userid' + field +'" maxlength="50" placeholder="User ID" class="userid"/></div>';
objTo.appendChild(divtest);
$('#myform').validate();
$("input#userid" + field).rules("add", "required");
}
</script>
Check out the documentation
solution3
1 2016-10-20 06:36:24
Count you appended div on add more button click :
function add_fields() {
var apendedDivCount = 1;
apendedDivCount = document.querySelectorAll('.userid').length; // Count of appended div with class "userid"
if (apendedDivCount < 21) { // Condition to allow maximum 20 userid class div
field++;
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("div");
divtest.innerHTML = '<div class="label">Field '+ field +':</div>
<input type="text" name="userid" id="userid' + field +'" maxlength="50" placeholder="User ID" class="userid"/></div>';
objTo.appendChild(divtest);
} else {
alert ("You can't add more than 20");
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.