HTML5検証 - document.getElementById（ 'inputID'）を無効にします。validity.validの値

Question

私は両方のクライアント側のサーバー側の電子メール検証を実行しようとしています&。

私は、電子メールでのクライアント検証が必要になります。

<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required> 

電子メールが存在しており、それがない場合場合は、サーバー側の検証を行うもあります - 私は（invalid）検証が失敗することを必要とするが、 。

どのようにこの種の機能を実現できますか？ document.getElementById('inputID').validity.validプロパティをfalseに変更する方法はありますか？

Answer 1

setCustomValidityメソッドを使用できます。 error paramはそれがフォームの提出を防ぎ、カスタムメッセージを表示します空でない場合は、次の

document.getElementById('inputID').setCustomValidity('Email already exists!');

<form> 
 
    <input id="inputID" required /> 
 
    <input type="submit" /> 
 
</form>

あなたは私のスニペットで見ることができるように、それは常にフィールドが空でない場合でも、メッセージが表示され、電子メールは有効です。また、フォーム提出を防止します。あなたはそれはあなたがcheckValidityメソッドを呼び出す必要がありブラーに確認したい場合は

document.getElementById('inputID').setCustomValidity(''); 

編集

：

は、フォームの送信を渡すにはあなただけのparamとして空の文字列を使用してこのメ​​ソッドを呼び出す必要があります：

document.getElementById('inputID').onblur = function(e) { 
    e.target.checkValidity(); 
};