web-dev-qa-db-ja.com

送信ボタンを使用せずに標準のHTML5検証（フォーム）をトリガーしますか？

送信ボタンを使用せずにフォームで標準のHTML5検証をトリガーする方法を知っている人はいますか？ （JavaScriptまたはjQuery）。

notPOST/GETリクエストを送信し、検証のみを行います。

javascriptjqueryformshtml5
71
Mattias Wolff

この質問 に対する受け入れられた答えは、あなたが探しているもののようです。

要約：送信のイベントハンドラーで、event.preventDefault()を呼び出します。

21
Rick Liddle

いくつかの調査の後、私はあなたの質問の答えになるはずの次のコードを思いつきました。 （少なくともそれは私のために働いた）

最初にこのコードを使用してください。 $(document).readyは、フォームがDOMにロードされたときにコードが実行されることを確認します。

$(document).ready(function()
{
    $('#theIdOfMyForm').submit(function(event){
        if(!this.checkValidity())
        {
            event.preventDefault();
        }
    });
});

次に、コードで$('#theIdOfMyForm').submit();を呼び出すだけです。

UPDATE

ユーザーがフォームで間違ったフィールドを実際に表示したい場合は、event.preventDefault();の後に次のコードを追加します

$('#theIdOfMyForm :input:visible[required="required"]').each(function()
{
    if(!this.validity.valid)
    {
        $(this).focus();
        // break
        return false;
    }
});

最初の無効な入力に焦点を当てます。

31
DraughtGlobe

reportValidity を使用できますが、ブラウザのサポートはまだ不十分です。 Chrome、Opera、Firefoxでは動作しますが、IEやEdgeやSafariでは動作しません。

var myform = $("#my-form")[0];
if (!myform.checkValidity()) {
    if (myform.reportValidity) {
        myform.reportValidity();
    } else {
        //warn IE users somehow
    }
}

（ checkValidity はより良いサポートを持っていますが、IE <10でも動作しません。）

15
mhm

Html5検証を機能させるには、フォームを送信する必要があります。必要なものを取得する方法があります。コードを設定します：

<body>
    <h1>Validation Example</h1><br />
    <h2>Insert just 1 digit<h2>
    <form id="form" onsubmit="return false">
        <label>Input<input type="text" pattern="[0-9]" id="input" /></label> 
        <input type="submit" class="hide" id="inputButton">         
    </form>
</body>

例を参照してください here

注：form.submit（）を使用しても機能しませんでした。そこで、キーアップ時にトリガーする非表示の送信ボタンを作成しました。理由を聞かないでください。たぶん誰かがそれを明確にすることができます。

11
john.dou.2011

簡単な答え、いいえ、フォームを送信する前にhtml5バブルのデフォルトの機能を「トリガー」する方法はありません。特定の入力でcheckValidity()できますが、やはり希望どおりに動作しません。検証が完了した後でもフォームを送信したい場合、デフォルトを防ぐことはできませんが、次の方法でこのスタイルを処理できます。

検証cssスタイルを適用したくないフォームでは、novalidate属性をフォームに追加するだけです。

HTML：

<form name="login" id="loginForm" method="POST">
    <input type="email" name="username" placeholder="Email">
    <input type="password" name="password" placeholder="Password">
    <input type="submit" value="LOG IN" class="hero left clearBoth">
</form>

SCSSを使用していない場合は、SCSSを検討することを強くお勧めします。管理しやすく、記述しやすく、複雑さが軽減されています。注：フィドルの例では、これがコンパイルする正確なcssがあります。また、バブルスタイルの例を含めました。

SCSS：

