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
Related
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.
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>
I have a form where i have two textfields added using the Bootstrap. Now i tried to add AngularJs validation for these two fields but not able to do it..Here is my Markup for userId textfield.
<form role="form" name="Loginform" action="" method="post" class="registration-form">
<div class="form-group">
<label class="sr-only" for="UserID">User ID</label>
<input type="text" name="UserID" ng-model="user" placeholder="User ID..." class="form-first-name form-control" id="UserID" required>
<span style="color:red" ng-show="Loginform.user.$dirty && myForm.user.$invalid">
<span ng-show="Loginform.user.$error.required">Username is required.</span>
</span>
</div>
</form>
Please help me to resolve this ..Thanks..
Can you please see I have updated code and made some correction
http://jsfiddle.net/v7je78gq/
<span style="color:red" ng-show="Loginform.$dirty && Loginform.$invalid">
<span ng-show="Loginform.$error.required">Username is required.</span>
</span>
This is because of in you are check for property which is not exist in the form
hope this will help you
If you want to validate one or more input field, the best way is to create a controller and calling it.
function Ctrl($scope) {
$scope.isInvalid = function(field){
return $scope.myForm[field].$invalid && $scope.myForm[field].$dirty;
};
$scope.isValid = function(field){
return $scope.myForm[field].$valid && $scope.myForm[field].$dirty;
};
}
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="Ctrl">
<form name="myForm" novalidate class="form-horizontal">
<div class="control-group" ng-class="{error: isInvalid('name')}">
<label>Name:</label>
<input type="text" name="name" placeholder="Name" ng-model="user.name" required/>
<span ng-show="!isValid('name')">Name is required</span>
</div>
</form>
</body>
</html>
Hope it works for you :)
The name of your input field is UserID not user.
ng-show="Loginform.UserID.$error.required"
Your input name did not correctly corresponded to the validation element
<form role="form" name="Loginform" action="" method="post" class="registration-form">
<div class="form-group">
<label class="sr-only" for="UserID">User ID</label>
<input type="text" name="UserID" ng-model="user" placeholder="User ID..." class="form-first-name form-control" id="UserID" required>
<span style="color:red" ng-show="Loginform.UserID.$touched && Loginform.UserID.$invalid">
<span ng-show="Loginform.UserID.$error.required">Username is required.</span>
</span>
</div>
</form>
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>
I have the following form that I want to use the bootstrap-validator:
<form method="POST" action="http://localhost:8000/register/researcher" accept-charset="UTF-8" data-toggle="validator" novalidate="true">
<input name="_token" type="hidden" value="v5VF4sgb0zOrxzAihpEhkezccUWHPpXO5CnnmIK7">
<div class="from-group">
<input class="form-control" placeholder="Nome" required="required" name="name" type="text">
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Email" data-error="O email inserido é inválido." required="required" name="email" type="email">
<div class="help-block with-errors"></div>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Senha" data-minlength="6" id="inputPass" required="required" name="password" type="password" value="">
<span class="help-block">Senha de no mínimo 6 caracteres</span>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Confirmar senha" data-match="#inputPass" data-match-error="Senhas inseridas são diferentes" required="required" name="password_confirmation" type="password" value="">
<div class="help-block with-errors"></div>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="CPF" required="required" name="cpf" type="text">
</div>
<br>
<div class="text-center">
<input class="btn btn-primary disabled" type="submit" value="Enviar">
</div> </form>
I'm importing the validator.js and somehow it's working (it disables the submit button) but no erros are shown when I test the form. Can you help me to find where I'm doing something wrong?
(Plus: I'm using the laravel HTML Form Facades to generate this form)
Update the class from-group to form-group.
Init bootstrapValidator instance by the following code.
$(function () {
$("#your form id").bootstrapValidator();
);