jQueryの検証 - フォームが送信されないようにしています

Question

jQueryの検証（テストの例）のフォームがあります。それ以上の検証エラーがなくなるまで、すべてが「OK」になり、何かがフォームの送信を妨げています。私の目にはコード内のすべてがうまくいくようですが、うまくいきません。何か案は？どうも。

マイコード：

$(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()を単に削除し、イベント伝搬制御のためにtrueまたはfalseを返すことでjqueryスタイルのイベントコントロールを使用するだけですか？

私はあなたのフィドルを更新しました：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()はフォーム提出を防止しています。 `ので、ここでuはsubmiting R;

はuが` event.preventDefault（）を使用して、rはreturn valid;