Angular form validation not working properly - javascript

I have created a form in ionic-angular and applied validations on it.Validations are not working properly.Even all the fields are empty on click of submit button it calls controller function.
Please help me to solve this issue.
html code
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Register</h1>
</ion-header-bar>
<ion-content >
<form name="register" ng-submit="submitDetails(user)" novalidate="">
<div class="list">
<label class="item item-input item-floating-label" style="position:relative;">
<span class="input-label">First Name</span>
<input type="text" placeholder="First Name" ng-model="user.firstName" ng-required="true">
<p ng-show="user.firstName.$invalid && !user.firstName.$pristine" class="help-block">You name is required.</p>
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Email</span>
<input type="email" placeholder="Email" ng-model="user.email" ng-required="true">
<p ng-show="user.email.$invalid && !user.email.$pristine" class="help-block">Enter a valid email</p>
</label>
<label class="item item-input item-floating-label">
<span class="input-label" >Phone no</span>
<input type="number" placeholder="Phone No" ng-model="user.phone" ng-minlength="10" ng-maxlength="10" ng-required="true">
<span class="help-block" ng-show="user.phone.$error.required || user.phone.$error.number">Valid phone number is required</span>
<span class="help-block" ng-show="((user.phone.$error.minlength || user.phone.$error.maxlength) && user.phone.$dirty) ">phone number should be 10 digits</span>
</label>
<input type="submit" class="button button-royal" value="register">
</div>
</form>
</ion-content>
</ion-pane>
Controller code
chatApp.controller('RegisterCntrl', function($scope, $stateParams) {
$scope.user={};
$scope.submitDetails=function(user){
alert("user"+user.firstName);
};
});

This should work
<form name="register_form" ng-submit="submitDetails(user)" novalidate="">
<div class="list">
<label class="item item-input item-floating-label" style="position:relative;">
<span class="input-label">First Name</span>
<input type="text" name="user_first_name" placeholder="First Name" ng-model="user.firstName" ng-required="true">
<p ng-show="register_form.user_first_name.$invalid && !register_form.user_first_name.$pristine" class="help-block">You name is required.</p>
</label>
<!--omitted-->
<input type="submit" class="button button-royal" value="register">
</div>
</form>
Form name is register_form,
<form name="register_form" ng-submit="submitDetails(user)" novalidate="">
Input name is user_first_name,
<input type="text" name="user_first_name" placeholder="First Name" ng-model="user.firstName" ng-required="true">
So validation must pass through those fields
<p ng-show="register_form.user_first_name.$invalid && !register_form.user_first_name.$pristine" class="help-block">You name is required.</p>
Model itself doesn't have $invalid or $pristine properties, so it doesn't make sense
For phone field
<input type="number" name="user_phone" placeholder="Phone No" ng-model="user.phone" ng-minlength="10" ng-maxlength="10" ng-required="true">
<span class="help-block" ng-show="register_form.user_phone.$error.required || register_form.user_phone.$error.number">Valid phone number is required</span>
<span class="help-block" ng-show="((register_form.user_phone.$error.minlength || register_form.user_phone.$error.maxlength) && register_form.user_phone.$dirty) ">phone number should be 10 digits</span>
For further readings, checkout this answer

Use the form name and input name attribute, not ng-model
Give the input a name and use it with form name.
Check the first input in following example.
<label class="item item-input item-floating-label" style="position:relative;">
<span class="input-label">First Name</span>
<input name="firstName" type="text" placeholder="First Name" ng-model="user.firstName" ng-required="true">
<p ng-show="register.firstName.$invalid && !register.firstName.$pristine" class="help-block">Your name is required.</p>
</label>

Related

AngularJS ng-minlength ng-required not working

