Angular JS ng-form Email validation before the data binding - javascript

I have an Angular JS form as below:
<div ng-controller="EmpController as empVm"
name="formEmployee" ng-form >
<div>
<div class="col-sm-5">
Email
</div>
<div class="col-sm-7">
<input type="email" validate-length ng-maxlength="2000"
ng-model="empVm.profileData.email" name="email"
ng-pattern="^[_a-zA-Z0-9]+(\.[_a-zA-Z0-9]+)*#[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,4})$"/>
<div ng-show="(formEmployee.email.$dirty || formEmployee.email.$touched) && formEmployee.email.$invalid">
<span ng-show="!formEmployee.email.$error.pattern">Invalid Email</span>
</div>
</div>
</div>
</div>
Even though the email field has the valid email the form is always invalid. Once I interact with the email text box like changing some text in the email text box the form is becoming valid again.
What I am trying to achieve is, the form should validate data for the email text box once the value is bind from the service call and form should be valid after the page load if it is valid email else form should be invalid and the above div which has the invalid email message should appear.

The span specifying Invalid Email is not closed.
The value in the ng-pattern should be an $scope/vm object or a raw string (i.e. between quotes).
The email pattern does not seem to be complete.
In your example, we don't know where frmAgentProfile comes from.
You are talking about a service call, we don't have any informations about that. If you want to validate from a service call, you should create a custom async validator.
I pushed your code in a fiddle where the ng-pattern works.
HERE

Data coming from the back end service call had a space character at the end of the email for which the regex failed and that space was not visible in the text box on UI and that's the reason why the form was becoming invalid.

Related

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 to disable the popup that appears for input validation ("Please fill out this field")?

I am using Angular 2 and I have a form with input as follows (simplified for readability's sake):
<input class="body-text1" type="text" [(ngModel)]="model.name" name="name" required minlength="1">
<!--more, similar inputs -->
I have my own angular validation, but the first input field gets a popup that is relevant to the input. For example, a plain text required input will receive a popup that says "Please fill out this field." while an input marked with type=email will say something like "Invalid email, must have #" (I forget the exact email popup text).
As far as I can tell, I did not add these popups in. I have tried adding formnovalidate / novalidate as attributes to the inputs based on a question that looked similar but it did not help.
You might need to add novalidate attribute to your form to prevent Browser default behaviour.
<form novalidate>
This popup shows because the required attribute is on the element. If you remove this, the popup will be gone, so will the validation be though.

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

jQuery Validation Plugin not validating fields in a hidden div

I have the following div block which i'm trying to validate using the jQuery validation plugin
<div class="row" id="signupaddress1" hidden>
<label for="id-31"><span>Address 1:</span><span class="mark">*</span></label>
<input type="text" class="required" id="id-31" name="address1"/>
</div>
Then using
$("#form").validate(...);
to validate the form. But if this div is hidden it appears to ignore the field when validating. The form uses a postcode lookup to populate the address fields and then displays the div when this has been populated but, as a result, if only the postcode is entered the form can be submitted without validating address1 contains anything.
I guess you are using the new validator plugin which ignores hidden fields by default. To overwrite that just use this and it will work.
ignore:""
You can refer to the Github repo for the change Changeset
You are telling jQuery to validate the form but where is your form tag you should do something like this
<form><div class="row" id="signupaddress1" hidden>
<label for="id-31"><span>Address 1:</span><span class="mark">*</span></label>
<input type="text" class="required" id="id-31" name="address1"/></div></form>
than use
$("form").validate(...);

Categories

Resources