37

この小さな HTML5 パスワード フィールドは、oninvalid 属性がなくても完全に機能します (パターンは最小 6 文字です)。

<form>
    <input type="password" name="user_password_new" pattern=".{6,}" required />      
    <input type="submit"  name="register" value="Register" />
</form>

こちらの jsFiddle を参照してください。

しかし、ユーザーの入力がパターンに適合しない場合にカスタム エラー メッセージを表示する oninvalid 属性を追加すると、フィールド全体が有効になることはありません。次のコードを参照してください。

<form>
    <input type="password" name="user_password_new" pattern=".{6,}" oninvalid="setCustomValidity('Minimum length is 6 characters')" required />      
    <input type="submit"  name="register" value="Register" />
</form>

こちらの jsFiddle を参照してください。

あなたは間違いを見つけることができますか？

4

5 に答える 5

114

で値を設定するとsetCustomValidity()、フィールドは無効になります。つまり、ゼロ以外の長さの文字列を設定すると、ブラウザはフィールドが無効であると見なします。他の検証の効果を可能にするために、カスタムの有効性をクリアする必要があります。

<input type="password" name="user_password_new" pattern=".{6,}" required
   oninvalid="setCustomValidity('Minimum length is 6 characters')" 
   oninput="setCustomValidity('')" />
于 2013-06-02T00:54:38.930 に答える
0

メッセージの前にtitle付けても問題ない限り使用できます。'You must use this format:'完全なカスタム メッセージが必要な場合は、うまくいきsetCustomValidity()ました。

于 2015-05-13T14:49:50.050 に答える