Question

我正在尝试在提交表单时生成一个模态框但是当我提交表单时，它没有验证所需的输入，因为它的类型=＆＃39;按钮＆＃39;。如果我将其替换为＆＃39;提交＆＃39;然后它没有显示弹出框。而且我想先验证然后生成弹出窗口。请有人帮我解决这个问题！

   <html>
    <head>
        <meta name="viewport" content="width = device-width , initial-scale = 1.0">
        <title></title>
        <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cyborg/bootstrap.min.css"                                                                                                                                                 rel="stylesheet">
    </head>
     <body>
         <form>
             <div class="form-group">
                  <label for="water">Enter Water :</label>
                  <input id="water" type="number" min="150" max="210" placeholder="150 to 210 " required class='form-control'>
             </div>
             <div class="form-group">
                  <label for="compressiveStrength">Compresive Strength :</label>
                  <input id="compressiveStrength" type="number" min="30" max="80" placeholder="30 to 80" required class="form-control">
             </div>
             <div class="form-group">
                  <label for="plasticViscosity">Plastic Viscosity :</label>
                  <input id="plasticViscosity" type="number" min="3" max="15" placeholder="3 to 15" required class="form-control">
             </div>
             <div class="form-group">
                  <label for="fiber">Fiber Volume Fraction :</label>
                  <input id="fiber" type="number" min="0" max="2" placeholder="0 to 2" required class="form-control">
             </div>
             <div class="form-group">
                  <label for="aspectRatio">Aspect Ratio :</label>
                  <select id="aspectRatio" class="form-control">
                    <option>60</option>
                    <option>50</option>
                  </select>
              </div>
              <button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-lg">Generate</button>
         </form>
         <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog"> 
            <!-- Modal content-->
                <div class="modal-content">
                     <div class="modal-header">
                         <button type="button" class="close" data-dismiss="modal">&times;</button>
                         <h4 class="modal-title">Result</h4>
                     </div>
                     <div class="modal-body">
                         <p>Some text in the modal.</p>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                     </div>
                </div>  
            </div>
         </div>
    </body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    </html>

Answer 1

只需阻止默认行为：

    $('#form1').submit(function(event){
      // cancels the form submission
      event.preventDefault();

      //If the form is valid open modal
      if($('#form1')[0].checkValidity() ){
        $('#myModal').modal('toggle');
      }
    // do whatever you want here
    });

因此，对于您的示例，它将是：

<html>
<head>
    <meta name="viewport" content="width = device-width , initial-scale = 1.0">
    <title></title>
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cyborg/bootstrap.min.css"                                                                                                                                                 rel="stylesheet">
</head>
 <body>
     <form id="form1" name="form1">
         <div class="form-group">
              <label for="water">Enter Water :</label>
              <input id="water" type="number" min="150" max="210" placeholder="150 to 210 " required class='form-control'>
         </div>
         <div class="form-group">
              <label for="compressiveStrength">Compresive Strength :</label>
              <input id="compressiveStrength" type="number" min="30" max="80" placeholder="30 to 80" required class="form-control">
         </div>
         <div class="form-group">
              <label for="plasticViscosity">Plastic Viscosity :</label>
              <input id="plasticViscosity" type="number" min="3" max="15" placeholder="3 to 15" required class="form-control">
         </div>
         <div class="form-group">
              <label for="fiber">Fiber Volume Fraction :</label>
              <input id="fiber" type="number" min="0" max="2" placeholder="0 to 2" required class="form-control">
         </div>
         <div class="form-group">
              <label for="aspectRatio">Aspect Ratio :</label>
              <select id="aspectRatio" class="form-control">
                <option>60</option>
                <option>50</option>
              </select>
          </div>
          <button type="submit" class="btn btn-primary btn-lg">Generate</button>
     </form>
     <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog"> 
        <!-- Modal content-->
            <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                     <h4 class="modal-title">Result</h4>
                 </div>
                 <div class="modal-body">
                     <p>Some text in the modal.</p>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                 </div>
            </div>  
        </div>
     </div>
</body>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<script>
$('#form1').submit(function(event){
// cancels the form submission
event.preventDefault();
if($('#form1')[0].checkValidity() ){
$('#myModal').modal('toggle');
}
// do whatever you want here
});
</script>   
</html>

有关更多信息，请查看： https://stackoverflow.com/a/5688798/7667467

Answer 2

将按钮更改为：

<input type="submit" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-lg" value="Generate">

您可以向任何元素添加类，它们看起来都是一样的

提交表单的模式框

2 个答案: