Is there an automated way in Angular to display the error messages for invalid form. For Example, I have the below. It indeed works well in that it doesn't allow the user to submit but it doesn't give the user any automatic feedback to tell them that elements are required. Isn't there an automatic way to get it to print a field is required message by the field if the form is invalid on submit?
<div class="form-center">
<form name="loginform" class="forms" ng-controller="controllers.LoginController">
<fieldset> <legend><h3>Account Login</h3></legend>
<div class="advanced-search-item">
<label>Username:</label><br /> <input type="text" ng-model="username" name="username" placeholder="username" required><span class="error" ng-show="submitted && loginform.username.$error.required">Required!</span>
</div>
<div class="advanced-search-item">
<label>Password:</label><br />
<input type="password" name="password" ng-model="password" placeholder="password" required><span class="error" ng-show="submitted && loginform.username.$error.required">Required!</span>
</div>
<div class="advanced-search-item">
Login
</div>
</fieldset>
</form>
</div>
You will have to add some spans to show errors beside input fields like below
<span class="error" ng-show="submitted && loginform.username.$error.required">Required!</span>
<span class="error" ng-show="submitted && loginform.password.$error.required">Required!</span>
Hopefully you can keep this text in red color, below is the CSS
.error {
padding-left:10px;
color: #F00;
}
when form is submitted and if there are errors it will show above spans
Hope this helps
Related
I am doing one register page using angularjs.
Follows my html code:
<form name="frominline" action="post" class="clearfix form-hidden" id="Register-form">
<div class="col-md-12">
<div class="input-group blmd-form">
<div class="blmd-line">
<input type="text" name="userid" autocomplete="off" id="username" class="form-control" required autofocus="" ng-model="user.name" ng-minlength="3" ng-maxlength="12" ng-model-options="{ allowInvalid: true }">
<label class="blmd-label">User Id</label>
</div>
<p class="login-error" ng-show="frominline.userid.$dirty && frominline.userid.$error.required">
<span style="color : red">required</span>
</p>
<p ng-show="frominline.userid.$error.minlength" class="help-block" style="color:red;">Username is too short.</p>
<p ng-show="frominline.userid.$error.maxlength" class="help-block" style="color:red;">Username is too long.</p>
</div>
<div class="input-group blmd-form">
<div class="blmd-line">
<input type="email" name="email" autocomplete="off" id="email" class="form-control" required autofocus="" ng-model="user.email">
<label class="blmd-label">Email</label>
</div>
<span class="login-error" ng-show="frominline.email.$error.required && frominline.email.$dirty" style="color:red;" ng-model-options="{ allowInvalid: true }">required</span>
<span class="login-error" ng-show="!frominline.email.$error.required && frominline.email.$error.email && frominline.email.$dirty" style="color:red;">invalid email</span>
</div>
<button type="reset" ng-click="resetform(frominline)">reset</button>
</form>
My js code:
app.controller('loginCtrl'['$scope',function('$scope'){
var user = this;
$scope.resetform(form){
user.name='';
user.email='';
$scope.frominline.$dirty = false;
$scope.frominline.$pristine = true;
$scope.frominline.$submitted = false;
}]);
Now, in first image, those are the validation errors.
Now, I hit the reset button and the validation errors are gone but in the second image I got required field.
Can you please help me removing or reseting the whole form on a button click?
I tried with many options like $setPristine() or $setValidity() but i can't fix this issue "required" error message.
Follows the image of the form with only required error message after clicking reset button:
The form is probably cleared, but those input fields are not. When you are display the error for a particular field (e.g. ng-show="frominline.userid.$error.minlength") include the state of the form as well (e.g. ng-show="frominline.$submitted && frominline.userid.$error.minlength").
I try to set an input as required if another input has changed. My need is to require confirm password if password has changed.
I use this on the input of confirm password but it is never required :
ng-required="userForm.Password.$touched"
CodePen
Another question : Is there a way to remove ng-Model="user.ConfirmPassword"? because ConfirmPassword is not necessary on my model "user", isn't it?
You should use the name property instead of id.
Also, this is no valid syntax:
<span class="error" ng-show="userForm.Password.$touched userForm.Password.$error.required">Password is required</span>
It should be:
<span class="error" ng-show="userForm.Password.$touched">Password is required</span>
Then it will work just fine, as long as Password is the name of the input element, not the ID.
You are not using name property, so you can't use form properties for Password and ConfirmPassword...
Also change AND to OR..
here is updated code
<form name="userForm" ng-controller="userController">
<label for="Password">Set a password:</label>
<input type="password" name="Password" id="Password" ng-model="user.Password" required />
<span class="error" ng-show="userForm.Password.$touched">Password is required</span>
<br />
<label for="ConfirmPassword">Confirm the password:</label>
<input name="ConfirmPassword" type="password" id="ConfirmPassword" ng-model="user.ConfirmPassword" ng-required="userForm.Password.$touched" />
<span class="error" ng-show="userForm.Password.$touched || userForm.ConfirmPassword.$touched || userForm.ConfirmPassword.$error.required">Confirm password is required</span>
<br/>
<span>Password: {{user.Password}}</span>
<br/>
<span>Conform Password: {{user.ConfirmPassword}}</span>
</form>
I have a very simple form and a strange behaviour:
<form name='signup_form' novalidate ng-submit=signupForm()>
<div class="row">
<div class="large12 columns">
<label>Email</label>
<input type="email" placeholder="Email"
name="email"
ng-model="signup.email"
required />
<div class="error" ng-show="signup_form.email.$dirty &&
signup_form.email.$invalid">
<small class="error" ng-show="signup_form.email.$error.required">
Email address is required
</small>
<small class="error" ng-show="signup_form.email.$error.email">
This is not a valid email
</small>
</div>
</div>
</div>
<button type='submit' class="button radius">Submit</button>
</form>
Typing email...:
still typing - making it valid...:
Label has disagreed it is showing back when I click anywhere on the page.
Angular.js : https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js
I don't use any custom css.
Chrome Inspect for invalid:
Chrome inspect for valid:
I tried and searched a lot, but no solution. The form validation in my angular app still not working.
I tried for example:
<form data-ng-controller="ValidationController" name="validationForm" novalidate="novalidate">
<div class="form-group">
<label for="username">Mail</label>
<input name="username"
type="email"
data-ng-model="formData.username"
required="required">
<span ng-show="form.username.$invalid">Invalid mail address</span>
</div>
<button type="submit" class="btn btn-primary" data-ng-disabled="formData.$invalid">Submit</button>
<pre>
<tt>formData = {{formData}}</tt><br/>
<tt>formData.$valid = {{formData.$valid}}</tt><br/>
<tt>formData.username.$valid = {{formData.username.$valid}}</tt><br/>
<tt>formData.username.$error = {{formData.username.$error}}</tt><br/>
<hr>
</pre>
</form>
Another one I tried:
<div class="row">
<div class="large-12 columns">
<label>Your email</label> <input type="email" placeholder="Email"
name="email" ng-model="signup.email" ng-minlength=3 ng-maxlength=20
required />
<div class="error-container"
ng-show="signup_form.email.$dirty && signup_form.email.$invalid">
<small class="error" ng-show="signup_form.email.$error.required">
Your email is required. </small> <small class="error"
ng-show="signup_form.email.$error.minlength"> Your email is required
to be at least 3 characters </small> <small class="error"
ng-show="signup_form.email.$error.email"> That is not a valid email.
Please input a valid email. </small> <small class="error"
ng-show="signup_form.email.$error.maxlength"> Your email cannot be
longer than 20 characters </small>
</div>
</div>
</div>
But the validation does not work. If I have to enable the validation? But for this I also didn't find anything. It seems, that validation is still enabled in Angular. But why it does not work in my app? All other things works fine.
Regards
Bytecounter
Try this:
<form data-ng-controller="ValidationController" name="validationForm" novalidate="novalidate">
<div class="form-group">
<label for="username">Mail</label>
<input name="username"
type="email"
data-ng-model="username"
required>
<span ng-show="validationForm.username.$invalid && validationForm.username.$dirty">Invalid mail address</span>
</div>
<button type="submit" class="btn btn-primary" data-ng-disabled="formData.$invalid">Submit</button>
<pre>
<tt>formData = {{validationForm}}</tt><br/>
<tt>formData.$valid = {{validationForm.$valid}}</tt><br/>
<tt>formData.username.$valid = {{validationForm.username.$valid}}</tt><br/>
<tt>formData.username.$error = {{validationForm.username.$error}}</tt><br/>
<hr>
</pre>
</form>
Actually your form is available by its name.
Check this plnkr.
You have some errors there.
First:
ng-show="form.username.$invalid"
You are referencing a variable form that does not exist in your scope. You should reference validationForm:
ng-show="validationForm.username.$invalid"
Second:
data-ng-disabled="formData.$invalid"
You are referencing the model of the input, instead of it's form object, that is, again, validationForm:
data-ng-disabled="validationForm.$invalid"
That should do.
I am using angular validation on an html page, where I have defined a form along with validation on the form. However, when I run the page, all the validations I have used on the page is visible. Is there a way I can hide all the validations?
<form ng-controller="validateCtrl"
name="loginForm" novalidate>
<p>UserName:<br>
<input type="text" name="uName" ng-model="uName" required>
<span style="color:red" ng-show="loginForm.uName.$dirty && loginForm.uName.$invalid && loginForm.uName.$error.required">
Username is required
</span>
</p>
<p>Password:<br>
<input type="text" name="pwd" ng-model="pwd" required>
<span style="color:red" ng-show="loginForm.pwd.$dirty && loginForm.pwd.$invalid">
<span ng-show="loginForm.pwd.$error.required">Password is required.</span>
</span>
</p>
<p>
<input type="submit" ng-click="popupuser()"
ng-disabled="loginForm.$invalid ">
</p>
</form>
<script src="https://code.angularjs.org/1.2.3/angular.min.js"></script>
Your code for form is fine please see here http://jsbin.com/figuve/1/edit
Make sure that your validateCtrl exist otherwise validation will not work plase see here
http://jsbin.com/figuve/2/edit
or
remove ng-controller="validateCtrl" from your form if you don't need it.
please see here http://jsbin.com/figuve/3/edit
You can try use variable to check is form submited, like that
<span ng-show="(loginForm.uName.$dirty || isSubmitted) && loginForm.uName.$error.required">Username is required</span>