AngularJS/HTML5:フォームバリデーションのサンプルコード

記事公開日:
最終更新日:

Sponsored Links

This post is also available in: 英語

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

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

web_HTMLvalidate

<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 ボタンが有効にならないようにすることができます。

About
Amelt.net,LLCの創業者で、費用対効果の高い統合webマーケティングによりビジネスパートナーとして継続的にサポート。詳しいより。ブログの更新情報facebookページGoogle+そしてTwitter、またRSSfeedlyLINE@にてお知らせしていますのでフォローよろしくお願い致します。


Sponsored Links