I was looking at the W3school example of form validation for Angular JS, here is the code:
<form name="myForm">
<p>Name:
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>
</p>
<p>Adress:
<input name="myAddress" ng-model="myAddress" required>
<span ng-show="myForm.myAddress.$untouched">Please enter address.</span>
</p>
</form>
note the ng-show="myForm.myName.$touched", does Angular find the element's name attribute as default? What if the input has an id and I want to use that instead of name?
You can use this in below way..
<input name="myName" id="myNameId" ng-model="myName" required>
<span ng-show='angular.element($("#myNameId")).$touched && angular.element($("#myNameId")).$invalid'>The name is required.</span>
</p>
Related
I am beginner in AngularJS. So I faced little bit confusion this language. Please check my code:
<form class="form-horizontal" ng-submit="productFormForm.$valid && submitProductForm()" novalidate="" name="productFormForm">
<label for="from_id_dropdown">Templates</label>
<select class="form-control" name="from_id_dropdown" id="from_id_dropdown" ng-model="formData.form_id" ng-change="getDropdownOptions(formData.form_id)" ng-options="option.id as option.name for option in forms_dropdown.availableOptions" required="">
<option value="">Select Template</option>
</select>
<div ng-show="productFormForm.$submitted || productFormForm.from_id_dropdown.$touched" class="">
<span style="color:red;" ng-show="productFormForm.from_id_dropdown.$error.required">Template is required.</span>
</div>
</form>
<form class="form-horizontal" ng-submit="attributeForm.$valid && submitForm()" novalidate="" name="attributeForm">
<label class="tooltip-demo">Label</label>
<input type="text" name="attribute_lebel" ng-model="attr_value.label" class="form-control" placeholder="Label Name" required="">
<div ng-show="attributeForm.$submitted || attributeForm.attribute_lebel.$touched" class="">
<span class="text-danger" ng-show="attributeForm.attribute_lebel.$error.required">Label is required.</span>
</div>
<button class="btn btn-w-m btn-success" type="submit">Save</button>
</form>
Here is two form productFormForm and attributeForm But one submit button which is 2nd form. I want to validate both form those fields are blank.
You can validate both forms using js - example
or in html add <span> after your button -
<span ng-show="attributeForm.attribute_lebel.$error.required || productFormForm.from_id_dropdown.$error.required"> Form not valid</span>
<div class="col-xs-7">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="settings.input">
checked
</label>
</div>
<div collapse="!settings.input" ng-class="myform.input.$invalid ? 'has-error has-feedback': ''">
<input type="number" class="form-control input-sm" id="inputEmail3" name="input" ng-model="settings.input" placeholder="if checked, then do validation" required min="0">
<span ng-show="myform.input.$invalid" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
</div>
</div>
demo here
My question is when I set required for the input, the form.$valid will be false, But what I want is only when the checkbox checked, then do input validation, So when not checked, even the input is empty, the value of form.$valid should be true
What I purpose is to override the $valid of input, how to override?
Form field is getting invalid because you had required attribute over input field, so every time that form input field is considered as required. So what you can do is, you should add required attribute on form field conditionally by having ng-required directive on input with expression.
Markup
<div collapse="!settings.input" ng-class="myform.input.$invalid ? 'has-error has-feedback': ''">
<input type="number" class="form-control input-sm" id="inputEmail3" name="input"
ng-model="settings.input" placeholder="if checked, then do validation"
ng-required="settings.input" min="0"/>
<span ng-show="myform.input.$invalid" class="glyphicon glyphicon-remove form-control-feedback"
aria-hidden="true"></span>
</div>
Forked Plunkr
Angular has ng-required directive that allows to enable required attribute with an expression. Replace required="" on input with the following:
ng-required="settings.checked"
Live example
AngularJS - I am using third party plugin ng-intl-tel-input. This is using for phone/mobile number showcase. All is well, populating placeholders(example phone number) based on country flag changes. Here I am facing problem that If entered value is incorrect based on country code & not valid number. Its returning null.. I wanna validate that & need to show user in valid number & need that updated number..How an I get?
<input class="form-control" type="text" ng-model="mobile" ng-intl-tel-input>
You can check demo from below URL
http://hodgepodgers.github.io/ng-intl-tel-input/
and html source code from below URL
https://github.com/hodgepodgers/ng-intl-tel-input/blob/master/index.html
Try by changing below code for input.
<form name="form">
<div class="form-group" ng-class="{'has-error': form.mobile.$invalid && form.mobile.$touched, 'has-success': form.mobile.$valid}">
<input type="text" class="form-control" id="mobile" name="mobile" ng-model="mobile" ng-intl-tel-input>
<span class="help-block" ng-show="form.mobile.$pristine && form.mobile.$untouched">Please type a telephone number</span>
<span class="help-block" ng-show="form.mobile.$invalid && form.mobile.$touched">Invalid :(</span>
<span class="help-block" ng-show="form.mobile.$valid">Valid :) </span>
</div>
</form>
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..
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>