入力が変更された後にのみ入力を検証するにはどうすればよいですか？

Question

おそらくこれは疑似疑問ですが、私は単純な解決策（特別なHTML5属性のようなもの）を見つけることができませんでした。例えば

私はemailフィールドの有効な検証との単純な形式があります：私はこれでページを開いていたときに、そう

input:valid { 
    border: 1px solid green; 
} 
input:invalid { 
    border: 1px solid red; 
} 

：

<form> 
    <input required type="email" placeholder="email@gmail.com"></input> 
</form> 

そして:valid, :invalid pseudoclassesためのいくつかのスタイルをフォームの場合、入力はすでに赤い枠で囲まれているため、空です。質問は、ユーザーがsmthを変更した後でのみ、どのように検証を有効にすることができますか？

Answer 1

あなたはonchange eventを使用することができ、以下を参照してください。あなたのCSS、使用クラスで

<!-- added a ID to get it easier later --> 
<input required id="myInput" type="email" placehodler="email@gmail.com"></input> 

をあなたのスタイルを設定する：

input.valid { 
    border: 1px solid green; 
} 
input.invalid { 
    border: 1px solid red; 
} 

をあなたのJavaScriptで：

document.getElementById('myInput').onchange = function(){ 
    // validation code here 

    this.classList.add('valid') // if validation is true 
    this.classList.add('invalid') // if validation is false 
} 

Answer 2

入力値ますユーザーが押したすべてのキーで動的にチェックすることができます。要件を自分で調整することができます。

var input = document.getElementById('input'); 
 

 
function validate(){ 
 
    if (input.value.length > 2) { 
 
    input.className = 'valid'; 
 
    } else { 
 
    input.className = 'invalid'; 
 
    } 
 
}

.valid { 
 
    border: 1px solid green; 
 
} 
 
.invalid { 
 
    border: 1px solid red; 
 
}

<form> 
 
    <input required type="email" placehodler="email@gmail.com" id='input' onkeyup='validate()'> 
 
</form>

Answer 3

あなたはこれを達成するための方法の広いオープンセットを持っています。私は最も簡単なものに行くでしょう：blur || input。

イベントはinputまたはblurに添付して、いつ発生するかを検証できます。違いは、blurは、ユーザが別の要素にフォーカスするとき（サブミットボタンをクリックして別の入力に移動し、ページ内の他の場所をクリックしたときなど）呼び出され、inputが入力中に何かを変更した直後ユーザがペーストしたりカットしたりするときにも発生します。 inputは入力要素を聞く "公式の" html5の方法です。

document.getElementById('emailInput').oninput = function(){ 
    // validateinput 
} 

また、あなたはblurと全く同じであるが、それは、ユーザーがコンテンツを変更した場合にのみ発動changeイベント、のために行くことができます。 「悪い」ことはblurと同じです：書き込み中のライブ検証はありません。

Answer 4

querySelectorを使用すると、cssではなくvalidとunvalidを区別できます。 changeイベントの代わりにkeyupまたは​​を使用する必要があります。変更するには、再確認して確認する必要があります。

JS

myform.querySelector('input').addEventListener('keyup', function() { 
    if (myform.querySelector('input:invalid')) myform.querySelector('input:invalid').style.border = "1px red solid"; 
    else myform.querySelector('input:valid').style.border = "1px solid green"; 
}); 

HTML

<form id="myform"> 
    <input required type="email" placeholder="email@gmail.com"></input> 
</form>