入力検証

このサンプルは、HTML5ネイティブ検証やAngularJSのフォーム検証を使用してフィールドを検証するために、wjValidationErrorディレクティブをどのように使用できるかを示します。

wjValidationErrorディレクティブには、エラー文字列を返す式が含まれます。この文字列が空の場合、要素は有効と見なされます。文字列が空でない場合、フィールドは無効と見なされ、文字列はエラーメッセージとして使用されます。

たとえば、下のフォームには、次のように定義されたパスワード確認フィールドがあります。

<input type="password"
    placeholder="パスワード" 
    name="pwd" ng-model="thePwd" 
    required pattern=".{2,}" title="2文字以上を入力してください。" />
<input type="password"
    placeholder="パスワードの確認"
    name="chk" ng-model="chkPwd"
    wj-validation-error="chkPwd != thePwd ? 'パスワードが一致しません。' : ''" />

また、このフォームには、Wijmo InputDateコントロールとInputFieldコントロールが含まれます。これらのコントロールにはminプロパティとmaxプロパティがあり、簡単な検証を行って、実際にユーザーが無効なデータを入力できないようにすることができます。ただし、このサンプルでは、Wijmo入力コントロールをネイティブ入力要素と同様に検証できることを示すために、これらのプロパティを使用しませんでした。

どちらかのフォームでデータを入力してみて、何が起きるかを確認してください。

左側のフォームは、検証エラーを赤線で示します。ブラウザによっては、無効な入力要素にツールチップが表示されます。いずれかのフィールドが無効な状態のときに[アカウントの作成]を押すと、最初の無効なフィールドにエラーメッセージが表示されます。

右側のフォームの場合は、フィールドを変更し、フォーカスを次の要素に移動すると、検証エラーが表示されます。一度に複数のエラーが表示されることもあります。エラーがなくなるまで、[アカウントの作成]ボタンは無効になります。

HTML5にはいくつかの検証属性が指定されていますが、すべてのブラウザがそれらすべてをサポートしているわけではありません。たとえば、IE11はHTML5の'minlength'属性をサポートしていますが、Chromeはサポートしていません。このサンプルでは、'pattern'属性を使用してこの制限に対処しました。また、'wj-validation-error'ディレクティブまたは'ng-minlength'ディレクティブを使用することもできます。

HTML5 + wjValidationError

AngularJSフォーム検証

名前には2文字以上が必要です。
有効な電子メールアドレスが必要です。
パスワードには4文字以上が必要です。
パスワードが一致しません。
今日より後の日付を選択してください。
午前9時以降の時間を選択してください。