I am new in AngularJS. I want to set Validation for input like minimum length is 5 and maximum length is 6.
I have to set 5 to 6 Digits only into my textbox.
For this I am using below code but it is not working
<div class="input-wrap lg-input">
<input type="text" name="num" class="form-input" placeholder="Enter 5-6 digits" ng-minlength="5" maxlength="6"
ng-model="profInfo.Number" ng-required="true">
<div class="error" ng-show="profInfoForm.$submitted || profInfoForm.num.$touched">
<span ng-show="profInfoForm.num.$error.required">Required Field</span>
<span ng-show="profInfoForm.num.$error.minlength">Invalid input</span>
</div>
</div>
<div class="button-ctr">
<button class="button" ng-class="profInfoForm.$valid ? 'active' : 'disable'">Next</button>
</div>
Currently this is working like below:
When textbox is empty and I clicked on Next button it showing Required Field error message that is correct.
I cannot type more than 6 digits that is correct.
When I type 1 digit into textbox and clicked on button it showing Required Field error message that is wrong.
When I type 5th digits it showing Invalid input error message that is wrong.
I am using AngularJS v1.5.5.
Change ng-show="profInfoForm.$submitted || profInfoForm.num.$touched" to ng-show="(profInfoForm.num.$dirty || submitted)"
<input type="text" name="num" class="form-input" placeholder="Enter 5-6 digits" minlength="5" maxlength="6" ng-model="profInfo.Number" ng-required="true">
<div class="error" ng-show="(profInfoForm.num.$dirty || submitted)">
<span ng-show="profInfoForm.num.$error.required">Required Field</span>
<span ng-show="profInfoForm.num.$error.minlength">Invalid input</span>
</div>
</div>
Have a look at demo
1) Try out this -
<input type="text" name="num" class="form-input" placeholder="Enter 5-6 digits" ng-minlength="5" ng-maxlength="6" ng-model="profInfo.Number" required>
<div class="error" role="alert">
<span ng-show="profInfoForm.num.$error.required">Required Field</span>
<span ng-show="profInfoForm.num.$error.minlength">Too Short!</span>
<span ng-show="profInfoForm.num.$error.maxlength">Too Long!</span>
</div>
2) But I will prefer this below solution for angular form validations.
<form role="form" name="FORMNAME" ng-submit="vm.submitForm(formData)" novalidate>
<div class="form-group form-md-line-input" ng-class="{ 'has-error' : FORMNAME.num.$invalid && !FORMNAME.num.$pristine}">
<label class="col-md-3 control-label">Number <span style="color:red;">*</span></label>
<div class="col-md-8">
<input type="text" class="form-control" name="num" ng-model="formData.number" placeholder="Enter 5-6 digits" ng-minlength="5" ng-maxlength="6" required>
<span class="help-block" ng-show="FORMNAME.num.$error.required">Please enter name</span>
<span class="help-block" ng-show="FORMNAME.num.$error.minlength">Too Short!</span>
<span class="help-block" ng-show="FORMNAME.num.$error.maxlength">Too Long!</span>
</div>
</div>
</form>
Use bootstrap "has-error" class and with this your element will turn into red if any validation fails, "has-error" class works with control-label, form-control classes.
"novalidate" will block chrome html5 validations.

Angular form validation not working

