Different title when input invalid and input empty - javascript

I have an input:
<input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required>
If I input a number, the title will appear. But if I don't input anything, it will give the same error title. How can the title when I input not only letters is different when I doesn't input anyhing?

I think that your problem is similar to the one in this link.
The correct answer there says that:
If you set a value with setCustomValidity() then the field is invalid. That is setting a non-zero length string causes the browser to consider the field invalid. In order to allow for the effects of any other validations you have to clear the custom validity:
<input type="password" name="user_password_new" pattern=".{6,}" required oninvalid="setCustomValidity('Minimum length is 6 characters')" oninput="setCustomValidity('')" />
Here is a working example for your case to see:
<form>
<input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required oninput="setCustomValidity('')">
<button type="submit">Submit</button>
</form>

Related

Angular 2+ multi-part form validation, how to check validity of single input

I have a form, and the form has multiple inputs that are all bound to different variables. Before submitting the form, I need to do validity checks, pristine checks, etc. For example, I want my submit button to be disabled if every part of the form is pristine, or if something is invalid.
Using Angular 5, I am trying to get access to the .pristine, .valid, and .invalid flags for each input field, but the values are either undefined or "cannot get .pristine of undefined".
I am able to get these flags on the entire form itself, but this doesn't help, because I want to know how to get it for each individual input.
Here is my current code (I've removed a number of my inputs to simplify the example).
<form #editDetailsForm="ngForm" name="editDetailsForm" >
<label for="name"> Name </label>
<input type="text" id="name" name="name" maxlength="40" [(ngModel)]="myName" required />
<label for="description"> Description </label>
<textarea id="description" name="description" maxlength="250" [(ngModel)]="myDescription" required ></textarea>
<button id="submit" type="button"
[disabled]="saveButtonDisabled(editDetailsForm.invalid, editDetailsForm.name.invalid, editDetailsForm.description.invalid)"
(click)="updateDetails()" >
Save
</button>
</form>
If you see, I bind disabled attribute on the Save button to saveButtonDisabled() function, where I want to pass in information about each input's validity. The first argument, editDetailsForm.invalid returns a true or false, but the other values return undefined.
How do I check validity of these individual inputs?
EDIT: I realize I can derive all of this info inside my component because all of the input values are bound. However, it'd be easier just to check a flag or two.
I'm not sure I totally understand what you want to do, but this is how you get access to the form controls .pristine, .invlaid
<input type="text" id="name" name="name" #name="ngModel" maxlength="40" [(ngModel)]="myName" required />
The #name="ngModel" sets a template reference to the FormControl angular creates
Then you should be able to do something like this:
<input type="text" id="name" name="name" #name="ngModel" maxlength="40" [(ngModel)]="myName" required />
<div *ngIf="name.pristine">
Name is Pristine
</div>
Just to clarify, the individual form fields bubble up to the form itself. So if any field has been touched, then the whole form will be pristine == false.
You can access the input controls using the .controls property, like:
<button id="submit" type="button"
[disabled]="editDetailsForm.controls.name?.invalid || editDetailsForm.controls.description?.invalid">
Created a stackblitz. https://stackblitz.com/edit/angular-5ir4k7
Added template reference variable for ngModel and validate using isValid.

checking condition and displaying two different message using setCustomValidity

I want to check two conditions in the html form text field validation. In the below code it checks and shows whether the phone number entered is in the right format. If it is wrong, it displays a message 'Enter a valid mobile number' as I set in setCustomValidity. But it shows the same message when the field is blank. But I want to it to display a different message like 'Please fill this form' when theis field is blank. Is it possible to do it in with html itself as I have used html validation for all the other fields.
<input name="phno" type="text" size="50" maxlength="10" pattern="[0-9]{10}" oninvalid="this.setCustomValidity('Enter a valid mobile number')"
`oninput=`"setCustomValidity('')" required/></td>
inline conditions of html pattern are in JavaScript so simply add this if (this.value!=''):
<input name="phno" type="text" size="50" maxlength="10" pattern="[0-9]{10}" oninvalid="if (this.value!=''){this.setCustomValidity('Enter a valid mobile number')}" oninput="setCustomValidity('')" required/>

Validate phone in jQuery

I have this input field that the user need to put his phone number:
<input type="text" id="Phone" />
I want to validate if the number is in the correct format.
The format should be this:
Only 10 digits (no letters, no "-" and no other characters)
Can someone help me please?
There is a plugin for this and it is called 'Jquery mask plugin'. Also there is another question about it here. Check them out.
You can use pattern attribute with RegExp \d{10} , maxlength set to 10, title set to the message to be displayed to user at invalid submission , placeholder set to display message indicating expected format of input
<form>
<input type="text"
pattern="\d{10}"
maxlength="10"
placeholder="Input 10 digits"
title="Input 10 digits" />
<input type="submit">
</form>

Angular text form with numbers only?

So I have an input form in Angular here:
<input ng-model="sc.zip" class="form-control" maxlength="5" type="text" />
I don't want type="numbers" because the form needs to be a plain empty textbox. However, I only want the user to be able to type numbers. Either I need to detect when the input is not a digit, or be able to search through the box to find non-digits when submitting.
Either way, I need to validate that the form is digits only. Any help would be appreciated!
use regex
<input name="title" type="text" ng-model="sc.zip" ng-pattern="/^[0-9]*$/" required/>

Disable input validation for input type=number

I have a numeric input tag in a form element:
<form novalidate="">
<input type="number" data-role="none" autocapitalize="off" autocorrect="off" autocomplete="off" placeholder="Quantity" class="quantityInput" />
</form>
When user types in any non-numeric value, the browser validates it and removes the whole text before submit call.
From the suggestions of other answers I tried using novalidate and novalidate="novalidate" attributes on the form. I also tried to tap invalid events. But nothing seems to work. The browser just removes the whole text if it is non-numeric before doing the submit call.
The reason to use input type="number" is that I need a quantity field in which user types something like 10 grams or 23 pcs etc. So by setting the input type="number", iOS shows the numeric version of the keyboard first.
How do I disable browser validation for input types of number?
The modern answer (as of 2020) is to use inputmode:
<input type="text" inputmode="email">
<input type="text" inputmode="tel">

Categories

Resources