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" />
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 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');"
/>
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}).
HTML form
I am trying to combine:
<input name="domain" id="domain" required="" type="hidden" value="domain.com">
<input name="username" id="username" required="" type="text">
to pass this combined information in the form as what is now:
<input name="user" id="user" required="" type="text">
Current code:
<input name="user" id="user" required="" type="text">
This requires the user to type both the domain and user name into the text box.
Example: domain.com\username
I would like to include the static domain “domain.com\” as hidden text to the input so they can just type the username.
Example: username
The code currently is:
<p>Username:</p>
<input name="user" id="user" required="" type="text">
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/>