How do I validate for a pattern like this...
(562) 810-5566 or (714) 433-4434
Note that it will contain parenthesis and a space.
My current input control looks like this:
<input type="tel" data-tel-msg="Invalid Phone Number!" class="k-textbox" pattern="^\d{3}-\d{3}-\d{4}$" required />
I'm aware the current pattern matches 3334445555, but it's not what I'm looking for, when I tried adding parenthesis the JavaScript console just gave an error incorrect regex syntax.
Also as a bonus, if you know how to get it to display a custom error message that would help also. Currently my data-tel-msg is not working.
You can use the following code:
input:valid {
color: green;
}
input:invalid {
color: red;
}
<form name="form1">
<input value="(555) 324-5643" type="tel" title="Invalid Phone Number!" class="k-textbox" pattern="[(][0-9]{3}[)] [0-9]{3}-[0-9]{4}" required />
<input type="Submit"/>
</form>
The regex \(\d{3}\)\s\d{3}-\d{4} matches strings in (###) ###-#### format since the HTML5 pattern is anchored (to the start and end of string) by default.
The title attribute allows showing error text.
If the backslashes are lost in your environment, just double them, or replace \d with [0-9]. To match a literal \( you can also use a character class: [(] (same for ): [)]). Inside a character class, these ( and ) lose their "special" grouping meaning.
Related
I'm currently using a regex to detect space, single-quote & double-quote in an input.
I would like to add the detection of several strings: ex. 'xxx' & 'yyy'. It should only detect for those complete strings, so 'x' or 'y' by itself wouldn't be detected.
Currently have this in html input code:
<input type="text" pattern="^(?=.*[\x27\x20\x22]).+$" ...
If you just want to ensure exactly one space, single-quote or double-quote appears in the input, you can simplify your pattern to:
<input type="text" pattern="[\x27\x20\x22]" ...
To detect other things, you can add "alternations", separated by |:
<input type="text" pattern="[\x27\x20\x22]|xxx|yyy" ...
As per jhnc: To detect any instance, no matter where in the string:
<input type="text" pattern=".*([\x27\x20\x22]|xxx|yyy).*" ...
I need to create a registration form in HTML which has a password input with the following constraints:
Is a mandatory field, should be validated. Minimum of 7 characters. Should have at least one special character and one number. Do not use java script, use HTML 5 features.
I have written the following code to for the above input:
<input type="text" name="password" pattern="(?=.*\d)(?=.*[\W_]).{7,}" required>
I need to submit this code as part of an assignment and I get the error:
Correct HTML Component with the name 'password' must be used with appropriate constraints
which means I am not using the correct attributs.
What changes should I make to the pattern attribute?
This code works perfectly with validation message
<p>Password: <input type="password" name="pw" pattern="(?=.*\d)(?=.*[\W_]).{7,}" title="Minimum of 7 characters. Should have at least one special character and one number."></p>
try it here :
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_pattern3
I think this will work.
Password:<input type="password" name="pw" pattern="^(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!#$%^&*-]).{7,}$" title="Minimum of 7 characters. Should have at least one special character and one number and one UpperCase Letter.">
Pattern attribute will also use a Regular Expression to validate your form-data.So for more results you can also search for Regular Expression
Here's some code:
<form>
<input type="text" name="Title" pattern="[a-zA-Z0-9`\~\!\#\#\$\%\^\&\*\(\)\-\\\\=\+\{\}\[\]\']{2,40}" required>
<input type="submit">
</form>
I would like to add quotes to the allowed in the regex expression, however \" does not work and " does not work, either...
So I can just replace the quotes with \x22. Now I'll have to figure out which one to use (I can instead disallow instead of allow, or use \x22 in place of the quotes). I can't remember all of the original reasons I chose to specifically allow, so I might stick with replacing it with \x22, since it's so simple and less modifying.
I'm trying to put some data in a hidden form field for a POST. But the field is showing up on my Web page. There are no styles or style sheet. Here's how the fields are defined. Any ideas?
<form action="GetUserPics.php" method="post">
<input type=”hidden” name=”picIndex” value="WHAT?">
<input type="submit" value="previous">
</form>
You are using non-standard quotation marks for your attributes on that field. HTML is interpreting those quotes as part of the attribute's value, as in:
<input type="”hidden”" name="”picIndex”" value="WHAT?">
Since ”hidden” is not a valid input type, it's reverting to text.
Because you're not using ASCII quotes, you're using some sort of weird slanty quotes that the HTML is trying to use as the type (and thus it will fall back to text). Interestingly, you're not using them to print the value, which incidentally hides your mistake.
<input type=”hidden” name=”picIndex” value="WHAT?">
Those are not regular double quotes. Try
<input type="hidden" name="picIndex" value="WHAT?">
Can you replace your hidden type input with this:
<input type="hidden" name="picIndex" value="WHAT?"/>
I use PHP to get radio button values from an HTML page. My HTML looks like this:
<input type="radio" name="1.1" value="yes">
<input type="radio" name="1.1" value="no">
<input type="radio" name="1" value="yes">
<input type="radio" name="1" value="no">
The result is that $_POST['1'] returns a value, but $_POST['1.1'] returns nothing. I checked the HTML 4 specifications, say value for the name attribute only starts with a letter, but 1 is not a letter. How come it gets returned while 1.1 does not? Or is there some other magic happening here? I use the latest version of Chrome.
By HTML rules, the name attribute may have any value: it is declared with CDATA type. Do not confuse this attribute with the references to attributes declared as having NAME type. See 17.4 The INPUT element, name = cdata [CI].
In the use of $POST[...] in PHP, you need to note this PHP rule: “Dots and spaces in variable names are converted to underscores. For example <input name="a.b" /> becomes $_REQUEST["a_b"].” See Variables From External Sources.
So $_POST['1'] should work as is and does work, but instead of $_POST['1.1'] you need to write $_POST['1_1'].
Try substituting the period for something else like a hyphen. In both the form and the PHP code. Periods are generally used for a . in the extension name.
When it comes to key names for parameters in either GET or POST headers, you want to only use alphanumeric characters, with some special characters generally. Such as hyphens, underscores, etc. You can always do a URL encode if you need to as well.
You should name your input items with text, not numbers. They should not contain any characters such as ., ,, !, and ?. This can cause problems. For more information submitting the data, go to PHP and HTML Radio Buttons