This post is also available in: 日本語 (Japanese)

AngularJS/HTML5を使う時のフォームバリデーションの方法、メモとしてサンプルコードを書いています。

HTML5のフォームバリデーション

<form name="sampleform">
	<input type="text" name="fk" placeholder="First Keywords" pattern="[a-zA-z]" title="AAAAAAAAAAAAAA" required />
	<input type="text" name="sk" placeholder="Second Keywords" pattern="[a-zA-z]" title="BBBBBBBBBBBBBB" required />
	<input type="submit" value="Submit!"  required />
</form>

HTML5のフォームバリデーション機能を無効にしたい場合(AngularJSの機能にてバリデーションを行う時など)には novalidate を追加する。

<form name="sampleform" novalidate>

required で入力必須にしているけれども Submit ボタンを押せるようにしたい場合には formnovalidate を追加するらしいです。

<input type="submit" value="Submit!" formnovalidate />

AngularJSのフォームバリデーション

まずテストであっても ng-model だけは書いておかないと、AngularJSのフォームバリデーションは動作しません。

<form name="sampleform" ng-controller="SampleCtrl" ng-submit="submit()" novalidate>

	<label>
		<input type="text" name="fk" ng-model="sample.fk" placeholder="First Keywords" required ng-pattern="/^[a-zA-z]*$/" ng-trim="false" />
	</label>
	<div class="error" ng-show="sampleform.$invalid">
		<small class="error" ng-show="sampleform.fk.$error.required">Required!</small>
		<small class="error" ng-show="sampleform.fk.$error.pattern">Alphabet Words Only!</small>
	</div>

	<label>
		<input type="text" name="sk" ng-model="sample.sk" placeholder="Second Keywords" required ng-pattern="/^[a-zA-z]*$/" ng-trim="false" />
	</label>
	<div class="error" ng-show="sampleform.$invalid">
		<small class="error" ng-show="sampleform.sk.$error.required">Required!</small>
		<small class="error" ng-show="sampleform.sk.$error.pattern">Alphabet Words Only!</small>
	</div>

	<input type="submit" ng-disabled="!sampleform.$valid" value="Generate!" required />
	<!-- start test -->
	<p>{{sampleform.$valid}}</p>
	<p>{{sampleform.$dirty}}</p>
	<!-- end test -->
</form>

form に novalidate を追加することによって、HTML5とAngularJSのバリデーションがコンフリクトしないようにします。

バリデーションエラーの表示は ng-messages を使う方法もあるみたいですが、上記のサンプルでは ng-show で表示させています。

submit ボタンに ng-disabled を設定することによって、バリデーションエラーが発生していると submit ボタンが有効にならないようにすることができます。