2012-02-14 9 views
3

私のやっていることは、フォームのサブミットボタンであるpreventDefault()をクリックして、何らかの計算をしてから、フォームを送信する代わりにajax呼び出しを行うことです。フォームが送信されない場合でもhtml5検証を使用しますか?

フォームが送信されていなくても、javascriptを使用して強制的にhtml5バリデーターを起動する方法はありますか?

$('#submitButton').click(function (e) { 
     e.preventDefault(); //stop the form from submitting 

     //Do computation 

     $.post('/comments', values, function(results) { 
      hideForm($('#new_comment_' + parentId)); 
      parent.children('.children').prepend(results); 
     }, 'html'); 
    }); 
+0

はい、私はJavaScriptで私自身の検証をロールバックすることができますが、HTML5の必要=「必須」タグが素晴らしく、簡単で、あなたのためにきちんと見て、ポップアップGUIを設定します。少ない作業と少ないコード複雑さは常にプラスですが、html5の検証を使用するにはあまりにも多くの作業が必要になります。私は自分のjavascriptを作成できます。 –

答えて

8

最新のChromeとFirefoxでうまく動作します。ただ、e.preventDefault()<form>上:

HTML:

<form method="post" action="test.html"> 
    <input type="text" required></input> 
    <input type="submit" value="Submit"> 
</form> 

jQの:

$('form').submit(function(e){ e.preventDefault(); }); 

例:HTML5の制約を使用してhttp://jsfiddle.net/elclanrs/2nnLc/2/

+2

ああ、送信ボタンの代わりにフォーム送信をキャッチします。もっと賢いアイデアありがとう:) –

3

フォームオブジェクトにはいくつかの新しいメソッドがあります。たとえば、フォームオブジェクトでcheckValidity()を呼び出して入力を確認できます。

<form method="post" action="test.html" id="myForm"> 
    <input type="text" required></input> 
    <input type="submit" value="Submit" id="submitButton"> 
</form> 

<script type="text/javascript"> 
    $('#submitButton').click(function (e) { 
     e.preventDefault(); 
     alert($("#myForm").get()[0].checkValidity()); 
    }) 
</script> 
関連する問題