擬似クラスの作成方法：無効な入力に適用フォームを送信した後

Question

フォームを作成し、追加のプラグインなしでHTML5とJSだけでフォームの検証を行うことにしました。だから私の必要な入力はすべてrequired属性を持っています。ここで

は、彼らはまだ触れられていない場合でも、それらは

input:invalid { 
    border: 2px solid #c15f5f 
} 

素敵それは赤にinvalid入力の境界線を設定し、見えるようにするCSSです。

メーリングリストinput:invalidメーリングリストの送信ボタンをクリックした後に、エラーメッセージが表示されますか？

Answer 1

あなたが提出し、ボタンがクリックされたときに、フォームにクラスを追加し、それだけで送信されたフォームに入力フィールドを一致するように、あなたのCSSセレクタを調整することができます。

document.getElementById("submitButton").addEventListener("click", function(){ 
 
\t document.getElementById("testForm").className="submitted"; 
 
});

form.submitted input:invalid{ 
 
    border:1px solid red; 
 
}

<form id="testForm"> 
 
<input type="text" required> 
 
<input type="submit" value="submit" id="submitButton"> 
 
</form>