个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 03:58:02 26 4
gpt4 key购买 nike

您好，我尝试使用 javascript 或 jquery (但不使用 jquery 验证插件)对具有相同名称并添加动态输入的多个输入进行表单验证。我希望所有的输入都需要填写。但这行不通。在这种情况下我该如何验证它？

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

最佳答案

我建议一个替代方案。将按钮类型设置为“按钮”，如果检查正常，则提交表单。 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 - 如何验证具有多个相同名称的动态添加输入？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42468820/

26 4 0
文章推荐： javascript - navTrl.push() 中的 promise 错误
文章推荐： servicestack - 如何使用 JsonServiceClient 过滤对象
文章推荐： json - Jackson JSON 多态性
文章推荐： JavaScript/Jquery/甘特图 Highcharts : On clicking over a task progress pop-up should get open
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com