I am very new to Angular and trying to build signup form, after looking at tutorials I built this form, but its not validating.
Here is the code which I am using:
<div class="signup-cont cont form-container" ng-controller="signinSignUpController">
<form id="login-form" name="signUpForm" ng-submit="submitForm(signUpForm.$valid)" novalidate>
<div class="form-group" ng-class="{ 'has-error' : signUpForm.name.$invalid && !signUpForm.name.$pristine }">
<input type="name" name="name" id="usr-name" class="inpt form-control" placeholder="Your name" ng-model="name" ng-required="true"/>
<label class="control-label" for="name">Your name</label>
<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="submitted && signUpForm.name.$invalid "></span>
<p ng-show="submitted && signUpForm.name.$invalid" class="help-block">You name is required.</p>
</div>
<div class="form-group" ng-class="{ 'has-error has-feedback' : submitted && signUpForm.email.$invalid}">
<label class="control-label" for="email">Your email</label>
<input type="email" name="email" class="inpt form-control" ng-model="email" placeholder="Your email" ng-required="true"/>
<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="submitted && signUpForm.email.$invalid"></span>
<p ng-show="submitted && signUpForm.email.$invalid" class="help-block">Enter a valid email.</p>
</div>
<div class="form-group" ng-class="{ 'has-error has-feedback' : submitted && signUpForm.password.$invalid}">
<label class="control-label" for="password">Your password</label>
<input type="password" name="password" class="inpt form-control" ng-model="password" placeholder="Your Password" ng-required="true"/>
<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="submitted && signUpForm.password.$invalid"></span>
<p ng-show="submitted && signUpForm.password.$invalid" class="help-block">Enter a valid email.</p>
</div>
<div class="submit-wrap">
<input type="submit" class="form-control submit-signup btn btn-black-border btn-default" ng-disabled="signUpForm.$invalid" value="SIGN UP"/>
Terms and conditions
</div>
</form>
</div>
Can someone please help me understand where I am doing wrong.
change ng-model="name" to ng-model="user.name", ng-model="password" to ng-model="user.password" and ng-model="email" to ng-model="user.email".
I have checked using plunker its working fine.
ng-show="submitted && signUpForm.name.$invalid"
What exactly is submitted here? If that is something in the controller, seems like it's set to false & failing the validation. Check out this plunk w/o the submitted flag.

Can we use angular input validation without form

Is there a way to use angular input validation without form. See angular plunker. When I change <form name="myForm"> by <div name="myForm"> the validation does not work anymore.
HTML :
<form name="myForm">
<label>
User name:
<input type="text" name="userName" ng-model="user.name" required>
</label>
<div role="alert">
<span class="error" ng-show="myForm.userName.$error.required">
Required!</span>
</div>
<label>
Last name:
<input type="text" name="lastName" ng-model="user.last" ng-minlength="3" ng-maxlength="10">
</label>
<div role="alert">
<span class="error" ng-show="myForm.lastName.$error.minlength">Too short!</span>
<span class="error" ng-show="myForm.lastName.$error.maxlength">Too long!</span>
</div>
</form>
You need to have form directive because ngModel searches its controller in order to register itself and leverage validation capabilities.
If for layout reasons you can't have form tag (nested <form> tags are invalid) then you can use ngForm directive to achieve the same effect:
<ng-form name="myForm">
<label>
User name:
<input type="text" name="userName" ng-model="user.name" required>
</label>
<div role="alert">
<span class="error" ng-show="myForm.userName.$error.required">
Required!</span>
</div>
<label>
Last name:
<input type="text" name="lastName" ng-model="user.last"
ng-minlength="3" ng-maxlength="10">
</label>
<div role="alert">
<span class="error" ng-show="myForm.lastName.$error.minlength">
Too short!</span>
<span class="error" ng-show="myForm.lastName.$error.maxlength">
Too long!</span>
</div>
</ng-form>
Demo: https://plnkr.co/edit/WlCqNBWtqiGerkQy0Wad?p=preview

angularjs enable submit button when validate confirm message

