I'm trying to figure out, using Javascript, how to detect the value of an email input by using the last attribute "aria-invalid" (will equal "true" or "false"). The issue is other fields on the page use the same attribute "aria-invalid" in the same fashion. Not sure how I can read the value of the email input attribute only? I can NOT add any code to the element and NO jQuery please.
<input class="masked-zip-code not-empty input-validation-error" data-val="true" data-val-regex="Enter a valid (5-digit) ZIP code." data-val-regex-pattern="^\d{5}(-\d{4})?$" data-val-required="Enter a ZIP code" id="ZipCode" name="ZipCode" type="text" value="" aria-required="true" aria-describedby="ZipCode-error" aria-invalid="true">
You will need a way to tell which one is which, and since aria-invalid is shared, it can't be used for this. You can use an ID or type="email" to distinguish such field. See the following:
<input class="masked-zip-code not-empty input-validation-error" data-val="true" data-val-regex="Enter a valid (5-digit) ZIP code." data-val-regex-pattern="^\d{5}(-\d{4})?$" data-val-required="Enter a ZIP code" id="ZipCode" name="ZipCode" type="text" value="" aria-required="true" aria-describedby="ZipCode-error" aria-invalid="true">
<input class="masked-zip-code not-empty input-validation-error" data-val="true" data-val-regex="Enter a valid (5-digit) ZIP code." data-val-regex-pattern="^\d{5}(-\d{4})?$" data-val-required="Enter a ZIP code" id="ZipCode" name="ZipCode" type="email" value="" aria-required="true" aria-describedby="ZipCode-error" aria-invalid="true">
You can then use this code to access aria-invalid value:
var aria-invalid-value = document.querySelector("input[type='email']")[0].getAttribute('aria-invalid');
var invalid = document.getElementById('ZipCode').getAttribute('aria-invalid');
console.log(invalid);
See JSFiddle
Related
How to provide a custom validation for a number using HTML5
HTML
<input class="required" id="field" type="number" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>
Here it is allowed to type in only one number. But max length doesn't work here.
Is there another solution ?
use max attribute of the input number
<input class="required" id="field" type="number" max="999" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>
or even without pattern as
<input class="required" id="field" type="number" max="999" min="-999" name="cvv"/>
As per the documentation, the maxlength works only if the value of the type attribute is text, email, search, password, tel, or url. I suggest you should use javascript validations for this particular case.
For a very simple example please refer to this link.
I have a form in an app I'm building that allows a user to submit their name and email. This form is duplicated on two tabs (on the same page). Here's the basic form:
<form class="user-submit-form" ng-submit="userSubmit(user)" ng-hide="userSubmitted">
<h4><strong>FOR THE CHANCE TO HAVE YOUR STORY DRAWN, TELL US YOUR NAME AND CONTACT METHOD.</strong></h4>
<span>Entries limited to one caption per cartoon per person.</span>
<br>
<input type="text" title="Name required" ng-model="user.name" size="32" placeholder="Name" required>
<input type="email" title="Email required" ng-model="user.email" size="32" placeholder="E-mail Address" required>
<br>
<input type="checkbox" title="Must agree to Terms & Conditions" class="terms"
required><span>I have read and accept the Terms & Conditions</span>
<br>
<input class="user-submit-stories user-submit" type="image" src="images/submit_name.png">
</form>
When I make changes to the user.name attribute the both of the forms update the value. However, when I update the user.email attribute the other form's value is not updated. I've also noticed that when I try to explicitly define the model's attributes in the related controller, the change is not made in the form for user.email
What could be causing a situation where one attribute is properly binded but the other is not?
<input type="text" id="newFname" pattern="^[a-zA-z0-9 _-]{2,}$" required placeholder="First Name" />
<input type="text" id="newLname" pattern="^[a-zA-z0-9 _-]{2,}$" required placeholder="Last Name"/>
Is it possible to disable html validation on second input without modifying pattern or required attributes?
What you could do, put the inputs in separate forms and add the novalidate attribute to the second form.
Check this page for more information.
I need to validate a text box.user should not enter any mail id and also no numbers lengthier than 10..Please give your suggestions
As everyone else is commenting, please try to do some research before posting your question, as all of the below answers have been taken from this site's previous answers only.
Your query can be divided into two parts -
Email Validations
You can find email validation scripts already answered here and here on StackOverflow.
For PHP server-side validations, taken from here.
function validateEmail($email) {
return (bool) stripos($email,'#');
}
All the above functions will return true if the text entered is an email. So you might probably need to check for a false condition as you do not want email addresses to be entered.
Number Validations
Similarly, the check for numbers not being entered more than 10 characters, you may use:-
Simple
Javascript validation can be found here
However, there are still some unhandled cases in your question - What happens when someone enters normal text but greater than 10 characters? Should this be allowed?
Ideally it should as it is not an email, it is not a number greater than 10 digits?
<label>
Student Mobile no :
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="tel" name="phone" size="10"/> <br> <br>
<label>
Guardian Mobile no :
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="tel" name="phone" size="10"/> <br> <br>
<label for="email">Email :</label>
<input type="email" placeholder="Enter Email" name="email" required>
Just use either maxlength for text type input attribute inside the input tag of HTML forms or use size attribute for phone type input attribute the same.
For the email validation use type = "number" attribute in the input tag of HTML forms.
Please refer to the code above.
This is a follow on question for this question:
Server-side validation form Angular.js
So using that answer you could write some HTML in a template that would display a specific error for each error you give $setValidity. For example here is one:
<input ng-model="user.lastName" required="true" id="lastNameField" name="lastName" type="text" class="span3" placeholder="Last Name"/>
<span class="inlineError" ng-show="myProfile.lastName.$error.required">Required</span>
However, if I wanted to add one for last names must be 4 or more characters long I'd have:
<input ng-model="user.lastName" required="true" id="lastNameField" name="lastName" type="text" class="span3" placeholder="Last Name"/>
<span class="inlineError" ng-show="myProfile.lastName.$error.minRequired">Last name must be at least 4 characters long</span>
My question is how could I write a generic handler for all errors on a field. Something like:
<input ng-model="user.lastName" required="true" id="lastNameField" name="lastName" type="text" class="span3" placeholder="Last Name"/>
<span class="inlineError" ng-show="myProfile.lastName.$error.required">{{myProfile.lastName.$error.required}}</span>
Is that possible?
Do you mean that you just want to indicate the validity of the form element?
Then, you can do:
<span ng-show="myProfile.lastName.$invalid">Input field is invalid.</span>
If you need to be more specific, you can use ng-repeat to iterate through
myProfile.lastName.$error object and display all the errors.
In this case, you'll have to have some error-name to error-message translation for
readability.