Question

我有一个有几个字段的bootstrap表单。默认情况下，第1和第2个字段是必填字段。

现在，如果填写第3个字段，则第4个字段成为强制字段。类似地，如果填写了第4个字段，则第3个字段成为强制字段。

然而，如果第3和第3第四个字段没有填写，它们不是强制性的。我也在这里使用HTML5表单验证。

这是我的代码：

<!doctype html>
<html>
    <head>  
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script>
            $(function(){

                $("#myForm").submit(function(){
                    checkAll();

                    return false;
                })

            });

            function checkAll() {
                if(($('#comp').val()!== "") || ($('#weburl').val()!=="")) {
                    $('#comp').prop('required',true);
                    $('#weburl').prop('required',true);

                }
                else {
                    $('#comp').prop('required',false);
                    $('#weburl').prop('required',false);
                }
            }
        </script>
    </head>
    <body>
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myFormModal">Add Details</button>

        <div id="myFormModal" class="modal fade" role="dialog">
          <div class="modal-dialog">

            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add details</h4>
              </div>
              <div class="modal-body">
                <form class="form-horizontal" id="myForm" name="contact" action="#">
                  <div class="form-group">
                    <label class="control-label col-sm-3" for="dor">Date of Registeration:</label>
                    <div class="col-sm-8">
                      <input type="date" class="form-control" id="dor" name="dor" required>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="control-label col-sm-3" for="name">Name:</label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="control-label col-sm-3" for="comp">Company:</label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control" id="comp" name="comp">
                    </div>
                  </div>
                  <div class="form-group">
                   <label class="control-label col-sm-3" for="weburl">Website:</label>
                    <div class="col-sm-8">
                      <input type="url" class="form-control" id="weburl" name="weburl">
                    </div>
                  </div>
                  <hr />
                  <div class="form-group">        
                    <div class="col-sm-offset-3 col-sm-3">
                      <button  class="btn btn-primary btn-sm">Save</button>
                    </div>
                    <div class="col-sm-3">
                      <button type="reset" class="btn btn-primary btn-sm">Reset</button>
                    </div>
                    <div class="col-sm-3">
                      <button type="button" class="btn btn-primary btn-sm close-external-modal" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
    </body>
</html>

Answer 1

您可以将事件处理程序附加到元素，并在提交表单之前执行此操作。类似的东西：

$("#comp, #weburl").on('input', function() {
  if($("#comp").val() || $("#weburl").val()) {
    $("#comp").prop('required', true);
    $("#weburl").prop('required', true); 
  }
  else {
    $("#comp").removeAttr('required');
    $("#weburl").removeAttr('required');
  }
});

https://jsfiddle.net/yscy8Lrr/1/

（忽略代码以更改文本框颜色，我只是添加它以显示实际上正在添加和删除所需的属性）

当两者都有值时，这将使#comp和#weburl都需要，而当两者都不包含任何字符时，这不是必需的。

附注：如果您需要使用HTML5并希望获得跨浏览器支持，则应在提交表单时调用表单上的checkValidity（）函数，因为Safari不支持required属性。

在动态强制要求表单字段时验证HTML5表单

1 个答案: