入力タイプが「送信」でない場合のHTML5の検証

Question

フィールドの検証にHTML5を使用しています。ボタンクリックでJavaScriptを使用してフォームを送信しています。しかし、HTML5の検証は機能しません。入力タイプがsubmitの場合にのみ機能します。 JavaScriptのバリデーションやタイプをsubmitに変更する以外のことはできますか？私は機能submitform()にフォームを送信してい

<input type="text" id="example" name="example" value="" required> 
<button type="button" onclick="submitform()" id="save">Save</button> 

：

これは、HTMLコードです。

Answer 1

HTML5フォームの検証プロセスは、フォームが送信ボタンを介して送信される状況に限定されます。 Form submission algorithmは、フォームがsubmit()メソッドを介して送信されたときに検証が実行されないことを明示的に示しています。どうやら、JavaScriptを使ってフォームを送信すると、検証が行われるはずです。

ただし、checkValidity()メソッドを使用すると、HTML5属性で定義された制約に対して（静的な）フォーム検証をリクエストできます。 HTML5フォームの検証でブラウザと同じエラーメッセージを表示したい場合は、validityMessageプロパティがフォームではなくフィールド（コントロール）のプロパティであるため、すべての制約付きフィールドをチェックする必要があります。 。単一制約フィールドの場合は、提示場合のように、これは当然のは簡単です：

function submitform() { 
    var f = document.getElementsByTagName('form')[0]; 
    if(f.checkValidity()) { 
    f.submit(); 
    } else { 
    alert(document.getElementById('example').validationMessage); 
    } 
} 

Answer 2

は、あなたがあなたの入力を囲むformタグを使用する必要があります<form ....... onsubmit="submitform()">

Answer 3

を行うことによってsubmitform()の機能を実行することができます<button type="submit">で試してみてください。そして入力タイプsubmit。
これは機能します。

<form id="testform"> 
<input type="text" id="example" name="example" required> 
<button type="submit" onclick="submitform()" id="save">Save</button> 
</form> 

HTML5検証は送信ボタンのみで動作するため、そこに保持する必要があります。 フォームのイベントハンドラを記述してデフォルトアクションを防止することで、有効な場合でもフォームの送信を回避できます。

document.getElementById('testform').onsubmit= function(e){ 
    e.preventDefault(); 
} 

これは、無効な場合は妥当性確認を行い、有効な場合はフォームを送信しません。

Answer 4

私が遅れる場合がありますが、私がやった方法は、それは隠された入力を提出を作成することでした、とのITを呼び出します送信時にハンドラをクリックします。 （簡単にするためにjqueryのを使用して）ような何か：

<input type="text" id="example" name="example" value="" required> 
<button type="button" onclick="submitform()" id="save">Save</button> 
<input id="submit_handle" type="submit" style="display: none"> 

<script> 
function submitform() { 
    $('#submit_handle').click(); 
} 
</script> 

Answer 5

これを試してみてください：

<script type="text/javascript"> 
    function test 
    { 
     alert("hello world"); //write your logic here like ajax 
    } 
</script> 

<form action="javascript:test();" > 
    firstName : <input type="text" name="firstName" id="firstName" required/><br/> 
    lastName : <input type="text" name="lastName" id="lastName" required/><br/> 
    email : <input type="email" name="email" id="email"/><br/> 
    <input type="submit" value="Get It!" name="submit" id="submit"/> 
</form> 

Answer 6

HTML5の検証作業ボタンタイプが

変更を送信する場合にのみ -

<button type="button" onclick="submitform()" id="save">Save</button> 

To -

<button type="submit" onclick="submitform()" id="save">Save</button> 

Answer 7

私はちょうど最近遭遇したこれを行う新しい方法を追加したいと思います。 submit()メソッドを使用してフォームを送信すると、フォームの検証は実行されませんが、送信ボタンをプログラムでクリックすることはありません。たとえそれが隠されていても。これは、フォームの検証をトリガーする

<form> 
    <input type="text" name="title" required /> 
    <button style="display: none;" type="submit" id="submit-button">Not Shown</button> 
    <button type="button" onclick="doFancyStuff()">Submit</button> 
</form> 

：

フォーム持つ私の場合は

function doFancyStuff() { 
    $("#submit-button").click(); 
} 

またはjQueryの

なし

function doFancyStuff() { 
    document.getElementById("submit-button").click(); 
} 

を、私は、検証や計算の束を行います偽の送信ボタンが押されたときに、私の手作業による検証が失敗した場合、私はプログラムで非表示の送信ボタンをクリックし、フォームの検証を表示します。

ここでは概念を示す非常に単純なjsfiddleです：

https://jsfiddle.net/45vxjz87/1/

Answer 8

あなたが別のボタンを保つため、submit

<button type="submit" onclick="submitform()" id="save">Save</button> 

それとも、送信ボタンを非表示にすることができますし、ボタンの種類を変更しますか、 type = "button"とそのボタンのクリックイベントがある

<form> 
    <button style="display: none;" type="submit" >Hidden button</button> 
    <button type="button" onclick="submitForm()">Submit</button> 
</form>