Question

我有20个字段，其中一些字段存在于多个div中，根据某些条件设置为display:none。我想在用户点击提交时进行检查，必须要求所有可见字段。现在已经在onClick事件上编写了几个复选框的代码，但我觉得这不是有效的方法..相反，如果我们可以根据需要点击提交按钮选择所有可见字段来运行检查。

我真的很感谢这个案例的指南吗？

Answer 1

如果您没有动态隐藏和显示div（因为模板系统在提供HTML之前执行此操作），那么将所有input:visible字段标记为required就足够了一次，当页面加载时。

$("input:visible").prop("required", true)

如果您动态隐藏并显示div（例如响应按钮点击，复选框等...），则每次隐藏或显示字段时都需要运行该行。

在此代码段中，第一个字段可见，如果您尝试在字段1为空时提交，浏览器会发出警告;但是，第二个字段是隐藏的，因此没有按要求标记。浏览器并没有抱怨它是空白的。

希望这有帮助！

＆＃13;

// if you dynamically hide/show any fields,
// make sure you re-run this line
$("input:visible").prop("required", true);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <div>
    <input placeholder="Field 1">
  </div>
  
  <div hidden>
    <input placeholder="Field 2">
  </div>
  
  <input type="submit" value="Submit">
</form>

＆＃13;

Answer 2

您可以根据自己的要求匹配此代码。我猜那些可见和隐藏的字段是输入类型。

$(document).ready(function () {
                $("input:visible").each(function () {
                    $(this).prop("required", true);
                });
                $("#sbt").on("click", function () {
                    $('#myForm').find('input').each(function () {
                        if ($(this).prop('required') && $("#"+this.id).val()=='') {
                            alert('Please fill the required fields');
                            return false;
                        } 
                    });
                    //your submit code goes here
                });
            });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="myForm" name="myForm">
            <div id="fD">
                <input type="text" id="f1" name="f1">
            </div>
            <div id="sD">
                <input type="hidden" id="f2" name="f2">
            </div>
            <div id="tD">
                <input type="text" id="f3" name="f3">
            </div>
        </form>
       <button id="sbt">Submit</button>

Answer 3

我假设您通过某种形式的Javascript隐藏或显示您的字段。您可以在JS中访问的HTML5元素可以设置为必需，如下所示：

document.getElementById("someElement").required = true;

显然，反过来也是可能的。

Jquery在提交之前必须标记所有可见字段

3 个答案: