web-dev-qa-db-ja.com

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

フィールドの検証にHTML5を使用しています。ボタンクリックでJavaScriptを使用してフォームを送信しています。ただし、HTML5検証は機能しません。入力タイプが submit の場合にのみ機能します。 JavaScript検証を使用するか、タイプをsubmitに変更する以外に何かできますか？

これはHTMLコードです。

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

関数submitform()でフォームを送信しています。

htmlhtml5formsvalidationhtml5-validation
58
I'm nidhin

HTML5フォーム検証プロセスは、送信ボタンを介してフォームが送信される状況に限定されます。 フォーム送信アルゴリズム は、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);
  }
}
78
Jukka K. Korpela

遅れるかもしれませんが、私がやった方法は、非表示の送信入力を作成し、送信時にクリックハンドラーを呼び出すことでした。次のようなもの（簡単にするために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>
13
Bekodo

入力を囲むformタグを使用する必要があります。そして、入力タイプ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();
}

これにより、無効な場合に検証が行われ、有効な場合にフォームが送信されません。

8
Vishwanath

<button type="submit">を試してくださいsubmitform()を実行することで<form ....... onsubmit="submitform()">の機能を実行できます

5
Ahmed

ボタンの種類を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>
4
Jackson Abraham

私が最近遭遇した、これを行う新しい方法を追加したかったのです。 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/

4
Blunderfest

HTML5検証は、ボタンタイプが送信される場合にのみ機能します

変化する - 

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

へ-

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

これを試してください：

<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>
2
Sumeet Patil

2019更新：検証エラーの報告は、 HTMLFormElement.reportValidity（） を使用することにより、承認された回答よりも簡単になりました。これは、checkValidity()などの妥当性をチェックするだけでなく、検証エラーユーザーに。

HTMLFormElement.reportValidity（）メソッドは、要素の子コントロールが検証制約を満たす場合にtrueを返します。 falseが返されると、無効な子ごとにキャンセル可能な無効なイベントが発生し、検証の問題がユーザーに報告されます。

更新されたソリューションスニペ​​ット：

function submitform() {
  var f = document.getElementsByTagName('form')[0];
  if(f.reportValidity()) {
    f.submit();
  }
}
0
Laurent