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.
Related
I'm working with Tomcat 9 and use a site, with a few JSP pages. I have Sheet.jsp, a self-posting page: it has a form, say F, containing two fields, A and B; there's also a submit button, S. A is an input field, B is readonly and shows the result.
I want to use HTML5, so I put at the beginning of Sheet.jsp.
So I wrote:
<form id=F action=POST>
<input type=Text id=A>
<input type=Text id=B readonly>
<input type=submit id=S>
</form>
I used "id" attribute, not "name" attribute, according to HTML5.
So doing, the page doesn't work.
If I write:
<form name=F action=POST>
<input type=Text name=A>
<input type=Text name=B readonly>
<input type=submit name=S>
</form>
the page works fine.
So, my question is: is there any compatibility issue between JSP pages and HTML5 ?
Perhaps JSP generates HTML4 text only ?
Thanks in advance. PS: I apologize if it's a known and already answered question, but I tried and wasn't able to find it.
Maybe I've solved the problem.
The name attribute is necessary when the form is submitted, and only input tags with the attribute name are submitted. Without the name attribute defined, nothing is submitted.
The id attribute can be used on the client side (e.g. into Javascript code), but not for submission.
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
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>
I am using the html5 attribute required to valid my input. I find once the form has become invalid, it doesn't recognize when the user has typed in valid information.
For example:
<input id="name" type="text" name="username" required oninvalid="setCustomValidity('Please enter a username!')">
If the user misses this feild it highlight red and tells the user to fill it in. If they then fill it in and click submit, it tells the user to fill it in.
How do I recover my forms once they have become invalid?
It's not rechecking after declaring the form element invalid. Try adding an empty setCustomValidity string to oninput. Ie:
<input id="name" type="text" name="username" required oninvalid="setCustomValidity('Please enter a username!')" oninput="setCustomValidity('')" >
I do something similar to #Julie answer but use onchange instead of oninput ...
I use oninvalid to set the custom validty error message and then use onchange to reset the message so the form can submit properly.
<input type="number" oninvalid="this.setCustomValidity('Please enter an INTEGER')" onchange="this.setCustomValidity('')" name="integer-only" value="0" min="0" step="1">
My input is as follows:
<input id="AdministratorEmail" type="email" maxlength="255" novalidate="novalidate" name="data[Administrator][email]">
Why is the browser (have tested in Firefox and Chrome) still trying to auto-validate the email field for me when I have the novalidate attribute specified?
How can I prevent this from happening?
I am using CakePHP if it is of any relevance.
The problem was that I was using the novalidate attribute on individual inputs, which is incorrect. As mata pointed out, it is not a recognised attribute of inputs, but an attribute of the HTML form tag itself.
Solution
<form novalidate="novalidate">
<input type="email" name="email" />
</form>
As you can see, you do not need to change the type to type="text", and like any other boolean attribute, novalidate can be added in multiple ways and all are acceptable.
<form novalidate> <!-- Also acceptable -->
Solution for CakePHP
echo $this->Form->create('MyModel', array(
'novalidate' => true
));
echo $this->Form->input('email');
Thanks to mark for this.
Because of type="email".
Set this to type="text". It will work the same but without the validation.
This is thanks to built-in email validation that most major browsers use. I have personally never heard of the novalidate attribute.
EDIT: I've just read up on novalidate, you should type it like so:
<form novalidate>
instead of
<form novalidate="novalidate">