AngularJS multiple validations on single element and validation without required - javascript

I am building a form and using the inbuilt AngularJSvalidations objects to validate the form. I have following form:
<form name="myForm" ng-submit="DoSomething()" novalidate>
<textarea name="EmailTo" required="" rows="2" cols="20" ng-pattern="EmailRegEx" ng-model="EmailTo"></textarea>
<textarea name="EmailCC" rows="2" cols="20" ng-pattern="EmailRegEx" ng-model="EmailCC"></textarea>
<textarea name="EmailBCC" required="" rows="2" cols="20" ng-pattern="EmailRegEx" ng-model="EmailBCC"></textarea>
</form>
I am displaying the error messages like this:
<ul>
<li ng-if="!myForm.EmailTo.$valid">Please enter email To</li>
<li ng-if="!myForm.EmailCC.$valid">Please enter email CC</li>
<li ng-if="!myForm.EmailBCC.$valid">Please enter email BCC</li>
</ul>
In the above form , the EmailTo and EmailBCC are mandatory so I have added the required attribute on them and EmailCC is not mandatory so there is no required attribute on it. I have two questions:
Since EmailCC is not mandatory, how can I validate it without adding the required attribute in case the user enters any value in it?
How can I display separate messages for required and ng-pattern validations? Display a message when the EmailTo field is empty and display another message when the entered email is not valid?
EDIT:
I have declared message with combination of $valid and $untouched to show message when field is empty and when field is not valid like this:
<li ng-if="myForm.EmailTo.$untouched">Please enter email To</li>
<li ng-if="(!myForm.EmailTo.$untouched && myForm.EmailTo.$invalid)">Please enter valid emails seaparated by ';' in email To</li>
The above invalid message is displayed only when the control loses focus (onblur) and not on keypress, I want the valid message to be displayed on keypress instead of when control loses focus. Also when I make the control empty, is still displays the invalid message instead of the empty message. How to fix this?

1) For your first question:
In AngularJS inputs have the following states:
$untouched The field has not been touched yet
$touched The field has been touched
$pristine The field has not been modified yet
$dirty The field has been modified
$invalid The field content is not valid
$valid The field content is valid
Source: https://www.w3schools.com/angular/angular_validation.asp
You can check if EmaillCC input is pristine with something like this in your controller:
var isEmailCCPristine = $scope.myForm.EmailCC.$pristine;
2) By placing the correct condition in the list items ng-if:
<li ng-if="myForm.EmailTo.$untouched">Please enter email To</li>
<li ng-if="myForm.EmailTo.$invalid">Please enter a valid email To</li>
I didn't test but you might have to adjust this codeblock according to your needs.

There is already a directive. You can use ngMessages for this. Link: https://docs.angularjs.org/api/ngMessages/directive/ngMessages
Example:
<form name="myForm">
<label>
Enter your name:
<input type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>

Related

How to hide/show helper messages in form validation with AngularJS?

I have included ngMessages into my AngularJS application to do some form validation. It's pretty useful, however I've came across something that I can't really understand.
Let's say I have this code inside my Form that is named: testForm
<input type="text" name="test1" class="form-control" ng-model="test1" required>
<span class="help-block" ng-hide="testForm.test1.$error">Please enter the a test name</span>
<div ng-messages="testForm.test1.$error" ng-if="testForm.test1.$dirty">
<div class="text-danger" ng-message="required">This field is required</div>
</div>
I want to hide the helper message when there is an error in this textbox EXCEPT if the user hasn't started to type anything yet (on $dirty).
How is this possible? With this above code my testForm.test1.$error always gives me true value even if it's empty, therefore always hiding it.
What am I missing here?
EDIT:
I'm clarifying more what I want to achieve:
when typing, the helper message should be visible and the error message should be hidden
when there is an error, the helper message should be hidden and the error message should be visible
when nothing is touched yet, the helper message should be visible and the error message should be hidden
Have you tried ng-hide="testForm.test1.$error && testForm.test1.$dirty"? That way the message always displays when the input field is clean (not dirty).
Edit:
As far as I see it, you want the message to be visible when input field has focus.
In your controller, initialize hasFocus to false:
$scope.hasFocus = false;
In your HTML file:
<input type="text" name="test1" class="form-control" ng-model="test1"
ng-focus="hasFocus=true" ng-blur="hasFocus=false" required>
<span class="help-block" ng-hide="!hasFocus && testForm.test1.$error && testForm.test1.$dirty">Please enter the a test name</span>
<div ng-messages="testForm.test1.$error" ng-if="testForm.test1.$dirty">
<div class="text-danger" ng-message="required">This field is required</div>
</div>
You can replace ng-hide as follows if it suits you. It will hide the message when test1 is not empty and when it has error.
ng-hide="!hasFocus && testForm.test1.$error && test1"

Prevent angular validation from occurring while entering data

