Angular form validation is not working - angularjs

I have the following form :
UPDATE
<script type="text/ng-template" id="form-profile.html">
<form id="f1" name="form">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" ng-model="formData.name" ng-class="submitted ? 'ng-dirty' : ' ' " required autofocus>
<span style="color:red" ng-show="form.name.$dirty || form.name.$invalid">Name is required</span>
</div>
<div class="form-group">
<label for="name">E-mail</label>
<input type="text" class="form-control" name="email" ng-model="formData.email" ng-class="submitted ? 'ng-dirty' : ' '" required autofocus>
<span style="color:red" ng-show="f1.email.$dirty && f1.email.$invalid">
<span ng-show="f1.email.$error.required">Email is required.</span>
</span>
</div>
<div class="form-group">
<label for="Cellphone">Mobil nr.</label>
<input type="text" class="form-control" name="Cellphone" ng-model="formData.Cellphone" ng-class="submitted ? 'ng-dirty' : ' '" required autofocus>
<span style="color:red" ng-show="f1.Cellphone.$dirty && f1.Cellphone.$invalid">
<span ng-show="f1.Cellphone.$error.required">Cellphone is required.</span>
</span>
</div>
<div class="form-group">
<label for="address">Adresse</label>
<input type="text" class="form-control" name="address" ng-model="formData.address">
</div>
<div class="form-group col col-33 col-offset-67">
<a ui-sref="front.form.organisation" class="button icon-right ion-chevron-right button-energized .col-offset-50">
Next
</a>
</div>
</form>
</script>
When I press next I want the form to disable the next button and show me the errors.
I have tried with name so far and I did not get the errors.
Thank you

Please see demo below
ng-show="f1.name.$dirty <-- f1 that's form name not id
var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl">
<form name="f1">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" ng-model="formData.name" required autofocus>
<span style="color:red" ng-show="f1.name.$dirty && f1.name.$invalid">Name is required</span>
</div>
</form>
</div>

Related

AngularJS conditional required

