HTML5での検証。 ：提出後の無効なクラス

Question

私はフォームを作成していますが、:invalidセレクタを使用して「必須」入力フィールドに赤い枠線を付ける場合は、ユーザーが入力せずにサブミットを押したときに赤い枠線を表示しますページが読み込まれます。このような警告をユーザに与えるのは、少なくとも1度は彼等に記入する機会を与える前に非友好的なようです。

フォームを送信しようとした後でのみ、これらのフィールドが強調表示される方法はありますか？別の方法では、送信をクリックした後にのみ検証を実行する方法がありますか？ ）

Answer 1

いいえ箱から何もありません。

Mozillaは '：-moz-ui-invalid'という非常にシンプルなもののために独自の擬似クラスを持っています。あなたはこのような何かを達成したい場合は、制約の検証DOM-APIを使用する必要があります。

if(document.addEventListener){ 
    document.addEventListener('invalid', function(e){ 
     e.target.className += ' invalid'; 
    }, true); 
} 

またできないブラウザをポリフィル、だけでなく、似-moz-のようなものを追加しますだけでなく​​を、使用することができますすべてのブラウザに無効です（.form-ui-invalid）。

Answer 2

もう1つの方法は、ロード時にJavaScriptを使用してhide-hintsクラスを入力に追加することです。ユーザーがフィールドを変更すると、クラスが削除されます。

あなたのCSSでは、input:not(.hide-hints):invalidにスタイリングを適用します。つまり、エラースタイリングは、JavaScriptのないユーザーに対しても表示されます。'必要な' 検証のため

Answer 3

方法1 - 'データ' 属性を使用し

<input type="text" data-required="1"> 

<script type="text/javascript"> 
// submit button event 
$('#form-submit-btn').click(function(event) { 
    // set required attribute based on data attribute 
    $(':input[data-required]').attr('required','true'); 

    // since required attribute were not set (before this event), prevent form submission 
    if(!$('#form')[0].checkValidity()) 
     return; 

    // submit form if form is valid 
    $('#form').submit(); 

}); 
</script> 

Answer 4

旧 - 設定は、フォーム上の各要素の属性が

// submit button event 
$('#form-submit-btn').click(function(event) { 
    // set required attribute for each element 
    $('#elm1, #elm2').attr('required','true'); 

    // since required attribute were not set (before this event), prevent form submission 
    if(!$('#form')[0].checkValidity()) 
     return; 

    // submit form if form is valid 
    $('#form').submit(); 

}); 

方法2を提出する '必要'それは便利だと思うかもしれない人たちのために：私は、フォームを提出しようとするとクラスをフォームに追加する小さなスクリプトを作ったので、別々に提出することがttempted：提出しようとしている

今

window.addEventListener('load', function() { 

    /** 
    * Adds a class `_submit-attempted` to a form when it's attempted to be 
    * submitted. 
    * 
    * This allows us to style invalid form fields differently for forms that 
    * have and haven't been attemted to submit. 
    */ 
    function addFormSubmitAttemptedTriggers() { 

     var formEls = document.querySelectorAll('form'); 

     for (var i = 0; i < formEls.length; i++) { 

      function addSubmitAttemptedTrigger(formEl) { 

       var submitButtonEl = formEl.querySelector('input[type=submit]'); 

       if (submitButtonEl) { 
        submitButtonEl.addEventListener('click', function() { 
         formEl.classList.add('_submit-attempted'); 
        }); 
       } 

      } 

      addSubmitAttemptedTrigger(formEls[i]); 

     } 

    } 

    addFormSubmitAttemptedTriggers(); 

}); 

フォームはクラス_submit-attemptedを取得しますので、あなただけのこれらのフィールドに赤いボックスシャドウを与えることができます：

input { 
    box-shadow: none; 
} 

form._submit-attempted input { 
    box-shadow: 0 0 5px #F00; 
} 

Answer 5

を、私はこのアプローチを使用しました私のプロジェクトのために、無効なフィールドは後にのみ提出強調表示されますので：

HTML：

<form> 
    <input type="email" required placeholder="Email Address"> 
    <input type="password" required placeholder="Password"> 
    <input type="submit" value="Sign in"> 
</form> 

を

CSS：

input.required:invalid { 
    color: red; 
} 

JS（jQueryの）：

$('[type="submit"]').on('click', function() { 
    // this adds 'required' class to all the required inputs under the same <form> as the submit button 
    $(this) 
     .closest('form') 
     .find('[required]') 
     .addClass('required'); 
}); 

Answer 6

非常にシンプルなだけ#ID使用：無効を：ではなく、ページのロードに焦点を当てた場合にのみ検証を行い

を集中