I have a form with an email field. I would like to prevent the user from submitting unless the email address exists and is valid. However, I only want these errors to appear when toggling out of the email field or clicking sumbit. My "invalid email" message is appearing WHILE the user is typing the email and remains visible until they've finished entering a valid email. How can I prevent this behavior?
<div ng-show="emailMeForm.Email.$error.required" class="errorMessage">
You must enter an email
</div>
<div ng-show="emailMeForm.Email.$error.email" class="errorMessage">
Email address invalid
</div>
<form name="emailMeForm" novalidate="">
Email Address
<input ng-model="vm.emailAddress" type="email" name="Email" />
<button ng-click="emailMeForm.$valid">Continue</button>
</form>
Must be sufficient:
ng-show="emailMeForm.Email.$touched && emailMeForm.Email.$error.required"

In ngTagsInput how to show validation message for different cases?

I am using ngTagsInput Angular plugin for getting multiple email ids. Below is my code:
<form name="contact_us" role="form" novalidate enctype="multipart/form-data">
<div class="form-group">
<label class="control-label" for="from_email">
From
</label>
<tags-input ng-model="contactUs.emails" type="email" id="from_email"
placeholder="From" name="from_email"
allowed-tags-pattern="^[A-Za-z0-9._%+-]+#(?:[A-Za-z0-9-]+.)+[A-Za-z]{2,}"
allow-leftover-text="false" ng-required="true" add-on-space="true">
</tags-input>
<p class="help-block" style="color:red"
ng-show="contact_us.from_email.$invalid && (contact_us.$submitted || contact_us.$dirty)">
Please enter proper email address
</p>
<button type="submit" class="btn btn-default" ng-click="Send(contact_us)">
Send
</button>
</form>
In above code 3 validation has been added those are as follows:
For Mandatory fields.
Field should accept only an email id.
It should not allow duplicate email id.
The above cases are working fine. But, I want to show the error message dynamically according to the above one of the case has occurred. Please help me out !!!
ngTagsInput supports attribute below for change to capture, it fires before adding to model
on-tag-adding="foo($tag)"
$scope.foo(function(tag){
// look for error
// if found return false
// change the text of tag
tag.text='what ever';
return tag;
})
For required:
<p class="help-block" style="color:red"
ng-show="contact_us.from_email.$error.required">
email address is required
</p>
For pattern & duplicate, I think no validation flag has been provided and you have to write your own to perform validation.
For duplicate, maybe this will help.
Angularjs - How to check for unique inputs and if there is a duplicate mark both as invalid

Angular JS ng-message update only on page submit

I have a form wherein I am displaying validation errors only on page submit as in the code below. This validation works fine but as soon as the user corrects the validation on the input field. The validation message goes away immediately. Is there a way to preserve this validation message until the user submits the page again? My requirement is that validation messages should appear and disappear only on page submits.
<span id="error" ng-if="addForm.$submitted">
<div class="ErrorMsgBox">
<ul>
<li ng-messages="addForm.startDate.$error">
<small id="startDate_req" ng-message="required">Date is mandatory.</small>
</li>
</ul>
</div>
</span>
For example, if the user does not give a date and submits the form, the user is presented with a validation message "Date is mandatory". Now when user enters any value, the message goes way. I need this validation message to be retained until the page submit again.
I tried ng-model-options but input field is not retaining the value until the page is submitted.
ng-model-options="{ updateOn: 'submit' }"
Please suggest.
You can add a ng-if in conjunction with form.$dirty or form.$submitted to your messages directive. Also you can create your own custom function
ng-if: showErrors()
See: https://www.sitepoint.com/easy-form-validation-angularjs-ngmessages/
<label>User Message:</label>
<textarea type="text" name="userMessage" ng-model="message"
ng-minlength="100" ng-maxlength="1000" required>
</textarea>
<div ng-messages="exampleForm.userMessage.$error"
ng-if="exampleForm.userMessage.$dirty">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">Message must be over 100 characters</div>
<div ng-message="maxlength">Message must not exceed 1000 characters</div>
</div>

Form validation using $touched and $error

I'm trying to implement client-side validation using built-in validation mechanisms provided by AngularJS.
I've a simple input of type email which must display an error if the email is invalid once the form get submitted using $submitted or once the control has lost focus using $touched.
<form name="form" novalidate>
<div class="form-group">
<label for="input-emailaddress">Adresse email</label>
<input type="email" class="form-control" name="input-emailaddress" placeholder="Entrez votre email" ng-model="user.email" required="required">
<div ng-show="form.$submitted || form.input-emailaddress.$touched">
<div ng-show="form.input-emailaddress.$error.email">Please insert a valid email address.</div>
</div>
</div>
</form>
But there's no error triggered when I type an invalid email address. $submitted works fine cause if I remove every other conditions, the message appears once triggered, but when I need to access a specific field (form.input-emailaddress), validation does not work.
Does anyone could help me figure out why this doesn't work?
As you are accessing JSON object using . at that time you variable shouldn't contain any character like - or shouldn't be started with numeric variable. You should do access form.input-emailaddress like form["input-emailaddress"]
because it contains hyphen in name will not work
Update
As per #SunilD suggestion we could have change name to should not follow in such crieteria you could use cammel case instead of doing this

Categories

Resources