I want to validate a form if an input text has value, or another one, or both of them.
For example
<!-- if username has data -->
<div class="username">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required
minlength="4" maxlength="8"
placeholder="4 to 8 characters long" />
</div>
<!-- if nickname has data -->
<div class="nickname">
<label for="nickname">Nickname:</label>
<input type="text" id="nickname" name="nickname" required
minlength="4" maxlength="8"
placeholder="4 to 8 characters long" />
</div>
<!-- or if both has data submit is enabled -->
<input type="submit" value="Submit">
-- EDIT --
Ok now I have something weird, it seems that the "&&" operator doesn't work in HTML, so I'm a bit stuck..
Actually, with your help, my button can be clicked if the condition is verified. But strangely :
- Button is not disabled
- If the condition is not verified, my button doesn't display my ng-if message.
HTML
<form class="form-horizontal" role="form" name="myForm" novalidate>
<div class="card-body card-padding">
<div class="form-group">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Firstname</label>
<div class="col-sm-8">
<tags-input ng-model="myForm.firstname"
min-length="0"
name="firstname"
use-strings="true" class="form-control" required>
</tags-input>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-8">
<tags-input ng-model="myForm.name"
min-length="0"
name="name"
use-strings="true" class="form-control" required>
</tags-input>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-8">
<tags-input ng-model="myForm.email"
min-length="0"
name="email"
use-strings="true" class="form-control" required>
</tags-input>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Username</label>
<div class="col-sm-8">
<tags-input ng-model="myForm.username"
min-length="0"
name="username"
use-strings="true" class="form-control" required>
</tags-input>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Nickname</label>
<div class="col-sm-8">
<tags-input ng-model="myForm.nickname"
min-length="0"
name="nickname"
use-strings="true" class="form-control" required>
</tags-input>
</div>
</div>
</div>
</div>
<div class="form-group" data-ng-show="btnOk">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" data-ng-click="action()" class="btn btn-success btn-sm"
ng-disabled="(!myForm.username.$valid || !myForm.nickname.$valid) && !myForm.email.$valid && !myForm.name.$valid && !myForm.firstname.$valid">
<span ng-if="(!myForm.username.$valid || !myForm.nickname.$valid) && !myForm.email.$valid && !myForm.name.$valid && !myForm.firstname.$valid">Some required fields are missing</span>
<span ng-if="(myForm.username.$valid || myForm.nickname.$valid) && myForm.email.$valid && myForm.name.$valid && myForm.firstname.$valid">{{button}}</span>
</button>
</div>
</div>
</div>
</form>
How can I bypass this behavior ?
An option is to
Enclose them inside a form (give it a name)
Declare an ng-model for username and nickname inputs
Put the conditionals using the $valid/$invalid options of the objects created by AngularJS for the form components:
See below working example:
angular.module('app', []).controller('ctrl', function() {});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="mForm" ng-app="app" ng-controller="ctrl as vm" novalidate>
<!-- if username has data -->
<div class="username">
<label for="username">Username:</label>
<input type="text" ng-model="vm.username" id="username" name="username" required minlength="4" maxlength="8" placeholder="4 to 8 characters long" />
</div>
<!-- if nickname has data -->
<div class="nickname">
<label for="nickname">Username:</label>
<input type="text" ng-model="vm.nickname" id="nickname" name="nickname" required minlength="4" maxlength="8" placeholder="4 to 8 characters long" />
</div>
<!-- or if both has data submit is enabled -->
<input type="submit" value="Submit" ng-disabled="mForm.username.$invalid && mForm.nickname.$invalid">
<div>Valid: {{!!(mForm.username.$valid || mForm.nickname.$valid)}}</div>
<form>
Resolved this by adding bool in my condition like:
<div class="col-sm-offset-2 col-sm-10">
<button type="button" data-ng-click="action()" class="btn btn-success btn-sm"
ng-disabled="(myForm.firstname.$valid == false || myForm.name.$valid == false || myForm.email.$valid == false || (myForm.username.$valid == false && myForm.nickname.$valid == false))">
<span ng-if="(myForm.firstname.$valid == false || myForm.name.$valid == false || myForm.email.$valid == false || (myForm.username.$valid == false && myForm.nickname.$valid == false))">Some required fields are missing</span>
<span ng-if="(myForm.firstname.$valid && myForm.name.$valid && myForm.email.$valid && (myForm.username.$valid || myForm.nickname.$valid))">{{button}}</span>
</button>
</div>

Ng-click validation is not working

I am beginer in angular js. I am validating a form with some input feild and form is posting on ng-click but validation is not working, validation message are displaying for a white then disappear i have to submit the form after validating. form ng-click should not be called untill the form is valid please help me . Thanks in advance.
<form name="teamForm" novalidate ng-submit="submit(teamForm)" class="formfields">
<div class="col-md-12">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="lname">First Name:</label>
<input type="text" name="firstname"
ng-model="FirstName" class="form-control custom-form-control"
placeholder="First Name" required="required">
<span class="text-danger"
ng-show="(teamForm.firstname.$dirty || submitted) && teamForm.firstname.$error.required">Required</span>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="lname">Last Name:</label>
<input type="text" name="lastname"
ng-model="LastName" class="form-control custom-form-control"
placeholder="Last Name" required="required">
<span class="text-danger"
ng-show="(teamForm.lastname.$dirty || submitted) && teamForm.lastname.$error.required">Required</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="email">Email:</label>
<input type="text" name="email"
ng-model="Email" class="form-control custom-form-control"
ng-pattern="/^[^\s#]+#[^\s#]+\.[^\s#]{2,}$/"
placeholder="Email" required="required">
<span class="text-danger"
ng-show="(teamForm.email.$dirty || submitted) && teamForm.email.$error.required">Required</span>
<span class="text-danger"
ng-show="teamForm.email.$dirty &&teamForm.email.$error.pattern">Please Enter Valid Email</span>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Phone Number:</label>
<div class="clearfix"></div>
<input type="text" name="phone"
ng-model="Phone" class="form-control custom-form-control"
placeholder="XXXXXXXXXX" required="required">
<span class="text-danger"
ng-show="(teamForm.phone.$dirty || submitted) && teamForm.phone.$error.required">Required</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="form-group">
<label>Message:</label>
<textarea class="form-control rounded-0" rows="5"
name="comment" placeholder="Message"
ng-model="Comment" required="required"></textarea>
<span class="text-danger"
ng-show="(teamForm.comment.$dirty || submitted) && teamForm.comment.$error.required">Required</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="form-group">
<label>Upload Resume:</label>
<!--<input type="file" name="ResumePath" id="filehandler" />-->
<input type="file" id="file1" name="file" class="filelabel sr-only" multiple ng-files="getTheFiles($files)" onchange="Checkfiles($(this))" />
<!-- <input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/> -->
<label for="file1" class="form-control">
<span><i class="fa fa-file"></i> Drag file here or choose file</span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div vc-recaptcha key="'6Lc860IUAAAAAAyWI9WD8EV4eITu4ODdhuYHdzi8'"
class="grecaptcha" ng-model="respone1"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<button type="button" id="btnSubmit"
ng-click="uploadFiles()" value="Upload"
class="btn btn-green center-block pull-left">
<i class="fa fa-send"></i>{{btnText}}</button>
</div>
</div>
<div class="form-group text-center">
<h5 class="text-success" style="font-weight:bold">{{messagesuccess}}</h5>
<h5 class="text-danger" style="font-weight:bold">{{messageerror}}</h5>
</div>
</div>
</form>
ng-click (or it's vanilla cousin, onclick) do not check form validation. The function for submission needs to be defined at the form level, and then you specify which button acts as the submit button in order to get form behavior.
I see you already have a submit function defined. I assume you want to change that to uploadFiles. And if you want the form to conduct validation, remove the novalidation attribute.
<form name="teamForm" ng-submit="uploadFiles()" class="formfields">
then, for the button you would specify it is the submission button and remove the ng-click.
<button type="submit" id="btnSubmit"
value="Upload"
class="btn btn-green center-block pull-left">
<i class="fa fa-send"></i>{{btnText}}</button>

tabindex is not working with required attribute

<div class="row">
<div class="col-md-6">
<div class="form-body">
<div class="form-group">
<label>First Name</label>
<div class="input-group">
<input type="text" tabIndex="1" name="first_name" class="form-control">
</div>
</div>
<div class="form-group">
<label>Email Address</label>
<div class="input-group">
<input type="email" tabIndex="3" name="username" class="form-control" ng-model="username" required user-exist /><br/> <span style="color: red" ng-show="partnerForm.username.$touched && partnerForm.username.$invalid">
<span ng-show="partnerForm.username.$error.required">Email is required.</span>
<span ng-show="partnerForm.username.$error.email">Enter Correct Format.</span>
<span ng-show="partnerForm.username.$error.userExist">User already exists.</span>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-body">
<div class="form-group">
<label>Last Name</label>
<div class="input-group">
<input type="text" tabIndex="2" name="last_name" class="form-control">
</div>
</div>
</div>
</div>
</div>
the tabindex 3 is not working.i have checked by removing the required attr then it is working .the attributes required and tabindex is conflicting with each other.please help me to solve this.or provide a directive (working) for tabindex.

Email validation not working in angularjs?

this is my input
aby-saturn#gmail.com
hyphen is not working in emailid getting invalid email id
this is my ng-pattern
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input class="form-control" type="email" id="email" name="email" placeholder="Enter Email" ng-model="user.email" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" noncapitalize required />
</div>
<div style="color: red" id="emailError"></div>
<span style="color:red;" class="email-error" ng-show="loginForm.submitted && loginForm.email.$error.required">Required</span>
<span style="color:red" class="error" ng-show="loginForm.submitted && loginForm.email.$error.pattern">Email not valid</span>
</div>
Here is a regexp for email validation.
^[\w-]+(\.[\w-]+)*#([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$
You can test this regexp here
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>Try writing in the input field:</p>
<form name="myForm">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input class="form-control" type="text" id="email" name="email" placeholder="Enter Email" ng-model="user.email" ng-pattern="/^[\w-]+(\.[\w-]+)*#([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$/" noncapitalize required />
</div>
<div style="color: red" id="emailError"></div>
<span style="color:red;" class="email-error" ng-show="myForm.email.$error.required">Required</span>
<span style="color:red" class="error" ng-show="myForm.email.$error.pattern">Email not valid</span>
</div>
</form>
</body>
</html>
PLEASE RUN THE ABOVE SNIPPET
Here is a working DEMO
I guess you don't want to allow '-' to be in the email address, here is what I got using ng-pattern and if you want '-' to be allowed check 2nd example:
1) If '-' is not allowed:
angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.user = {
email: 'test#test.com'
};
$scope.emailPattern = /^(([^-<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<form name="loginForm">
<div class="form-group">
<div class="input-group">
<input class="form-control" id="email" name="email" placeholder="Enter Email" ng-model="user.email" ng-pattern="emailPattern" noncapitalize required />
</div>
<div style="color: red" id="emailError">
<span style="color:red;" class="email-error" ng-show="loginForm.email.$error.required">Required</span>
<span style="color:red" class="error" ng-show="loginForm.email.$error.pattern">Email not valid, doesn't match the provided pattern</span>
</div>
</div>
</form>
</div>
2) If '-' is allowed:
angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.user = {
email: 'test#test.com'
};
$scope.emailPattern = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<form name="loginForm">
<div class="form-group">
<div class="input-group">
<input class="form-control" id="email" name="email" placeholder="Enter Email" ng-model="user.email" ng-pattern="emailPattern" noncapitalize required />
</div>
<div style="color: red" id="emailError">
<span style="color:red;" class="email-error" ng-show="loginForm.email.$error.required">Required</span>
<span style="color:red" class="error" ng-show="loginForm.email.$error.pattern">Email not valid, doesn't match the provided pattern</span>
</div>
</div>
</form>
</div>

how to error message on submitting of a from in angular js

I want to show the required error message once the from is submitted but not sure how to do it i am trying as shown below
<div class="controls">
<form name="formx" >
<ul class="form small">
<div class="tag">ID</div>
<input type="text" class="small" name="enrolmentId" ng-model="enrolmentDetail.Id" required="" onkeypress='return !(event.charCode == 32 )'>
<div class="error text-danger" style="position: absolute;margin-left: 120px;" ng-show="formx.enrolmentId.$error.required && (formx.$submitted || formx.enrolmentId.$touched)"><p>Id is required</p></div>
</li>
<li>
<div class="btn" ng-click="saveDetails(enrolmentDetail)" ng-show="formAction=='save'">SAVE</div>
</li>
</ul>
</form>
</div>
here now the error message is shown once we dirty the textbox but i want to show the error message once the form is submitted and if there is required error from should not be submitted
trying used ng-submit but not sure how to do it
Please help by creating a fiddle or posting a example to do it
This is an example
html
<body ng-app="myApp">
<div ng-controller="myCtrl as mc">
<form class="form" name="myForm" ng-submit="mc.submit(myForm)" novalidate>
<div class="form-group">
<label for="username">Username</label>
<input name="username" class="form-control" type="text" ng-model="mc.username" required/>
<p class="text-danger" ng-show="myForm.username.$error.required && mc.submitted">Username is required</p>
</div>
<div class="form-group">
<label for="password">Password</label>
<input name="password" class="form-control" type="password" ng-model="mc.password" required/>
<p class="text-danger" ng-show="myForm.password.$error.required && mc.submitted">Password is required</p>
</div>
<button class="btn btn-success">submit</button>
</form>
<p class="text-success" ng-show="mc.sent && mc.submitted">Form sent</p>
js
angular.module("myApp",[])
.controller("myCtrl", function(){
var vm = this;
vm.submit = submit;
function submit(form){
vm.submitted = true;
if(form.$valid && vm.submitted === true){
//Send data logic
vm.sent = true;
}
}

Resources