Friday, 13 September 2013

show validation error messages on submit in angularjs

show validation error messages on submit in angularjs

I have a form which need to show validation error messages if clicked submit.
Here is a working plunker
<form name="frmRegister" ng-submit="register();" novalidate>
<div>
<input placeholder="First Name" name="first_name" type="text"
ng-model="user.firstName" required />
<span ng-show="frmRegister.first_name.$dirty &&
frmRegister.first_name.$error.required">First Name is
required</span>
</div>
<div>
<input placeholder="Last Name" name="last_name" type="text"
ng-model="user.lastName" required />
<span ng-show="frmRegister.last_name.$dirty &&
frmRegister.last_name.$error.required">Last Name is
required</span>
</div>
<div>
<input placeholder="Email" name="email" type="email"
ng-model="user.email" required />
<span ng-show="frmRegister.email.$dirty &&
frmRegister.email.$error.required">Email is required.</span>
<span ng-show="frmRegister.email.$dirty &&
frmRegister.email.$error.email">Invalid Email address.</span>
</div>
<input type="submit" value="Save" />
<span ng-show="registered">YOU ARE NOW REGISTERED USER</span>
</form>
Validation works normally when user start making changes. But it doesn't
show any error messages If clicked submit without entering anything.
Any thought of achieving this?. Or in other way how can I make each input
field $dirty when clicks the Submit button

No comments:

Post a Comment