jQuery验证 - 东西阻止提交的形式

Question

我有一个与jQuery验证（测试示例）的形式。一切都“好”，直到没有更多的验证错误，然后阻止表单提交。在我看来，代码中的一切似乎都很好，但不起作用。有任何想法吗？谢谢。

我的代码：

$(document).ready(function() { 

    $("#submit").click(function (event) { 

     event.preventDefault();    
     $("#dialog-input").html(""); 

     var input1 = $('#input1').val(); 
     var input2 = $('#input2').val(); 
     var input3 = $('#input3').val(); 

     var valid = true; 

     if (input1 == ""){ 

      $('.in1').removeClass('valid').addClass('error'); 
      $("#dialog-input").append("<p>Empty Input 1</p>"); 

      valid = false; 
     } 
     else { $('.in1').removeClass('error').addClass('valid'); } 

     if (input2 == "") { 

      $('.in2').removeClass('valid').addClass('error'); 
      $("#dialog-input").append("<p>Empty Input 2</p>"); 

      valid = false; 
     } 
     else { $('.in2').removeClass('error').addClass('valid'); } 

     if (input3 == "") { 

      $('.in3').removeClass('valid').addClass('error'); 
      $("#dialog-input").append("<p>Empty Input 3</p>"); 

      valid = false; 
     } 
     else { $('.in3').removeClass('error').addClass('valid'); } 

     if(!valid){ 

      $(function() { 
       $("#dialog-input").dialog({ 
        modal: true, 
        buttons: { 
         Ok: function() { 
          $(this).dialog("close"); 
         } 
        } 
       }); 
      }); 
     } 
     else{ return valid; } 
    }); 
}); 

工作的jsfiddle：https://jsfiddle.net/nitadesign/rwe2ywrs/7/

的jsfiddle只是一个较短整个脚本和形式的版本。

Answer 1

只需删除event.preventDefault()并使用jQuery风格的事件控制返回true或false事件传播控制？

我已经更新您的提琴：https://jsfiddle.net/alokrajiv/rwe2ywrs/12/

的片段如下，但表单提交，由安全政策SO保护，所以片段可能不会在这里工作。但它的权利。检查小提琴的工作！

$(document).ready(function() { 
 

 
    $("#submit").click(function(event) { 
 

 
    $("#dialog-input").html(""); 
 

 
    var input1 = $('#input1').val(); 
 
    var input2 = $('#input2').val(); 
 
    var input3 = $('#input3').val(); 
 

 
    var valid = true; 
 

 
    if (input1 == "") { 
 

 
     $('.in1').removeClass('valid').addClass('error'); 
 
     $("#dialog-input").append("<p>Empty Input 1</p>"); 
 

 
     valid = false; 
 
    } else { 
 
     $('.in1').removeClass('error').addClass('valid'); 
 
    } 
 

 
    if (input2 == "") { 
 

 
     $('.in2').removeClass('valid').addClass('error'); 
 
     $("#dialog-input").append("<p>Empty Input 2</p>"); 
 

 
     valid = false; 
 
    } else { 
 
     $('.in2').removeClass('error').addClass('valid'); 
 
    } 
 

 
    if (input3 == "") { 
 

 
     $('.in3').removeClass('valid').addClass('error'); 
 
     $("#dialog-input").append("<p>Empty Input 3</p>"); 
 

 
     valid = false; 
 
    } else { 
 
     $('.in3').removeClass('error').addClass('valid'); 
 
    } 
 

 
    if (!valid) { 
 

 
     $(function() { 
 
     $("#dialog-input").dialog({ 
 
      modal: true, 
 
      buttons: { 
 
      Ok: function() { 
 
       $(this).dialog("close"); 
 
      } 
 
      } 
 
     }); 
 
     }); 
 
    } 
 

 
    return valid; 
 
    }); 
 
});

.val-noshow { 
 
    display: none; 
 
} 
 
.error { 
 
    border: 1px #F00 solid; 
 
    color: #F00; 
 
} 
 
.valid { 
 
    border: 1px #979 solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" /> 
 
<form method='post' action='submit.php'> 
 

 
    input 1: 
 
    <input type="text" id="input1" name="input1" class="in1"> 
 
    <br>input 2: 
 
    <input type="text" id="input2" name="input2" class="in2"> 
 
    <br>input 3: 
 
    <input type="text" id="input3" name="input3" class="in3"> 
 
    <br> 
 
    <input type="submit" value="Submit" id="submit" name="submit"> 
 
</form> 
 

 
<div id="dialog-input" title="Error" class="val-noshow"></div>

Answer 2

您正阻止默认情况下，所以不会触发调用 “submit.php”。

尽量避免<input type="submit" />，使用<button>。它有很多优点。 请仔细阅读：

input type="submit" Vs button tag are they interchangeable?

Difference between <input type='button' /> and <input type='submit' />

改变对后，在点击验证表单，然后调用手动submit.php。

Answer 3

行event.preventDefault()正在阻止表单提交。

添加行$('this').closest('form').submit()前return valid;