jquery - html5が必要でjQuerysubmit（）

Question

html5をフォームに実装しようとしていますが、jqueryを介してフォームを送信し、html5の「required」属性を使用しようとすると問題が発生しました。

これが私のフォームです。非常に単純です。

<form action="index.php" id="loginform">
      <input name="username" required placeholder="username" type="text">    
      <a href="javascript:$('#loginform').submit();">Login</a>
</form>

問題は、フォームがjqueryを介して送信されるときに、必要な属性をバイパスするだけであるということです。requireは、フォームがスクリプトではなくユーザーによって送信された場合にのみ機能するはずなので、アンカーを送信入力に変更すると、完全に機能します。

私のポイントは、jquery .submit（）にhtml5必須の属性を使用させる方法があるかどうかです。

回答ありがとうございます

score 44 · Accepted Answer

私は次のことをしました

<form>
    ...
    <button type="submit" class="hide"></button>
</form>

<script>
    ...
    $(...).find('[type="submit"]').trigger('click');
    ...
</script>

できます！

score 37 · Accepted Answer

あなたはできる

click送信時にイベントをトリガーする
手動で検証を確認してください$("form")[0].checkValidity()
を使用して無効な要素を手動で検索する$("form :invalid")

score 2 · Accepted Answer

あなたが正しいです。HTML5検証は、送信がユーザーによってトリガーされた場合にのみ機能します。これがその方法です。:(

送信時に独自のカスタムメソッドを作成する必要があります。または、html5属性に従ってフィールドを検証するために使用できる優れたプラグインがあります。

ここにプラグインのリンクがあります

score 1 · Accepted Answer

私はまったく同じ問題を抱えていました。最初のクリックでフォームが表示されたため、送信しないように意図的に設定したボタンが1つありました。同じボタンを2回クリックすると、$（'form [name = xxx]'）。submit（）; が起動していて、HTML5検証が機能しないこともわかりました。

私のトリックは、このボタンの最初のクリックが発生した後、動的に送信するようにタイプを変更するようにコード行を追加することでした。

$("#btn").attr("type","submit");

これは魅力のように機能しました！

score 1 · Accepted Answer

https://stackoverflow.com/a/30124479/7915308からの回答

<!DOCTYPE html>
<html>
<body>

<form name="testform" action="action_page.php">
E-mail: <input type="email" name="email" required><br/>
<a href="#" onclick="javascript:console.log(document.testform.reportValidity());return false;">Report validity</a><br/>
<a href="#" onclick="javascript:console.log(document.testform.checkValidity());return false;">Check validity</a><br/>
<a href="#" onclick="javascript:if(document.testform.reportValidity()){document.testform.submit();}return false;">Submit</a>
</form>

</body>
</html>

score 1 · Accepted Answer

ここに私の個人的な解決策の例があります：

var form = $('#loginform');

// Trigger HTML5 validity.
var reportValidity = form[0].reportValidity();

// Then submit if form is OK.
if(reportValidity){
    form.submit();
}

score 0 · Accepted Answer

代わりに関数を呼び出し、その関数を使用して、必要な属性を持つすべてのノードに値があるかどうかを確認できます。

これを行うために利用できるプラグインがいくつかあります：http：//thechangelog.com/post/1536000767/h5validate-html5-form-validation-for-jquery

score 0 · Accepted Answer

html5を検証する方法の例を次に示します。

function validateForm(form) {
  if (form.username.value=='') {
    alert('Username missing');
    return false;
  }
  return true;
}

<form action="index.php" name="loginform" method="post" onsubmit="if (!validateForm(this)) event.preventDefault();">
  <input name="username" placeholder="username" required="required" type="text" />
  <a href="" onclick="event.preventDefault(); $(document.forms.loginform).submit();">Login1</a>
  <a style="cursor:pointer;" onclick="$(document.forms.loginform).submit();">Login2</a>
  <input name="send" type="submit" value="Login3" />
  <input name="send" type="button" value="Login4" onclick="$(document.forms.loginform).submit();" />
</form>

ここに完全なコード。ここで奇妙なことが1つあります。$（document.forms.loginform）.submit（）; 正常に動作しますが、document.forms.loginform.submit（）; 失敗します。誰かが理由を説明できますか？

score -1 · Accepted Answer

作業デモ http://jsfiddle.net/3gFmC/

これがお役に立てば幸いです:)

コード

$('#btn_submit').bind('click', function() {

        $('input:text[required]').parent().show();
        // do whatever;
 });

</ p>

jquery - html5が必要でjQuerysubmit（）

9 に答える 9

Related

Reference