I am trying to validate my HTML input with the pattern attribute.but it is not working ..
enter code here :
<input type="number" maxLength="10" placeholder="Enter ABHA Address" pattern="[1-9]{1}[0-9]{9}" name="ABHA Address" />
try this
<input
type="text"
maxLength="10"
placeholder="Enter ABHA Address"
pattern="\d{10}"
name="ABHA Address"
oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');"
/>
Related
Consider this form:
<form>
<input type="text" value="" placeholder="Enter no. of employee" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" required/>
<input type="text" value="" placeholder="Enter Salary" required/>
<input type="submit"/>
</form>
I want a regular expression validation for Enter salary text feild with following:
The salary should be separated by commas like this format 1,00,000
It should not take any other input except numbers like in the case
of "Enter no. of employee" field
You can try this:
The salary should be separated by commas like this format 1,00,000
It should not take any other input except numbers like in the case of
"Enter no. of employee" field.
<form>
<input type="text" value="" placeholder="Enter no. of employee" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" required/>
<input type="text" value="" onkeyup="this.value = this.value.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');" placeholder="Enter Salary" required/>
<input type="submit" />
</form>
Here is the solution for my problem:
Indian currency:
onkeyup="this.value = this.value.replace(/\D/g, '').replace(/\B(?=(?:(\d\d)+(\d)(?!\d))+(?!\d))/g, ',');"
US Currency:
onkeyup="this.value = this.value.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');"
Working solution:
<form>
<input type="text" value="" placeholder="Enter no. of employee" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" required/>
<input type="text" value="" placeholder="Enter Salary" onkeyup="this.value = this.value.replace(/\D/g, '').replace(/\B(?=(?:(\d\d)+(\d)(?!\d))+(?!\d))/g, ',');" placeholder="Enter Salary" required/>
<input type="submit"/>
</form>
I have a form with multiple inputs, but when autofilling, the password manager always enters data in the first input above the password. Can I tell it to enter data in a specific input?
Code example:
<input placeholder="Your email" type="email"/>
<input placeholder="You fb id" type="text" />
<input placeholder="Your password" type="password"/>
Chrome might think that your email and text inputs are the same, so it auto fills both of them. So, we are going to put an irrelevant "type" on one of the inputs.
<input placeholder="Your email" type="email"/>
<input placeholder="You fb id" type="url" />
<input placeholder="Your password" type="password"/>
We set the email type to email, fb id to url, and password type to password.
Finally found a solution!!!! If you add an onChange event to the field that is above the password field and accepts automatic login fill, it will fill data in the field specified in js. Here is code example:
HTML:
<input placeholder="Your email" id="userEmail" type="email" />
<input placeholder="You fb id" id="fbId" type="text" />
<input placeholder="Your password" type="password" />
JS:
const fbId = document.querySelector("#fbId");
fbId.onChange = () => {
document.querySelector("#userEmail").value = fbId.value;
};
Result:
This is my first time writing a pattern for HTML phone numbers. I am based in Singapore. In my country phone numbers starts with 8 or 9 and has 9 digits.
This is my html pattern.
Can someone take look and let me know what went wrong?
I don't see any resources out there for including certain numbers only.
pattern: ([8|9]{1}[0-9]{8})
below is my full code
<h3>Sign Up</h3>
<label htmlFor="username" className="sr-only">Username: </label>
<input type="text"
name="username"
minLength= '5'
maxLength= '10'
onChange={onChange}
className="form-control"
placeholder="Enter Username" required />
<label htmlFor="password" className="sr-only">Password: </label>
<input type="password"
name="password"
minLength= '8'
pattern = "(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title = "Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
onChange={onChange}
className="form-control"
placeholder="Enter Password" />
<label htmlFor="email" className="sr-only">Email: </label>
<input type="text"
name="email"
onChange={onChange}
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,}$"
className="form-control"
placeholder="Email" required />
<label htmlFor="mobile" className="sr-only">Mobile Number: </label>
<input type="number"
name="mobile"
onChange={onChange}
className="form-control"
pattern="[8-9]{1}[0-9]{8}"
placeholder="Mobile Number" />
<button className="btn btn-lg btn-primary btn-block"
type="submit">Sign Up</button>
The answer is that pattern is not a valid attribute on input when type=number. Also the pipe character inside []'s doesn't mean "or". Either change the input type to another value, or use min/max.
<input type="text" inputmode="numeric"
name="mobile"
onChange={onChange}
className="form-control"
pattern="[89][0-9]{8}"
placeholder="Mobile Number" />
or
<input type="number"
name="mobile"
onChange={onChange}
className="form-control"
min=800000000
max=999999999
step=1
placeholder="Mobile Number" />
Phone number starting with 8-9 and remaing 9 digit with 0-9" required
<input type="text" class="form-control" readonly="readonly" value="" name="enquiry_mobile" placeholder="Enter mobile number *" pattern="[8-9]{1}[0-9]{8}">
If you expect that using pattern on input will prevent you from entering incorrect data base on that pattern, you're wrong.
You have to submit the form for the browser to validate. The first form bellow will submit, the second one will not.
<form>
<input value="891234567" type="tel" id="phone" name="phone" pattern="([89][0-9]{8})" />
<button>Submit</button>
</form>
<form>
<input value="121234567" type="tel" id="phone" name="phone" pattern="([89][0-9]{8})" />
<button>Submit</button>
</form>
Edit:
As #Robert McKee pointed in the comment below, the first pattern used on this answer is incorrect. Updated pattern to ([89][0-9]{8}).
This is my current code for the input field. How can I make it display a message saying that the number I've entered should not start with zero? thanks
<input type="number" min="10" max="1000" class="form-control" name="payment"
placeholder="enter payment" style="text-align:center" autofocus required/>
<br/>
For instance, typing 020 should not be accepted. Only numbers between 10 to 1000.
This should work:
<input type="text" class="form-control" name="payment"
placeholder="enter payment" style="text-align:center" autofocus required
pattern="[1-9]\d*" title="A number with no starting zeros"/>
https://jsfiddle.net/spL2par2/
try this using HTML's pattern attribute
<input type="number" class="form-control" name="payment"
placeholder="enter payment" style="text-align:center" pattern="[1-9]\d*" autofocus required/>
<br/>
I have two input fields in html; phone_number and alt_phone_number. I want alt_phone_number to have the same pattern as phone_number with the additional option of it being blank. Any advice?
<input id="phone_number" maxlength="10" name="phone_number" pattern="[0-9]{7}|[0-9]{10}" placeholder="Phone Number" required="required" size="10" type="tel" />
<input id="alt_phone_number" maxlength="10" name="alt_phone_number" pattern="[0-9]{7}|[0-9]{10}" placeholder="Phone Number" required="required" size="10" type="tel" />
Remove the "required" attribute from alt_phone_number.
<input id="alt_phone_number" maxlength="10" name="alt_phone_number" pattern="[0-9]{7}|[0-9]{10}" placeholder="Phone Number"size="10" type="tel" />