Question

我正在寻找使用bootstrap模式提交表单数据。但是，我不想提交空表单。但是，当我使用bootstrap模式触发提交事件在空表单上时，它正在工作而不是它应该停止让我填写必填字段，然后触发模态。

 <script type="text/javascript">
   $(document).ready(function(){
    if($("#df").text()!= '')
    {
      $("#form").submit(function(event) {
      $("#myModal").modal('show');
     });
     });

   </script>

   </head>
   <body>
   <div class="bs-example">
   <form id = "rish">
   <input type = "text" id = "df">
   <input type="submit" class="btn btn-lg btn-primary"></input>
   </form>
    <div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-
    dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Confirmation</h4>
            </div>
            <div class="modal-body">
                <p>Do you want to save changes you made to document  
                   before closing?</p>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data- 
                 dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save                  
                 changes</button>
               </div>
               </div>
               </div>
               </div>
               </div>

Answer 1

可能的text（）不适用于输入元素。用val（）替换text（）以获取输入的值。这应该有用。

if($("#df").val()!= '')
    {
      $("#rish").submit(function(event) {
      $("#myModal").modal('show');
     });
     });

同样将表单ID从#form更改为#rish。

Answer 2

确定。文档准备好时，＃df处的值可能不存在。您可能稍后输入值，这意味着没有事件可以触发模态。因此，不要在文档准备好时提交表单，请执行以下操作。

<form id = "rish">
<input type = "text" id = "df">
<input type="submit" class="btn btn-lg btn-primary" onclick="submitForm();"></input>
</form>

function submitForm()
{
   if($("#df").text()!= '')
{
  $("#rish").submit(function(event) {
  $("#myModal").modal('show');
 });
}

无法使用bootstrap模式执行验证

2 个答案: