I am trying to validat my form and i done it but the problem is when i click the button without entering any input value it is getting saved and i dont want to disable the button.I need a condition that if i click on submit it should show the fields error that are empty.Can anyone please suggest help.
<div class="loginformcss nopadding">
<form id="login-form" name="login-form" class="nobottommargin" [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
<div class="col_full">
<input type="text" [formControl]="form.controls['firstname']" id="login-form-firstnamee" name="login-form-firstname" value="" placeholder="First Name" class="form-control not-dark">
<span *ngIf="form.controls['firstname'].touched">
<span *ngIf="!form.controls['firstname'].valid" >
<p class="error">Field required</p>
</span>
</span>
</div>
<div class="clear"></div>
<div class="col_full">
<input type="text" [formControl]="form.controls['lastname']" id="login-form-password" name="login-form-password" value="" placeholder="Last Name" class="form-control not-dark">
<span *ngIf="form.controls['lastname'].touched" >
<span *ngIf="!form.controls['lastname'].valid" >
<p class="error">Field required</p>
</span>
</span>
</div>
<div class="clear"></div>
<div class="col_full">
<input type="text" [formControl]="form.controls['profilename']" id="login-form-username" name="login-form-username" value="" placeholder="User Name" class="form-control not-dark">
<span *ngIf="form.controls['profilename'].touched" >
<span *ngIf="!form.controls['profilename'].valid" >
<p class="error">Field required</p>
</span>
</span>
</div>
<div class="clear"></div>
<div class="col_full nobottommargin">
<button class="col-xs-12 button button-small button-3d nomargin" id="login-form-submit" name="login-form-submit" value="login" >Login</button>
</div>
<div class="clear"></div>
The easiest way is to add required attribute to your input
Related
I am trying to create a form that changes tabs of login and signup that is working fine but the validations that i have used in the code are not working . I have created the controller but still the code is not working. Please have a look at the code and suggest the problem and solution for this problem.
<body ng-app="myApp" ng-controller="panelController as panel">
<div class="row no-gutters">
<div class="col">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand mx-auto" href="#"><img class="brand-image"
src="images/recruitment.png">JobsFinder</a>
</nav>
<div class="logo-text">
<h3>The easiest way to get you new job</h3>
<p>We offer 12000 jobs vacation right now</p>
</div>
</div>
</div>
<div class="col">
<section>
<div class="form animated flipInX">
<ul class="tab-group">
<li class="tab" ng-class="{active: panel.isSelected(2)}"><a
href ng-click="panel.selectTab(2)">Log In</a></li>
<li class="tab" ng-class="{active: panel.isSelected(1)}"><a
href class="test" ng-click="panel.selectTab(1)">Sign Up</a></li>
</ul>
<div class="tab-content">
<div id="signup" ng-show="panel.isSelected(1)" >
<h3>Sign Up for Free</h3>
<form name="signupForm" class="signupForm" novalidate>
<div class="top-row">
<div class="field-wrap">
<input type="text" required autocomplete="off"
placeholder="First name" ng-model="fname">
<span style="color:red" ng-
show="signupForm.fname.$dirty && signupForm.fname.$invalid">
<span ng-
show="signupForm.fname.$error.required">First name is required.</span>
</span>
</div>
<div class="field-wrap">
<input type="text"required autocomplete="off"
placeholder="Last name" ng-model="lname">
<span style="color:red" ng-
show="signupForm.lname.$dirty && signupForm.lname.$invalid">
<span ng-
show="signupForm.lname.$error.required">Last name is required.</span>
</span>
</div>
</div>
<div class="field-wrap">
<input type="email" required autocomplete="off"
placeholder="Email" ng-model="signupemail">
<span style="color: indianred" ng-
show="signupForm.signupemail.$dirty && signupForm.email.$invalid">
<span ng-
show="signupForm.signupemail.$error.required">Email is required</span>
<span ng-
show="signupForm.signupemail.$error.email">Invalid email</span>
</span>
</div>
<div class="field-wrap">
<input type="password"required autocomplete="off"
placeholder="Password" ng-model="signpassword">
<span style="color: indianred" ng-
show="signupForm.signpassword.$dirty && signupForm.signpassword.$invalid">
<span ng-
show="signupForm.signpassword.$error.required">Password is required</span>
</span>
</div>
<div class="field-wrap">
<input type="password"required autocomplete="off"
placeholder="Confirm password" ng-model="cpass">
<span style="color: indianred" ng-
show="signupForm.cpass.$dirty && signupForm.cpass.$invalid">
<span ng-
show="signupForm.cpass.$error.required">Password is required</span>
</span>
</div>
<button type="submit" class="button button-block" ng-
click="submit()" ng-disabled="signupForm.signpassword.$dirty &&
signupForm.signpassword.$invalid || signupForm.signupemail.$dirty &&
signupForm.signupemail.$invalid || signupForm.cpass.$dirty &&
signupForm.cpass.$invalid"/>Get Started</button>
</form>
</div>
<div id="login" ng-show="panel.isSelected(2)" >
<h3>Welcome Back!</h3>
<form class="loginForm" name="loginForm" novalidate>
<div class="field-wrap">
<input type="email"required autocomplete="off"
placeholder="Email" ng-model="loginemail">
<span style="color: indianred" ng-
show="loginForm.loginemail.$dirty && loginForm.email.$invalid &&
loginForm.loginemail.$touched">
<span ng-
show="loginForm.loginemail.$error.required">Email is required</span>
<span ng-
show="loginForm.loginemail.$error.email">Invalid email</span>
</span>
</div>
<div class="field-wrap">
<input type="password"required autocomplete="off"
placeholder="Password" ng-model="logpassword">
<span style="color: indianred" ng-
show="loginForm.logpassword.$dirty && loginForm.logpassword.$invalid">
<span ng-
show="loginForm.logpassword.$error.required">Password is required</span>
</span>
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block" type="submit" ng-
click="submit()" ng-disabled="loginForm.logpassword.$dirty &&
loginForm.logpassword.$invalid || loginForm.loginemail.$dirty &&
loginForm.loginemail.$invalid"/>Log In</button>
</form>
</div>
</div>
</div>
</section>
</div>
</div>
<footer>
<div class="text-center">
<p>Copyright © JobFinder 2017. Developed by Avneet Virk &
Shubham Dobriyal</p>
</div>
</footer>
<script src="https://unpkg.com/ionicons#4.2.2/dist/ionicons.js"></script>
<script src="js/panelController.js"></script>
</body>
You haven't specified any name for your inputs. So they're not correctly registered, underthat (absent) name in the form, so signupForm.fname (for example), is undefied.
Inputs must have a name:
<input name="fname" type="text" ... >
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>
I want to add validations to all the elements in the form. the error message should be displayed below the elements when the text of the control changes.
Following is my code:
<div role="tabpanel" class="tab-pane active" id="step-1">
<div class="col-md-4">
<div> <img src="../logo.jpg"
alt="Smiley face"
height="150"
style="margin:40px;"
width="150">
</div>
</div>
<div class="col-md-7">
<form action="r" name="regform"
method="post" >
<div class="col-md-6">
<div class="col-md-6" style="padding:0px;" >
<label for="mType" >Member Type*</label> <br />
<select id="member" ng-model="inputForm.mType" style="height:35px;width:135px;">
<option value="owner">Owner</option>
<option value="agent">Agent</option>
<option value="agent">Customer</option>
</select>
</div>
<div class="form-group">
<div class="col-md-6" style="padding:0px;" >
<label for="gender" >Gender </label> <br />
<select id="gender" ng-model="inputForm.gender" style="height:35px;width:135px;">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="form-group">
<label for=''>First Name</label>
<input type='name'
name='fName'
ng-model="inputForm.fName"
ng-minlength="1"
ng-maxlength="25"
ng-pattern="/^[A-Za-z]+$/"
required
/>
<span ng-show="regform.fName.$error.pattern">Please enter valid number!</span>
<!-- <span ng-show="studentForm.firstName.$touched && studentForm.firstName.$error.required">First name is required.</span>
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.minlength">min 3 chars.</span>
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.maxlength">Max 10 chars.</span>-->
</div>
<div class="form-group">
<label>Last Name : </label>
<input type="text"
name="lName"
class="form-control input-lg"
placeholder="Last Name"
ng-model="inputForm.lName"
style="height:35px">
</input>
</div>
<div class="form-group">
<label for="DOB">Date of Birth :</label>
<input type="date"
id="dob"
class="form-control input-lg"
placeholder="Date Of Birth (mm/dd/yyyy)"
ng-model="inputForm.dob"
style="height:35px;">
</input>
</div>
<div class="form-group">
<label>Adhar Number:</label>
<input type="text" id="adhar"
class="form-control input-lg"
placeholder="Adhar Number"
ng-model="inputForm.adhar"
style="height:35px">
</input>
</div>
<div class="form-group">
<label>PAN Number :</label>
<input type="text" id="pan"
class="form-control input-lg"
placeholder="PAN Number"
ng-model="inputForm.pan"
style="height:35px">
</input>
</div>
<div class="form-group">
<label>Email Address :</label>
<input type="email" id="email"
class="form-control input-lg"
placeholder="Your Email"
ng-model="inputForm.email"
style="height:35px">
</input>
<!-- <span ng-show="studentForm.email.$touched && studentForm.email.$error.email">Please enter valid email id.</span>-->
</div>
</div>
<div class="col-md-5" >
<div class="full-width bg-transparent">
<div class="full-width">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="custom-form">
<div class="text-center bg-form">
<div class="img-section">
<img src="http://lorempixel.com/200/200/nature/"
class="imgCircle"
alt="Profile picture">
<span class="fake-icon-edit"
id="PicUpload"
style="color: #ffffff;">
<span class="glyphicon glyphicon-camera camera"></span>
</span>
<div class="col-lg-12">
<h4 class="text-right col-lg-12" style="color:balck;">
<span class="glyphicon glyphicon-edit"></span> Edit Profile
</h4>
<input type="checkbox" class="form-control" id="checker"></input>
</div>
</div>
<input type="file"
id="image-input"
onchange="readURL(this);"
accept="image/*"
disabled class="form-control form-input Profile-input-file" >
</input>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8" >
<hr class="colorgraph" style="height: 5px;
border-top: 0;
background: #62c2e4;
border-radius: 5px;">
<div class="col-xs-4 col-xs-offset-3">
<a ui-sref="form.account" class="btn btn-lg btn-primary btn-block signup-btn"
style=" height:35px;
margin-bottom:10px;
padding:0px;" >
Next <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
</div>
</form>
</div>
</div>
image for reference
Please give suggestions to change the code so that appropriate error messages will be displayed to the controls after validating the input entr the user.
Your question is a bit vague as we can do what you are asking in many ways but find below an example using Bootstrap :
<form name="search" class="form-horizontal">
<div class="form-group col-md-2 required" ng-class="{
'has-feedback': (search.$submitted && search.carrier.$invalid),
'has-error': (search.$submitted && search.carrier.$invalid)}">
<label class="control-label" for="carrier">Carrier Code:</label>
<input type="text" class="form-control"
id="carrier" name="carrier"
required
pattern="[a-zA-Z0-9-]{2,3}"
maxlength="3"
ng-model="myAngularCtrl.flightDetails.carrier"/>
<span ng-show="search.$submitted && search.carrier.$error.required" class="field_errormsg-below">The Carrier Code is Mandatory</span>
<span ng-show="search.$submitted && search.carrier.$error.pattern" class="field_errormsg-below">use only numbers, digit and -</span>
</div>
<button type="submit"
class="btn btn-default FHU_margin-top-20"
ng-click="myAngularCtrl.searchFlight(search)">
Submit
</button>
</form>
You have a few things here:
The form has a name: search
You see two kind of error message being displayed. For them to be displayed, the user needs to have tried to submit the form (search.$submitted) and the field carrier needs to be in error (search.carrier.$error.required or search.carrier.$error.pattern)
So for some reason I am only getting the password on click. I've tried moving the div around. I used a div instead of a form. Been trying to figure this out. Please Help.
<div class="container">
<div class="row">
<div class="col-md-offset-5 col-md-3">
<form class="form-login">
<h4>Welcome</h4>
<input type="text" ng.model="vm.user.name" class="form-control input-sm chat-input" placeholder="username" />
</br>
<input type="text" ng-model="vm.user.password" class="form-control input-sm chat-input" placeholder="password" />
</br>
<div class="wrapper">
<span class="group-btn">
<button type="submit" ng-click="vm.authenticate(vm.user)" class="btn btn-primary btn-md">login <i class="fa fa-sign-in"></i></a>
</span>
</div>
</form>
</div>
</div>
Hya you used ng.model instead of ng-model :3
And a long day it has been indeed
I have a form with a set of fields. My problem is, submit button is disabled initially but the moment any one of the field goes valid or non-empty button is getting enabled. Here is my source code:
<form class="aui newDiscoveryForm" name="newDiscoveryForm" ng-submit="createNewDiscovery(user)" novalidate>
<fieldset class="group">
<div class="field-group">
<label class="label">Product Name</label>
<input class="text" type="text" name="input1" ng-model="user.productName" value="" id="productName" required/>
<p ng-show="newDiscoveryForm.input1.$invalid && !newDiscoveryForm.input1.$pristine" style="color: #880000">Product name is required.</p>
<div class="error"></div>
<span class="result_product" style="color: #880000"></span>
</div>
<div class="field-group">
<input class="text" type="text" name="input2" ng-model="user.endUsers" value="" required/>
<p ng-show="newDiscoveryForm.input2.$invalid && !newDiscoveryForm.input2.$pristine" style="color: #880000">EndUsers required.</p>
<label class="label">Who are end users</label>
<div class="description">[Gamers, Engineers, Commuters, Media, Goverment]</div>
</div>
<div class="field-group">
<label for="licenseKey">What Problem Are They Facing Today</label>
<textarea class="textarea" rows="4" cols="10" name="input3" ng-model="user.problemsArea" id="problemsarea" value="" required></textarea>
<p ng-show="newDiscoveryForm.input3.$invalid && !newDiscoveryForm.input3.$pristine" >ProblemsArea required.</p>
<div class="description">Spend So much in .....</div>
</div>
<div class="field-group">
<label class="label">What kind of product is this</label>
<input class="text" type="text" name="input4" ng-model="user.productKind" id="productkind" value="" required/>
<p ng-show="newDiscoveryForm.input4.$invalid && !newDiscoveryForm.input4.$pristine" >ProductKind required.</p>
<div class="description">[Software, MobileApp, JIRA-Plugin]</div>
</div>
<div class="field-group">
<label for="d-lname">How do you plan to solve the problem</label>
<input class="text long-field" type="text" id="problemSoln" name="input5" ng-model="user.problemSoln" value="" required />
<p ng-show="newDiscoveryForm.input5.$invalid && !newDiscoveryForm.input5.$pristine" >ProblemSolution required.</p>
<div class="error"></div>
<div class="description">[Load Balancing of Personal, Automated Traffic Info]</div>
</div>
<div class="field-group">
<label for="d-lname">Who are your competitors</label>
<input class="text long-field" type="text" id="competitors" name="input6" ng-model="user.competitors" value="" required/>
<p ng-show="newDiscoveryForm.input6.$invalid && !newDiscoveryForm.input6.$pristine" >Competitors required.</p>
<div class="error"></div>
<div class="description">Traditional Commuting Solution</div>
</div>
<div class="field-group">
<label for="d-lname">How do you differntiate from your competitors</label>
<input class="text long-field" type="text" id="differentiator" name="input7" ng-model="user.differentiator" value="" required/>
<p ng-show="newDiscoveryForm.input7.$invalid && !newDiscoveryForm.input7.$pristine" >Differentiator required.</p>
<div class="error"></div>
<div class="description">[Automated, Secure]</div>
</div>
</fieldset>
<div class="buttons-container">
<div class="buttons">
<button class="aui-button aui-button-primary ap-dialog-submit" value="Submit" type="submit"
id="save-button" ng-click = "createNewDiscovery(user)" ng-disabled="newDiscoveryForm.$invalid">Save</button>
<button id="close-button" type="button" class="aui-button aui-button-link ap-dialog-cancel" ng-click = "cancelClick()">Cancel</button>
</div>
</div>
</form>
How can I make sure that submit button is disabled untill all the fields are filled.
I tried almost all the available solutions like make all the fields required, make the submit button as ./. But nothing seems to be working.
You are almost doing it right. To use angular's form validation, you have to use the angular directives for that. For example, use the ng-required instead of the normal required (though it will work, but you should use ng-required for best practices):
<form name="newDiscoveryForm">
<input type="text" name="someName"
ng-model="someModel"
ng-required="true" /> <!-- use ng-required -->
<!-- other inputs -->
<!-- $invalid will evaluate to true if the `ng-required` are not valid -->
<button type="submit"
ng-disabled="newDiscoveryForm.$invalid">
Submit!
</button>
</form>
See this JSFIDDLE