jqueryのは、私はこれを持って私のjqueryの中でデフォルトとブラウザの検証

Question

を防ぎます。 I）は、（この

e.preventDefault必要があります。

私は私の余分なデータ検証を行うまで、私は同様にいくつかの他のチェックを行うためにブートストラップスウィートアラートを使用します。

しかし、これを使用すると、required = "required"タグのあるフィールドの標準的なブラウザ検証ができなくなります。これは「視覚的な」哀れみです。

jQueryの送信を防ぎ、ブラウザの検証を破棄しない方法はありますか？

Answer 1

私はフォームのcheckValidity methodがこれをしないことに驚いています（ブラウザをvalidity checksに設定し、それに応じて状態を設定するなど）。

例：：

$(this).click(function(e) { 
    e.preventDefault(); 
    if (this.form.reportValidity) { // <=== 
     this.form.checkValidity(); // <=== 
    }        // <=== 
    // ... 
}); 

あなたはそれをサポートしていますかどうかを検出し、もしそうなら、それを使用することができますので、彼らは上、提出しない何をサポートreportValidity、（ChromeとFirefoxを含む）

一部のブラウザ。私があなたがクリックしているものがフォーム内にあると仮定しているので、それが入っているフォームを参照しているのはthe form propertyです。彼らもキャンセルフォームの提出とコードのdidnを許可していませんので、私はスタックスニペットを使用していないよ（

var form = $("selector-for-the-form")[0]; // Note getting the raw element 
if (form.reportValidity) { 
    form.reportValidity(); 
} 

例（live copy on jsFiddle）を：いない場合は、フォームを見つけたコード、例えばとthis.formを置き換えます「Tは、スタックスニペットでのFirefoxで正しく動作します。それがjsFiddleのキャンセルフォーム送信と作業を行います）：

HTML：

<p>Click the button without filling in the field:</p> 
<form> 
    <label> 
    Required field: 
    <input type="text" required> 
    </label> 
    <input type="submit" id="btn" value="Click to validate"> 
</form> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

JavaScriptを：私が理解できる限り

$("#btn").on("click", function(e) { 
    e.preventDefault(); 
    this.form.reportValidity(); 
}); 

Answer 2

非常に問題が何であるかを明確しかしないことができます：

1. あなたが
2. の代わりに、あなたの検証チェックが終了したときにフラグを設定デフォルトの動作を妨げる。 あなたのclickファンクション