Develop Reference

AngularJS multiple validations on single element and validation without required

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>

How can I validate select tag using angular validations

I want to add a message, whenever the user does not select any value in the select tag.
Until now I have approached as below:
<form name="jdForm">
<div class="form-group col-sm-6 require">
<label class="form-control-label">Jd Name</label>
<select class="form-control" name="jdname" ng-model="oData.jdDetails.jdName" required>
<option>select</option>
<option ng-repeat="jd in jdNames">{{jd}}</option>
</select>
<span ng-show="jdForm.jdname.$untouched ">Please select jd name</span>
</div>
<button ng-click="fnSave()">Publish</button>
</form>
Here the message is shown what I have given in span but the thing is onload event. It is showing but I need to show it after clicking on publish button. The ng-click function call should not happen until the form is validated.

you need to kept submit button instead simple ng-click and on every error message tag apply condition of is form submitted or if you want to show error even on focus out add one more condition of is touched.
bellow is example i prefer for validating form
<span ng-messages="signupForm.password.$error" ng-if='signupForm.$submitted || signupForm.password.$touched'>
<span ng-message="required" class="help-block">Please Enter password</span>
</span>

I would use something like:
savePressed && (jdForm.jdname.$untouched ||jdForm.jdname.$invalid)
Where savePressed is just a variable which turns to true after pressing the publish button.
See the plunker for a working copy

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"

Validate form on submit only using parsley.js

I have a simple form
<form action="#" method="GET" class="parsleyVal">
<div class="input-group input-group-lg">
<input type="email" name="email" class="form-control input-email"
placeholder="Enter your email"
data-parsley-required-message="Please enter your email address"
data-parsley-required title="Please enter your email address"
auto-complete="off" data-parsley-trigger="submit" />
<span class="input-group-btn">
<button class="btn btn-orange" type="submit" data-parsley-trigger="click touch">
Sign up
</button>
</span>
</div>
</form>
Validation starts when the sign-up button is clicked.
However, if there is no email specified, an error is shown:
enter your email.
When users start typing their email address, parsley.js does the automatic validation and shows that email must be valid.
I'd like parsley.js to re-validate the email field when submit button is clicked again but not on the fly.
I have tried xCodexInlinexPlacexHolderx on the input field - does not help.

Looks like I finally figured out what I wanted.
Might be not ideal way to do it, if anyone could recommend something else.
$('.parsleyVal input[type=email]').on('keyup keydown', function () {
$('.filled').removeClass('filled');
$('.parsleyVal').parsley().destroy();
})
Script removes class to hide error message and destroy parsley validation, which will be triggered again on sign-up button click.

You can control what triggers the validation with two different settings:
data-parsley-trigger
Setting for what triggers the validation the first time. The default is null which basly means on submit
data-parsley-trigger-after-failure
Setting for what triggers a revalidation after the first failure. The default is input which means that the field will be revalidated after each change on the field.
The setting you need is: data-parsley-trigger-after-failure
Example:
<input type="email" id="profile-email"
data-parsley-required="true"
data-parsley-trigger-after-failure="submit"/>

Angular-messages appears & vanishes whenever page is Reloaded

I have two ng-messages associated with one Text field but I want one Message as a default -
This field is Mandatory!
which loads with the page get refreshed/opened
but the second one i.e Username contains atleast 3 characters should only shown when atleast one text entered into the textbox.
Whenever the page is loaded the second message which didnt required is shown and then vanishes when the page is loaded completely,How can I remove this and make the page more prominent.
Here's my code what I am trying is
<div class="errormsg" ng-messages="loginForm.username.$error">
<div ng-message="required">This field is Mandatory!</div>
<div ng-message="minlength">Username contains atleast 3 characters</div>
</div>
Suggest me a way to achieve this in angular.
Thanks in advance.

You need to use $pristine alongwith $invalid. See below example. I am using help-block instead of ng-message. You can add additional validations like min length, max length etc as desired.
<form name="contactUsForm" ng-submit="sendContactUsMessage();" novalidate>
<div class="form-group" ng-class="{ 'has-error' : contactUsForm.name.$invalid && !contactUsForm.name.$pristine }">
<label for="name">Name<span class="glyphicon glyphicon-asterisk mandatory" aria-hidden="true" /></label>
<input type="text" name="name" class="form-control" placeholder="When were you born?" ng-model="message.name" ng-required="true">
<p ng-show="contactUsForm.name.$invalid && !contactUsForm.name.$pristine" class="help-block">Name is required.</p>
</div>
</form>