HTML5 input attribute UTF-8, min/max, no special characters - html

For first validation of an input in HTML5 I want to use the pattern attribute.
What I have so far is:
<INPUT name="firstname" type="text" pattern="[A-Za-z]{2,}" title="2 more characters">
How can I include names that contain other UTF-88 characters but no special signs like question marks, commas and so on?
I think its clear what I want. The user should be able to type only valid first names. That includes "ü", "ñ" and many others.

Related

Regex to detect when certain characters or substrings

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).*" ...

HTML pattern validation on input elements

Abit annoying to work with since I cannot seem to get this right.
I need to get a pattern that accepts exactly 12 characters containing upper case letters and numbers. Nothing more nor less than 12 characters.
<input type="text" placeholder="Licence Number.." pattern="[A-Z0-9]+" maxlength="12" minlength="12" title="Enter Licence number">
I am going about this in a wrong way because everytime I am entering 12 characters it is activating the validation message.
You can remove the minlength attribute and use the pattern [A-Z0-9]{12} instead:
input:invalid {
color:red;
}
<input type="text" placeholder="Licence Number..." pattern="[A-Z0-9]{12}" maxlength="12" title="Enter Licence number">
The minlength attribute is not needed using the above pattern. The maxlength attribute isn't also needed with the above pattern but it stops the input after 12 chars.
At the moment your pattern allows all license numbers with at least one upper case letter or number.
I believe what you are missing in your regular expression is an exact count. Your regex will match if any input character matches your specification at least once. This means that no matter how long your input is, or how many "illegal" characters there are, if just one uppercase letter or digit is input, the regex will match.
The following will check for exactly 12 of any uppercase letter or digit.
[A-Z0-9]{12}

HTML form password requirements

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

Valid value for the "name" attribute in HTML

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

Are apostrophes valid containers for HTML element attribute values?

Usually HTML element attribute values are marked with a quotation mark, like
<input type="hidden" value="test" />
Sometimes, however, you see code like
<input type='hidden' value='test' />
Is it valid HTML and can it cause any problems? What about mixing the two, like
<input type='hidden' value="test">
?
The linked question from James Allardice's comment to my original question lead me to the answer: yes, apostrophes are valid containers for HTML element attribute values.
Specification: On SGML and HTML
By default, SGML requires that all attribute values be delimited using either double quotation marks (ASCII decimal 34) or single quotation marks (ASCII decimal 39). Single quote marks can be included within the attribute value when the value is delimited by double quote marks, and vice versa.