I have the following register page
<div class="col-md-6 col-md-offset-3">
<h2>Add New User</h2>
<form name="form" ng-submit="vm.register()" role="form">
<div class="form-group"
ng-class="{ 'has-error': form.type.$dirty && form.type.$error.required }">
<label for="type">User Type</label>
<md-radio-group ng-init="vm.user.type=0" ng-model="vm.user.type" required>
<md-radio-button value="0" class="md-primary">Back Office</md-radio-button>
<md-radio-button value="1" class="md-primary md-hue-1"> Mobile </md-radio-button>
<md-radio-button value="2" class="md-primary md-hue-2">Client</md-radio-button>
</md-radio-group>
</div>
<div class="form-group" ng-class="{ 'has-error': form.firstname.$dirty && form.firstname.$error.required }">
<label for="firstname">First name</label>
<input type="text" name="firstname" id="firstname" class="form-control" ng-model="vm.user.firstname" required />
<span ng-show="form.firstname.$dirty && form.firstname.$error.required" class="help-block">First name is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.lastName.$dirty && form.lastName.$error.required }">
<label for="lastname">Last name</label>
<input type="text" name="lastname" id="Text1" class="form-control" ng-model="vm.user.lastname" required />
<span ng-show="form.lastname.$dirty && form.lastname.$error.required" class="help-block">Last name is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.lastName.$dirty && form.lastName.$error.required }">
<label for="company">Company</label>
<input type="text" name="company" id="Text2" class="form-control" ng-model="vm.user.company" required />
<span ng-show="form.company.$dirty && form.company.$error.required" class="help-block">Company is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.Email.$dirty && form.Email.$error.required }">
<label for="email">Email</label>
<input type="text" name="email" id="Text2" class="form-control" ng-model="vm.user.email" ng-pattern="/\s?^[a-z]+[a-z0-9._]+#[a-z]+\.[a-z.]{2,5}$/i" required />
<span ng-show="form.email.$dirty && form.email.$error.required"
class="help-block">Email is required</span>
<span class="help-block" ng-show="form.email.$dirty && form.email.$error.pattern"> Not valid email! </span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control" ng-model="vm.user.username" required />
<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" ng-model="vm.user.password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.confirmpassword.$dirty && form.confirmpassword.$error.required }">
<label for="confirmpassword">Confirm Password</label>
<input type="password" name="confirmpassword" id="confirmpassword" class="form-control" ng-model="vm.user.confirmpassword" valid-password-c required />
<span ng-show="form.confirmpassword.$dirty && form.confirmpassword.$error.required" class="help-block">Confirm Password is required</span>
<span ng-show="!form.confirmpassword.$error.required && form.confirmpassword.$error.noMatch && form.confirmpassword.$dirty" class="help-block">Passwords do not match.</span>
</div>
<div class="form-actions">
<button type="submit" ng-disabled="form.$invalid" class="btn btn-primary">Register</button>
<img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
Cancel
</div>
</form>
</div>
I have 2 problems
1- the Register button is always disabled even if I filled the all fields.
2- during confirm password validation
If I fill the password then fill the confirmpassword with the same value every thing will be good, but if I modified my password again the page will not show that the two passwords is not match

hide default error message in AngularJs

How to hide a default error message in AngularJs? I tried display:none; . But, it won't work. I'm new to AngularJS. I want to hide the default error message and I want to show the error message when user onfocus the input textbox.
<p>
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name" ng-model="firstName" ng-pattern="/^[a-zA-Z\s]*$/" required/>
<span class="error" ng-messages="contact_form.first_name.$error">
<span ng-message="required">First name should not be empty</span>
<span ng-message="pattern" ng-show="contact_form.first_name.$error.pattern">Only alphabets allowed</span>
</span>
</p>
This is what you need, contact_form.first_name.$dirty is used to check if field was changed or not
<form name="contact_form" novalidate>
<p>
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name" ng-model="firstName" ng-pattern="/^[a-zA-Z\s]*$/" required/>
<span class="error" ng-messages="contact_form.first_name.$error">
<span ng-message="required" ng-show="contact_form.first_name.$error.required && contact_form.first_name.$dirty">First name should not be empty</span>
<span ng-message="pattern" ng-show="contact_form.first_name.$error.pattern">Only alphabets allowed</span>
</span>
</p>
</form>
In your controller you can create a variable to determine if the form have been sumbitted:
app.controller('NameController', ['$scope', function($scope) {
$scope.submitted = false;
$scope.formProcess = function(form) {
$scope.submitted = true;
// logic
}
}]);
Than in your view:
<form ng-submit="formProcess(form)">
<p>
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name" ng-model="firstName" ng-pattern="/^[a-zA-Z\s]*$/" required/>
<span class="error" ng-if="submitted" && ng-messages="contact_form.first_name.$error">
<span ng-message="required">First name should not be empty</span>
<span ng-message="pattern" ng-show="contact_form.first_name.$error.pattern">Only alphabets allowed</span>
</span>
</p>
<p>
<button class="btn btn-secondary" type="submit">Send</button>
</p>
</form>

Categories