3

ユーザーがフォームを送信しようとしているかのように、jquery/javascript を使用してネイティブ ブラウザ フォームの検証を実行する方法は?

<form id="myform">
    <input type="text" name="myinput" required />
    <input type="email" name="myemail" required />
</form>

<div id="externalcheck">click to validate</div>

<script type="text/javascript">
   $("#externalcheck").click(function(){
     // how to run html5 browser's validation ?
   });
</scrpipt>
4

3 に答える 3

3

私のajaxの例。

var $form = $('form');

$form.find(':submit').on('click', function (evt) {
    // If the validation fails, return true and the form is processed as standard
    if($form[0].checkValidity() === false) {
      return true;
    }

    evt.preventDefault();

    $.post('/', $form.serialize(), function (response) {
        // Handling the response
    })
})
于 2014-03-14T09:53:39.827 に答える
2

このデモを参照してください：http：//jsfiddle.net/3JeZ6/10/

そのためのHTMLは次のとおりです。

   <style>
      .valid { color: #0d0; }
      .invalid { color: #d00; }
   </style>       
   <form id="testform" action="/">
      <label>Required:
        <input id="required_input" required="">
      </label><br>
      <label>Pattern ([0-9][A-Z]{3}):
        <input id="pattern_input" pattern="[0-9][A-Z]{3}">
      </label><br>
      <label>Min (4):
        <input id="min_input" type="number" min="4">
      </label><br>
        <input type="submit" value="Submit Button" id="sbmt" />
    </form>
    <input type="button" value="Trigger click on submit button" id="test">
    <input type="button" value="Trigger form submit" id="test1">
    <input type="button" value="Run checkValidity" id="test2">

それは私にとってはクレイジーですが、単純なform.submit()ものは実際には機能しません。ただし、送信ボタンのクリックをトリガーすると、すべてが正常に機能します。

$("#test").click(function(){
  $("#sbmt").click(); // works fine
})
$("#test1").click(function(){
  $("#testform").submit();// does not work 
})
$("#test2").click(function(){
  alert($("#testform")[0].checkValidity() ? "valid": "not valid"); // result looks to be correct, but it does not highlight fields that are not valid
})

最新のChromeとFireFoxで次の動作を確認しました

于 2013-01-16T18:54:40.953 に答える
-1

入力を反復処理して、それらが有効かどうかを確認できます。

$("#externalcheck").click(function () {
    $('#myform input').each(function () {
        if (!this.checkValidity()) {
            alert($(this).prop('name') + ' is not valid');
        }

    });
});

http://jsfiddle.net/sWxE9/

于 2013-01-16T18:27:11.687 に答える