hide default error message in AngularJs - javascript

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>

Related

Trigger Space button using Keypress on Javascript

I created a script for the registration form. In the username field, do not allow uppercase & spaces.
When I run the code below, there are 2 alerts ("Space case true" & "upper case true" ) when I press space on the keyboard. It should display only the alert "Space case true" if I press the space key. And "upper case true" if entered in an uppercase field. All errors in the column will be cleared.
is there something wrong with my code?
document.getElementById("usr").addEventListener("keypress", keyPress);
function keyPress(e) {
if (e.keyCode === 32) {
alert('Space case true');
return document.getElementById("usr").value = "";
}
}
function inputUsername(e) {
var character = document.getElementById("usr").value;
if (character === "") {
document.getElementById("usr").value;
} else if (character === character.toUpperCase() || character !== character.toLowerCase()) {
alert('upper case true');
document.getElementById("usr").value = "";
}
}
<form action="..." method="post">
<div class="form-group">
<label>First Name</label>
<input type="text" name="first_name" class="form-control" value="John">
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" name="last_name" class="form-control" value="Doe">
<span class="help-block"><?php echo $last_name_err; ?></span>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" value="jdoe#doe.com">
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Username</label>
<input type="text" id="usr" name="username" class="form-control" value="" oninput="inputUsername()">
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" value="">
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" value="">
<span class="help-block"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit">
<input type="reset" class="btn btn-default" value="Clear">
</div>
<p>Already have an account? Login here.</p>
</form>

AngularJS ng-minlength ng-required not working

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.

Can we use angular input validation without form

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

Angular form validation not working properly

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>

form validation cannot read property style of null

I have a form with validation but the date validation message is not showing and in the console it reads..property style of null and highlights this code "error_box.style.display = 'block';" within the context of this function.
function displayError(fieldname, message){
var input_field = document.querySelector('#'+fieldname);
var error_box = document.querySelector('#'+fieldname+'Message');
addClass(input_field, 'error');
removeClass(input_field, 'correct');
error_box.style.display = 'block';
}
I have the full code in a fiddle:
http://jsfiddle.net/tUa5e/
HTML
<form action="#">
<div class="formColumn1">
<label for="pickup"><span class="textStyle">Pick-up</span>
<input type="date" id="pickup"></label><br>
<label for="dropoff"><span class="textStyle">Drop-off</span>
<input type="date" id="dropoff"><br>
<span id="dropoff" class="message">That date is invalid</span></label>
<div id="pickuperror"></div>
</div>
<!--COLUMN ONE END -->
</div>
<!--COLUMN TWO -->
<div class="formColumn2">
<label for="name"><span class="textStyle">Full Name*</span>
<input type="text" id="name"><br>
<span id="nameMessage" class="message">You must have a valid name</span>
</label>
<label for="email"><span class="textStyle">Email*</span>
<input type="text" id="email"><br>
<span id="emailMessage" class="message">You must have a valid email</span>
</label>
<label for="phoneNumber"><span class="textStyle">Phone Number*</span>
<input type="text" id="phoneNumber"><br>
<span id="phoneNumberMessage" class="message">You must have a valid phone number</span>
</label>
<label for="postalAddress"><span class="textStyle">Postal Address</span>
<input type="text" id="postalAddress"><br>
</label>
<label for="city"><span class="textStyle">City</span>
<input type="text" id="city"><br>
</label>
<span class="textStyle">Addtional Information</span>
<textarea name="comment" form="usrform">Enter text here...</textarea>
<input type="submit" id="submit" value="Submit"/>
<!--COLUMN TWO END-->
</div>
</form>
<!--END OF FORM-->
</div>

Categories