I'm currently having an input element for a phone number and trying to use the pattern attribute but it refuses to do so. it says "Validation(HTML5): Pattern is not a valid attribute of element input"! When I change the type to "text" it says that pattern attribute is only valid when title is present!
<input type="number" class="form-control"data-require="" id="Mobile" placeholder="Mobile No" autocomplete="off" pattern="[\+]\d{3}d{9}" required>
UPDATE:
I Added title attribute and it's working now! but my only issue is that when i click submit, it submits the form even though that the format is not matching.
The <input> should be valid without the title attribute (validated on https://validator.nu/):
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<input type="text" class="form-control" data-require="" id="Mobile" placeholder="Mobile No" autocomplete="off" pattern="[\+]\d{3}d{9}" required>
</body>
</html>
Additional changes:
A space is missing before attribute data-require.
The pattern attribute is only allowed on the following types: email, password, search, tel, text, or url.
Your regular expression ([\+]\d{3}d{9}) is also invalid. You can try one of the following rules:
[\+]\d{3}\d{9}
[\+]\d{12}
You are missing the \ before the second d to match only numbers. The second pattern is a minified version of the first pattern.
It's fixed, just added this in my javascript.
/[+]\d{3}d{9}/.test(PhoneNo)
You can add oninvalid attribute to the tag
<input type="text" name="HasAPattern" pattern="\w{3}" title="Enter 3 characters" oninvalid="setCustomValidity('Needs to match patern')" >
The HTMLSelectElement.setCustomValidity() method sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does not have a custom validity error.
You can also use code like event.preventDefault(); inside it to cancel the submit if invalid
Related
can I use required attribute here? when I am not using form tag ? whether required works only inside form tag?
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" required>
No, as mentioned here:
The "required" attribute only works on form submit and since your
input has no form the browser does not know what to validate on
submit.
Here is also what W3C says:
When present, it specifies that an input field must be filled out before submitting the form.
So — assuming you aren't intending to use some sort of JS solution — no form, no required.
Say I have the following HTML:
<form>
Fax #: <input type="number" name="fax" minlength="10" required />
<button>Print</button>
</form>
If I enter in "11" as the Fax # and hit "Print" the form submits without issue. I would like it to present some sort of error. If the minlength attribute doesn't do that then what exactly does the minlength attribute do?
I'm using Google Chrome 74..
The minlength attribute doesn't apply for input of type number. This is actually quite reasonable. Numbers don't have a length, text do. For reference, see The official documentation.
Using input type="number" for a fax field is semantically incorrect, anyway. You should use input type="text". Then you can limit its length by the maxlength or minlength attributes or even use the pattern one.
If you absolutely need to use number as input type and you need to limit the value to 10 digits, you can do it by using min and max attributes:
Fax #: <input type="number" name="fax" min="1000000000" max="9999999999" required />
Like I said, though, this is absolutely incorrect semantically.
Consider the following form:
<form>
<input type="text" minlength="5" value="1234">
<button type="submit">submit</button>
</form>
When I click the submit button without changing anything, the minimum length validation doesn't work and the form submits successfully.
But after changing the input value, e.g. 1234 -> 12345 -> 1234, the validation works and the form does not get submitted.
Why?
This is by design. The minlength attribute only validates a field once it has been edited by the user. It doesn't validate the field if its value hasn't been changed, even if that value doesn't meet the constraint. From the spec (emphasis mine):
Constraint validation: If an element has a minimum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), its value is not the empty string, and the JavaScript string length of the element's API value is less than the element's minimum allowed value length, then the element is suffering from being too short.
If you need to validate the value regardless of whether the user has since edited the field, see Racil Hilan's answer (although their statement about the minlength attribute not being supported everywhere doesn't imply anything and is largely irrelevant — as shown, this is clearly by design; if anything it shows that the browsers that do support the attribute support it fully).
The minlength attribute is not supported in all browsers. You can use the pattern attribute instead. The required attribute is also needed, otherwise an input field with an empty value will be excluded from the validation.
Try this:
<form>
<input type="text" pattern=".{5,}" required value="1234">
<button type="submit">submit</button>
</form>
The added benefit of using the pattern attribute is that it validates initial values, so you will not have the issue that you've seen with the minlength attribute which doesn't validate initial values (as explained in details by BoltClock's answer). The downside, though, is that the validation message is not as elegant. For example, the message in Chrome is "Please match the requested format" for pattern and "Please lengthen this text to 5 characters or more" for minlength.
You can use placeholder="1234" instead of value="1234" and don't forget to put "required" into your input field. So it works after
<form role="form">
<input type="text" name="number" minlength="5" placeholder="1234" required>
<button type="submit">submit</button>
</form>
Here I have a HTML5 input.....
<input type="number" pattern="\d{10}" data-pattern-msg="enter a value according to the pattern" />
But this is not validating this pattern ......
What is the reason for this ??
Maintainer of the W3C HTML Checker (validator) here. The reason the checker is emitting an error for your example is that the HTML spec doesn’t allow the pattern attribute to be specified for <input type=number> elements; see the The following content attributes must not be specified and do not apply to the element list in the Bookkeeping details section of the section on the HTML spec on <input type=number>.
And I’m not sure that most browsers support using placeholder with <input type=number>.
This is wrong type = "number" change to type="text" and try
<input type="text" pattern="\d{10}" data-pattern-msg="enter a value according to the pattern" title="only number" />
Definition and Usage
The pattern attribute specifies a regular expression that the element's value is checked against.
Note: The pattern attribute works with the following input types: text, search, url, tel, email, and password.
Tip: Use the global title attribute to describe the pattern to help the user.
I've got really simple question - is there any way to disable HTML5 validation only for some chosen inputs (instead of setting "novalidate" for whole form)?
I mean something like <input type='number' requirednovalidate>. But this doesn't work.
You may ask why I need type="number" or "required" then? Well, I need it there because my framework uses it for its own validation.
EDIT
It is about one special input - birth number. I need it to be of type number (because of mobile devices) but its value is mostly used with "/" (e.g. 860518/8757) which is not valid character for type number. So I need user to fill it without slash (8605188757). The problem is when there is invalid value filled in html5 input (e.g. "fsda" in number type), it seems like it is empty, with no value.
So when user fill the value in wrong format (860518/8757), html validation is disabled so the JS validation runs, it is validated like empty field. So the error message is like "Please fill the field birth number" (which is really confusing) instead somthing like "Sorry, wrong format".
My solution was to enable html5 validation for this field (so the default browser message is displayed when there is wrong format filled) but disable it for other fields so that they would be validated only with my JS validation.
You cannot disable HTML5 validation for a chosen input(s).
If you want to remove validation on the entire form you can use formnovalidate in your input element.
For example,
<input type="submit" value="Save" class="button primary large" formnovalidate/>
Note you can use formnovalidate with <input type=submit>, <inut type=image> or <button> -source
For more info go here or here.
novalidate attribute is only for form tag, it can't be applied on form controls.
You can remove the required attribute in js, after your framework validates:
$('[Selector]').removeAttr('required');
Now the selected field will not be validated.
Inputs will be validate when:
have attr required or prop required=true
aren't empty; don't have to have attr required or prop required=true
and have no attr disabled or prop disabled=true
If you want to validate data in a specific way, use pattern attr.
JSFiddle
(function() {
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
});
})();
<form>
1. <input type='text'><br>
2. <input type='text' required><br>
3. <input type='text' required disabled><br>
4. <input type='text' value="" pattern="\d*"><br>
5. <input type='text' value="" pattern="\d*" required><br>
6. <input type='text' value="" pattern="\d+"><br>
7. <input type='text' value="" pattern="\d+" required><br>
8. <input type='text' value="test" pattern="\d+" required disabled><br>
<button>check field validity</button>
</form>