I am trying to invalidate and disable the submit button on the load of the page, as not entering text into textbox is invalid, but my code is not working, can someone please provide the solution.
<div id="reg_bground">
<div id="formdiv" ng-app="myApp" ng-controller="valCtrl">
<form name="myForm" novalidate>
<div style="font-family:calibri; font-size:30px; font-weight:bolder;">
<span>Register:</span>
</div>
<div>
<span>Name:</span><br>
<input type="text" name="user" ng-model="user" required><br>
<p ng-show="myForm.user.$dirty && myForm.user.$invalid">*Please insert the name</p>
</div>
<input type="number">
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
</form>
</div>
</div>
You essentially check for $dirty state in the submit button for disabled status.
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
$dirty is only set to true when user has meddled with the myForm.user input, which is not the case on page load. Instead, try checking the $pristine state (or !$dirty)
<input type="submit" ng-disabled="myForm.user.$pristine || myForm.user.$invalid">
Delete the dirty check in the submit button:
<input type="submit" ng-disabled=" ̶m̶y̶F̶o̶r̶m̶.̶u̶s̶e̶r̶.̶$̶d̶i̶r̶t̶y̶ ̶&̶&̶ ̶ myForm.user.$invalid">
The field content is valid
$invalid working when you enter a input and input doesn't match your pattern .
you must use $error.required for your goal.
follwing will work
<div id="reg_bground">
<div id="formdiv" ng-app="myApp" ng-controller="valCtrl">
<form name="myForm" novalidate>
<div style="font-family:calibri; font-size:30px; font-
weight:bolder;">
<span>Register:</span>
</div>
<div>
<span>Name:</span><br>
<input type="text" name="user" ng-model="user" required><br>
<p ng-show="myForm.user.$dirty &&
myForm.user.$error.required">*Please insert the name</p>
</div>
<input type="number">
<input type="submit" ng-disabled="myForm.user.$dirty &&
myForm.user.$error.required">
</form>
</div>
Related
I am using AngularJs. I have 2 div, which I am hiding and showing each other. Each div contains few controls, which I have set "required" validation on click of submit button. By default the div "createMenu" is shown. Below is the code used:
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div class="container" ng-show="createMenu">
<div class="row">
<div class="col-sm-2">
<label>Name :</label>
</div>
<div class="col-md-6 form-group">
<input type="text" maxlength="150" required="" ng- model="testName" name="testName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.testName.$error.required">Name is required</span>
<br />
<input type="submit" value="Submit" ng-click="submitted=true" />
</div>
<div class="container" ng-show="copyView">
<div class="row">
<div class="col-sm-4">
<label class="control-label">New Name :</label>
</div>
<div class="col-sm-4">
<input type="text" required="" maxlength="150" class="form-control" ng-model="NewName" name="NewName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.NewName.$error.required">New Name is required</span>
<input type="submit" value="Submit" ng-click="copydata()" />
</div>
The issue is: If I click on the submit button in the first div, the controls in the div "copyView" is also getting validated. When the first submit button is clicked, I want to validate the textbox available in the "createMenu" div only. when the "copyView" div is shown, than at that time, when the submit button inside that div is clicked, the "New Name" textbox should be validated.
How to differentiate between the two divs, when the error messages are shown.
Thanks
You can use separate form tag for the separate div tag.
like
<div ng-controller="name">
<form>
//first dive
</form>
<form>
//second div
</form>
</div>
Angular seems to not be raising minLength or maxLength error in the below code... the required error (as well as the email error) is working however. I know ng-minlength and ng-maxlength is working because the input box is changing its CSS. The text inside the <span> is not working for the min or max errors.
See the password input below:
<section class="row" data-ng-controller="AuthenticationController">
<h3 class="col-md-12 text-center">Sign Up</h3>
<div class="col-xs-offset-2 col-xs-8 col-md-offset-5 col-md-2">
<form name="userForm" data-ng-submit="userForm.$valid && signup()" class="signin form-validate" novalidate autocomplete="off">
<fieldset>
<div class="form-group">
<span ng-show="userForm.email.$dirty && userForm.email.$error.required" class="text-danger">This field is required</span>
<span ng-show="userForm.email.$dirty && userForm.email.$error.email" class="text-danger">This field must be a valid email address</span>
</div>
<div class="form-group">
<label for="username" class="control-label">Username</label>
<input type="text" id="username" name="username" class="form-control" data-ng-model="credentials.username" placeholder="Username">
</div>
<div class="form-group">
<label for="password" class="control-label">Password</label>
<input type="password" id="password" name="password" class="form-control" required data-ng-model="credentials.password" ng-minlength="8" ng-maxlength="24" placeholder="Password">
<span ng-show="userForm.password.$dirty && userForm.password.$error.required" class="text-danger">This field is required</span>
<span ng-show="userForm.password.$dirty && userForm.password.$error.minLength" class="text-danger">Please use a password of at least 8 characters</span>
<span ng-show="userForm.password.$dirty && userForm.password.$error.maxLength" class="text-danger">The charactar limit for passwords is 24</span>
</div>
<div class="text-center form-group mt">
<button type="submit" class="btn btn-large btn-primary">Sign up</button> or
Sign in
</div>
<div data-ng-show="error" class="text-center text-danger">
<strong data-ng-bind="error"></strong>
</div>
</fieldset>
</form>
</div>
any thoughts on what's gone wrong here?
It was just a syntax error: userForm.password.$error.minLength should have been userForm.password.$error.minlength (capitalization).
You should change && to && inside ng-show expression, you must have getting an error in console.
The updated ng-show version will look something like below.
ng-show="userForm.password.$dirty && userForm.password.$error.required"
The other more convenient way is to use ng-messages directive, to show and hide validation messages based on form & its field validity
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
My form is as shown below. But on click of submit button the form is submitting with out validation...I am using spring security so xhr call won't allow to redirect on another page from server(so I have to give the url in action). If I remove "novalidate" page is taking default html validation
<form name="loginForm" id="loginForm" action="${pageContext.request.contextPath}/j_spring_security_check" novalidate>
<div class="panel-body">
<div class="form-group has-feedback">
<input type="email" name="j_username" ng-model="j_username"
class="form-control placeholder-color" placeholder="Email"
ng-pattern="/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/"
required autocomplete="off" />
<div class="form-devider"></div>
<div ng-messages="loginForm.j_username.$error"
ng-if="loginForm.$submitted">
<div class="has-error" ng-message="required">
<spring:message code="peak.email.required" />
</div>
<div class="has-error" ng-message="pattern">
<spring:message code="peak.enter.valid.email" />
</div>
</div>
</div>
<div class="form-group has-feedback">
<input type="password" name="j_password" id="j_password"
placeholder="Password" class="form-control placeholder-color"
ng-model="j_password" required autocomplete="off" /> <%-- <input
type="hidden" name="url" id="url" placeholder="Password"
ng-model="link"
ng-init="link='${pageContext.request.contextPath}/j_spring_security_check'" /> --%>
<div class="form-devider"></div>
<div ng-messages="loginForm.j_password.$error"
ng-if="loginForm.$submitted">
<div class="has-error" ng-message="required">
<spring:message code="peak.password.required" />
</div>
</div>
</div>
</div>
<div id="login-error-box1" style="display: none"></div>
<button type="submit"
class="btn btn-block custome-btn-orange pbi-mt15">
<spring:message code="peak.login" />
</button>
</form>
Thanks in advance
Take a look at this plnkr : http://plnkr.co/edit/rZaKXEp7vspvEerFtVH8?p=preview
$scope.validate = function(isValid,$event){
console.log(isValid);
console.log($scope.loginForm);
if(!isValid){
$event.preventDefault();
}
}
You need to create an angular controller with a function to run on ng-submit. That function will look for if form is invalid and stops it from posting the form.
which allows you to see your error messages.
I've this basic form implemented using AngularJS and Bootstrap:
http://jsfiddle.net/dennismadsen/0stwd03k/
HTML
<div ng-controller="MyCtrl">
<form class="well" name="formTest" ng-submit="save()">
<div class="form-group">
<label for="name">Name*</label>
<input type="name" class="form-control" id="name" placeholder="Enter name" required />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
JavaScript
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.save = function () {
};
}
Result
The Name input field is required. When I click the submit button, I need the input field to have a red border if it's invalid. How can this be done?
Alternatively, if I unfocus the input field and it's still not valid, it would be great that the red corder is shown on that time, instead of waiting for the form submit.
Twitter Bootstrap has an has-error class, so I would use this in conjunction with ng-class for the form group, then a label with the label and label-danger classes for good measure:
<div class="form-group" ng-class="{'has-error': errors.Name }">
<label for="name">Name*</label>
<input type="name" class="form-control" id="name" placeholder="Enter name" required />
<span class="label label-danger" ng-if="errors.Name">{{errors.Name}}</span>
</div>
Then in your controller, have an errors object, and set the Name property of this to a string when the name is invalid.
The first thing you were missing was adding ng-model='name' to input field, then only will the form become invalid once you click submit, otherwise the form will always be valid since it considers that there is no field present.
Then I'd add the submitted class on the submit click button, then put the border css like .submitted would be the parent and .ng-invalid would be the child so we can put the style on .submitted .ng-invalid
HTML
<div ng-controller="MyCtrl">
<form class="well" name="formTest" ng-class="{'submitted': submitted}" ng-submit="save()" >
<div class="form-group">
<label for="name">Name*</label>
<input type="name" class="form-control" id="name" placeholder="Enter name" ng-model="name" required />
</div>{{submitted}}
<button type="submit" class="btn btn-default" ng-click="submitted= true;">Submit</button>
</form>
</div>
CSS
.submitted .ng-invalid{
border: 1px solid red;
}
Working Fiddle
Hope this could help you, Thanks.
Basically you need angular to take over validation, so add novalidate to form. Also add ng-class to input field to determine wether to add error css
<form name="myForm" novalidate ng-submit="test()">
<input type="text" name="user" ng-model="user" required ng-class="myForm.user.$invalid && myForm.user.$dirty ? 'error' : ''">
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required. </span>
</span>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
Good luck..