form:not([novalidate])            {
  input, textarea                 {
    &:required                    {background: transparent url('/../../images/icons/red_asterisk.png') no-repeat 98% center;}
    &:required:valid              {background: transparent url('/../../images/icons/valid.png') no-repeat 98% center; @include box-shadow(0 0 5px #5cd053);border-color: #28921f;}
    &:not(:focus):valid           {box-shadow: none;border: 1px solid $g4;}
    &:focus:invalid               {background: transparent url('/../../images/icons/invalid.png') no-repeat 98% center;  @include box-shadow(0 0 5px #d45252); border-color: #b03535}  
  }
}
span.formHintBubble {position:absolute; background:$g7; margin-top:50px;@include borderRadius(10px); padding:5px 40px 5px 10px; color:white; @include opacity(0.9); @include box-shadow(1px 1px 6px 1px rgba(0,0,0,0.2));
  &:after {
     @include triangle(30px, $g7, up); content: " "; margin-bottom:27px; left:25px;
  }
  .cross {background:black; border:1px solid $g3; @include borderRadius(10px); width:15px; height:15px; color:#fff; display:block; line-height:15px; position:absolute; right:5px; top:50%; margin-top:-7.5px; padding:0; text-align:center; font-size:10px; cursor:pointer;}
}

JAVASCRIPT：

ここでは、デフォルトのメッセージを使用して独自の「バブル」またはエラーメッセージボックス内でそれらを継承するために、ファンキーなことを行うことができます。

var form    = $('form');
var item    = form.find(':invalid').first();
var node    = item.get(0);                       
var pos     = item.position();                
var message = node.validationMessage || 'Invalid value.'; 
var bubble  = $('<span/>').html('<span class="formHintBubble" style="left: ' + pos.left  + 'px; top:' + pos.top + 'px;">' + message + '<div class="cross">X</div></span>').contents();        
bubble.insertAfter(item);

デモ：

http://jsfiddle.net/shannonhochkins/wJkVS/

楽しんで、他の人がHTML5フォーム検証で役立つことを願っています。

シャノン

2
Shannon Hochkins

これは、@ mhmによって提案されたソリューションの実装であり、jQueryの使用を破棄しました。

変数formIdにはフォームのIDが含まれ、msgはアプリケーションのメッセージを含むオブジェクトです。

この実装は、ネイティブHTML 5エラーメッセージでユーザーに通知しようとし、不可能な場合は一般的なフォームエラーメッセージを警告します。

エラーがない場合、フォームを送信します。

let applyForm = document.getElementById(formId);

if (!applyForm.checkValidity()) {
  if (applyForm.reportValidity) {
    applyForm.reportValidity();
  } else {
    alert(msg.ieErrorForm);
  }
} else {
  applyForm.submit();
}
1
Dayron Gallardo

私はもっ​​と簡単だと思う：

$('submit').click(function(e){
if (e.isValid())
   e.preventDefault();
//your code.
}

これにより、フォームが有効になるまで送信が停止します。

1
aleXela

他の回答で述べたように、event.preventDefault（）を使用してフォームの送信を防ぎます。

使用できる小さなjQuery関数を作成する前にフォームを確認するには（要素にはIDが必要です！）

(function( $ ){
    $.fn.isValid = function() {
        return document.getElementById(this[0].id).checkValidity();
    };
})( jQuery );

使用例

 $('#submitBtn').click( function(e){

        if ($('#registerForm').isValid()){
            // do the request
        } else {
            e.preventDefault();
        }
    });
1
Karl Adler

form.submit（）は機能しません。HTML5検証がフォーム送信前に実行されるためです。送信ボタンをクリックすると、HTML5検証がトリガーされ、検証が成功した場合にフォームが送信されます。

1
p5yk0

私は使っていました

objectName.addEventListener('click', function() {
event.preventDefault();
}

しかし、その表示エラー "イベントは未定義"ですので、この場合は次のようなイベントパラメータを使用します

objectName.addEventListener('click', function(event) {
event.preventDefault();
}

今ではうまく動作します

0
sms247

古いトピックであることは知っていますが、非常に複雑な（特に非同期の）検証プロセスがある場合は、簡単な回避策があります。

<form id="form1">
<input type="button" onclick="javascript:submitIfVeryComplexValidationIsOk()" />
<input type="submit" id="form1_submit_hidden" style="display:none" />
</form>
...
<script>
function submitIfVeryComplexValidationIsOk() {
    var form1 = document.forms['form1']
    if (!form1.checkValidity()) {
        $("#form1_submit_hidden").click()
        return
    }

    if (checkForVeryComplexValidation() === 'Ok') {
         form1.submit()
    } else {
         alert('form is invalid')
    }
}
</script>
0
Nadi h

この関数が入力検証を呼び出すHTMLFormElement.reportValidity（）を試してください。

0
Lex Feria