web-dev-qa-db-ja.com

検証が失敗した場合にフォーム送信を停止する方法

更新：私の質問はHow to prevent the form submit if the validation failsに関するものです

リンクは私の問題を解決しません

ちょうど私がやっていることを繰り返します：入力フィールドがたくさんあるフォームがあり、ユーザーが送信ボタンを押すと、属性required="required"を使用してフォームを検証します。 JavaScriptを見ると、ユーザーがフォームを送信するとdivが表示されます。

これが解決することを願っています。

更新を終了

フォームの検証に失敗した場合、フォームの送信を停止するにはどうすればよいですか？

<input class="form-control" data-val="true" id="SerialNumber" name="SerialNumber" required="required" type="text">

<button type="submit" name="rsubmit" class="btn btn-success">Submit</button>

 //loading message:
 $("form").submit(function (e) {
     $("#loading").show();
 });
javascriptjqueryformsmodel-view-controller
11
Nick Kahn

私は問題を修正できました：

最初にページに参​​照を追加します。

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>

次に、このチェックを行います：

        $("form").submit(function () {
            if ($(this).valid()) {  //<<< I was missing this check
                $("#loading").show();
            }
        });
5
Nick Kahn

検証が失敗した場合、e.preventDefault（）とfalseを返すという2つのことを行う必要があります。

あなたの例では、与えられた入力で、擬似コードは次のようになります：

$("form").submit(function (e) {
   var validationFailed = false;
   // do your validation here ...
   if (validationFailed) {
      e.preventDefault();
      return false;
   }
});
13
Farside

このようなフォームのonsubmitハンドラーで検証コードを記述します

<form onsubmit="return Validation()">
    <input class="form-control" data-val="true" id="SerialNumber" name="SerialNumber" required="required" type="text">

    <button type="submit" name="rsubmit" class="btn btn-success">Submit</button>

    <script>
        function Validation(){
        //Do all your validation here
        //Return true if validation is successful, false if not successful
        //It will not submit in case of false.
        return true or false;
        }
    </script>
</form>
2
Cheezy Code