javascript - how to validate dynamic add input with multiple same name?
Question
Hello I try to do form validation with javascript or jquery (but don't use jquery validate plugin) for the multiple inputs that has same name and added dynamic input. I want all the input is required to fill. but it's not work. How could I do to validate it in this case??
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script>
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
<script>
function chk_null()
{
$('input[name="mytext[]"]').each(function() {
if($(this).val() == "")
{
alert("Please Fill");
return false;
}
});
}
</script>
</head>
<body>
<form action="new2.php" method="post" onsubmit="return chk_null();">
<div class="input_fields_wrap">
<button type="button" class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
<div><input type="text" name="mytext[]"></div>
</div>
<input type="submit" value="submit">
</form>
</body>
</html>
2 answers
solution1
1 2017-02-26 13:39:03
It seems to me this is working. If you try changing your script slightly it might clear up what is happening:
function chk_null()
{
var isValid = true;
$('input[name="mytext[]"]').each(function() {
if($(this).val() == "")
{
alert("Please Fill");
isValid = false;
}
});
return isValid;
}
If you run this with four fields and 1 is filled in, you will get 3 alerts. Perhaps you were thrown off by only getting one alert if there are multiple fields not filled in, but that was because you were immediately returning false.
solution2
1 ACCPTED 2017-02-26 13:45:36
I suggest an alternative. Set your button type as "button" and if your check is ok, then submit the form. Here the example.
<form action="new2.php" method="post">
.
.
.
<input type="button" value="submit" onclick="chk_null();">
.
.
.
function chk_null() {
var allFilled=true;
$('input[name="mytext[]"]').each(function() {
if ($(this).val() == "") {
alert("Please Fill");
allFilled = false;
}
});
if (allFilled) $('form').submit();
}
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.