Form validation using $touched and $error - javascript

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

Related

Angular JS ng-form Email validation before the data binding

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.

Chrome email field autocomplete options not showing for my website

As I visit many new websites for the first time, I see that:
For some websites, putting my cursor in the email field of signup form immediately shows me email options from what I had entered in other websites.
For other websites, putting my cursor in the email field does not give me any email options. And, I have to manually type every letter of the email.
I couldn't find what piece of code differentiates the two cases. For my website, I am stuck with #2. I am trying to achieve #1, where user can just re-use emails entered in other websites.
I used some code like this:
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="email">
It seems that you want to enable autocomplete, but you have specified the wrong attribute.
SYNTAX:
Autocomplete="on | off"
In order to save the email address entered for the first time though, you need to have a form tag with the attribute method="POST" on it. It is also recommended to use the autocompletetype attribute to help the browsers populate the forms more accurately.
NOTE: In some cases on older browsers you may also need to add an action if the form doesn't have one. action="javascript:void(0)" works.
An example with autocomplete on and method="POST":
<form method="POST" action="javascript:void(0)">
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="on" autocompletetype=”email”>
<input type="submit">
</form>
An example without autocomplete and method="POST":
<form>
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="off">
<input type="submit">
</form>
See also How to trigger Autofill in Google Chrome?
Difference is in autocomplete attribute of input element.
Syntax : <input autocomplete="">
It allows the browser to automatically filled the input field based on the previously filled data.
Hence, In #1 value of autocomplete attribute should be on.
DEMO
E-mail: <input type="email" name="email" autocomplete="on">
In #2 value of autocomplete attribute should be off.
DEMO
E-mail: <input type="email" name="email" autocomplete="off">
The answers so far are wrong/outdated or incomplete.
Using autocomplete="email" is perfectly valid. But the browsers do not handle it very well at the moment. In Firefox and Chrome, only the name attribute is used for autocompletion. So you should stick with name="email".
If the Chrome user really wants to have a proper autocompletion for every type that autocomplete supports, he/she has to fill out the Autofill settings. After these settings are filled, the autocompletion does not depend on the name attribute anymore, but uses the type of autocomplete. I.E. it will suggest the user's email address for fields with autocomplete="email".
So in order to have the best browser support, you should keep <input name="email" autocomplete="email" [...]>. As soon as there has been at least one submitted form with name="email" or prefilled Autofill settings, the browser should actually autocomplete your input field.
Further Resources:
caniuse: autocomplete attribute: on & off values
caniuse: input[autocomplete] (values besides on/off)
For some websites, putting my cursor in the email field of signup form immediately shows me email options from what I had entered in other websites.
I cannot reproduce that on the latest Chrome on Mac OS X. You actually have to doubleclick the input for the autocompletion to show up.
The correct values for the autocomplete attribute is "on" or "off" as you can see at : https://www.w3schools.com/Tags/att_input_autocomplete.asp
Use autocomplete="on" in form tag. like below.
<form action="" method="post" autocomplete="on">
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required>
<input type="submit" value="Submit">
</form>

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

Is there a way for a form to identify only one required field

For instance in this example;
<form>
<input type="email" name="email" id="useremail" placeholder="Email Address" required> <br>
<input type="tel" name="phone" id="userphone" placeholder="Phone Number" maxlength="10" required> <br>
<input type="submit" id="sidebarformsubmit" value="Submit">
</form>
Is it possible to somehow/somewhere be able to identify that the user has inputed something in EITHER the email or phone number field. So that on submit it doesn't show "this is required".
Reword: Can at least one of the form inputs be mandatory, both is allowed as is one or the other but not none. In the above example, the user needs to have at least one form of communication whether that be phone number or email. They can have both however, but not none.
If so, how would you go about this?
You can easily capture the change events from the inputs and set the required attribute accordingly.
Like this:
var email = document.getElementById('useremail'),
phone = document.getElementById('userphone');
function onchange(){
email[phone.value?'removeAttribute':'setAttribute']('required','required');
phone[email.value?'removeAttribute':'setAttribute']('required','required');
}
email.addEventListener('change',onchange);
phone.addEventListener('change',onchange);
jsfiddle
Is it possible to somehow/somewhere be able to identify that the user has inputed something in EITHER the email or phone number field. So that on submit it doesn't show "this is required".
1) No. If you use HTML5 required on a field then that field is required. There is no way to specify interdependence.
2) Yes. You can use client-side javascript validation, generally hooked to a form submit event to do as-complex-as-you-like validation. Prevent the submit by returning false from the event handler if you don't pass validation.
3) Yes. You can do validation that can be as complex as necessary on the server when you have received the submitted form, and return directly to the form if something is wrong.
3b) You Must do validation on the server, even if you have great client-side javascript validation, otherwise I will buy things from your site for one penny. You must not trust the client.

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