Question

您好我尝试使用javascript或jquery（但不要使用jquery validate plugin）对具有相同名称和添加动态输入的多个输入进行表单验证。我希望所有输入都需要填写。但它不起作用。在这种情况下我该如何验证？

<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>

Answer 1

在我看来这是有效的。如果您尝试稍微更改脚本，可能会清除正在发生的事情：

function chk_null()
{
    var isValid = true;
    $('input[name="mytext[]"]').each(function() {
        if($(this).val() == "")
        {
          alert("Please Fill");
          isValid = false;
        }
    });
    return isValid;
}

如果您使用四个字段运行此选项并填写1个字段，则会收到3个警报。如果没有填写多个字段，可能只会因为只有一个警报而被抛弃，但那是因为你立即返回false。

Answer 2

我建议另类。将按钮类型设置为＆＃34;按钮＆＃34;如果您的支票没问题，请提交表格。 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();
}

javascript - 如何验证具有多个相同名称的动态添加输入？

2 个答案: