62

フィールドの検証に 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()。

4

9 に答える 9

90

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);
  }
}
于 2013-05-23T08:01:50.843 に答える
14

私は遅れているかもしれませんが、私が行った方法は、非表示の送信入力を作成し、送信時にクリックハンドラーを呼び出すことでした。次のようなもの（簡単にするために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>
于 2013-10-10T08:44:38.673 に答える
12

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

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

于 2013-05-23T07:37:40.427 に答える
5

やって みると<button type="submit">の機能を実行できますsubmitform()<form ....... onsubmit="submitform()">

于 2013-05-23T07:24:19.113 に答える
4

2019 更新: HTMLFormElement.reportValidity()の使用により、検証エラーの報告が、受け入れられた回答の時よりも簡単になりました。これは、有効性をチェックするだけでなくcheckValidity()、検証エラーをユーザーに報告します。

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

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

function submitform() {
  var f = document.getElementsByTagName('form')[0];
  if(f.reportValidity()) {
    f.submit();
  }
}
于 2019-08-16T02:07:48.330 に答える
3

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

変化する - 

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

に - 

<button type="submit"  onclick="submitform()" id="save">Save</button>
于 2015-07-31T08:28:07.607 に答える
2

これを試してください：

<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>
于 2014-01-05T05:20:03.100 に答える