验证HTML5表单使表单域成为必需的动态

我有一个有几个字段的引导表单。默认情况下，第一个和第二个字段是必需的。验证HTML5表单使表单域成为必需的动态

现在，如果填写第三个字段，则第四个字段变为强制。类似的，如果填写第4个字段，则第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>

来源

2017-04-09 Sunny

你的问题是什么？什么不起作用？ –

如何确保在公司填写完成后，网站变为强制性。当网站填写完毕后，公司就成为强制性的。如果公司和网站都没有填写，那么这两个字段都不是强制性的。但是，注册日期和名称字段始终是强制性的。 – Sunny

你可以附加一个事件处理程序的元素和你之前做到这一点，即使提交表单。喜欢的东西：

$("#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属性。

来源

2017-04-09 08:45:38

非常感谢！ – Sunny

验证HTML5表单使表单域成为必需的动态

回答

相关问题