18

ご存知かもしれませんが、HTML5 仕様<input>では、 や などの要素の新しい属性がいくつかrequiredありpatternます。これは、ユーザー入力を検証する優れた方法として提供され、CSSと疑似セレクターを使用して視覚化することもできます。例

HTML

<input type="number" pattern="\d+" required/>

CSS

input:required:valid {
    border: 1px solid green;
}

input:required:invalid {
    border: 1px solid red;
}

その<input>要素が要素の一部である<form>場合、ユーザーは でそれを送信できませんinvalid state。

<form>ただし、私の質問は、これらの新しい属性を要素なしで使用したい場合はどうすればよいでしょうか? そのようなノードの現在の状態<input>にECMAscript を介して直接アクセスする方法はありますか?

イベントはありますか？リスナーはいますか？

4

2 に答える 2

21

@Zirakが指摘したように、 Constraint Validation APIcheckValidityの一部であるメソッドがあります。

var s = document.createElement('input');
s.checkValidity(); // true
s.required = true;
s.checkValidity(); // false

ただし、checkValidity無効な場合は無効なイベントを発生させます。(フォームは赤い枠で囲まれます。) 代わりにwillValidateプロパティ (またはプロパティ) を使用することもできます。.validity.valid

また、このプロパティは非常に興味深いものです ( Constraint Validation APIvalidityでの各プロパティの意味に関する詳細情報)。

s.validity
    ValidityState
        customError: false
        patternMismatch: false
        rangeOverflow: false
        rangeUnderflow: false
        stepMismatch: false
        tooLong: false
        typeMismatch: false
        valid: false
        valueMissing: true

この記事では、ブラウザー間の実装の違いを指摘しています: http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/ (つまり、いつものように混乱しています)。

invalidフォームの送信時、またはcheckValidityメソッドが呼び出されたときにトリガーされるイベントをリッスンすることもできます。

デモ: http://jsfiddle.net/XfV4z/

于 2013-01-29T15:00:45.850 に答える
6

入力要素には次のvalidityプロパティがあります。

var i = document.getElementsByTagName('input')[0]
i.validity.valid // True or false

console.log(i.validity);

// Logs (when `1` is entered):

 ValidityState
   customError: false
   patternMismatch: false
   rangeOverflow: false
   rangeUnderflow: false
   stepMismatch: false
   tooLong: false
   typeMismatch: false
   valid: true
   valueMissing: false

コピーするつもりはない詳細情報については、Florian Margaineの回答を確認してください。

于 2013-01-29T15:01:52.700 に答える