How to set HTML5 required attribute in Javascript?

Asked
Active3 hr before
Viewed126 times

7 Answers

attributejavascripthtml5
90%

But now I want to set the required attribute at "runtime", through Javascript:,The trick when trying to remove the required attribute is that it's easy to accidentally turn it on:,I am trying to mark a text input box as required in Javascript.,The HTML5 validation required attribute is documented as a Boolean:

required is a reflected property (like id, name, type, and such), so:

element.required = true;

...where element is the actual input DOM element, e.g.:

document.getElementById("edName").required = true;

Then the attribute's value is not the empty string, nor the canonical name of the attribute:

edName.attributes.required = [object Attr]

So if required weren't reflected, you'd set it by adding the attribute:

element.setAttribute("required", "");

...which is the equivalent of element.required = true. You'd clear it by removing it entirely:

element.removeAttribute("required");
load more v
88%

element.setAttribute("required", ""); //turns required on
element.required = true; //turns required on through reflected attribute
jQuery(element).attr('required', ''); //turns required on
$("#elementId").attr('required', ''); //turns required on

element.removeAttribute("required"); //turns required off
element.required = false; //turns required off through reflected attribute
jQuery(element).removeAttr('required'); //turns required off
$("#elementId").removeAttr('required'); //turns required off

if (edName.hasAttribute("required")) {} //check if required
if (edName.required) {} //check if required using reflected attribute
load more v
72%

The Boolean required attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted.,Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.,Provide an indication to users informing them the form control is required. Ensure the messaging is multi-faceted, such as through text, color, markings, and attribute, so that all users understand the requirements whether they have color blindness, cognitive differences, or are using a screen reader.,In the case of a same named group of checkbox input types, only the checkboxes with the required attribute are required.

<form>
   <div class="group">
      <input type="text">
      <label>Normal</label>
   </div>
   <div class="group">
      <input type="text" required="required">
      <label>Required</label>
   </div>
   <input type="submit">
</form>
65%

This is going to return true if an input element contains valid data.,Example: This example shows how to do HTML form required attribute along with setting custom validation message.,Form required attribute with a custom validation message in HTML5,willValidate: It will indicate when the input element will be validated.

Syntax:

input = "this.checkValidity()"

Syntax:

input = "this.setCustomValidity()"
load more v
75%

6 Reasons – HTML5 Required Attribute Validation not Working,Finally, let us check the 6 reasons that can make the built-in required attribute validation to not work in an HTML5 browser.,6. Action/Method Missing for HTML 5 Required Attribute Validation,Browsers Support for HTML5 Required Attribute

1. The Form Tag has “novalidate” Attribute

This is the first and the most common reason that causes the issue. HTML5 required attribute validation doesn’t work if the form has the novalidate attribute in its markup. With the presence of the attribute, the tag looks like <form action="#" novalidate>.

<form action="#" novalidate>
load more v
40%

The Boolean required attribute marks any form control as being required to have a value before the form can be submitted. In browsers supporting constraint validation, any fields with this attribute which lack a value will prevent the form from being submitted.,There is a CSS pseudo class selector for matching elements that are required:,Any field with the required attribute must also have a name attribute. Fields without names are not a part of submission, so are ignored in validation.,If you put required on a radio button, one radio button of the same named group of radio buttons will be required, though not necessarily the one with the required attribute on it. On checkboxes, each individual checkbox with the required attribute is required, and must be checked.

  • Any field with the required attribute must also have a name attribute. Fields without names are not a part of submission, so are ignored in validation.
  • Upon form submission, the first invalid field will be forced into focus. If this is a required field with no value, the browsers like a “hint” to fill it out).
  • Relevant for the textsearchurltelradiocheckboxemailpasswordnumberfile, and the date/time input types. The range and color input types have default values, so requiring them would be redundant. The user can not interact with the hidden input type, so that type can’t be required. Also, the button input types can’t be required.
  • Possibly not as user friendly as JavaScript solutions which can check validation on blur (as you fill out the form), and display hints for more than one field at a time.
  • There is a CSS pseudo class selector for matching elements that are required:
: required: focus {
   box - shadow: 0 0 3 px rgba(255, 0, 0, 0.5);
}
22%

Add [a-z]{1,15} as the value of the pattern attribute in our username input:,The pattern attribute is only applicable on the input element. It allows us to define our own rule to validate the input value using Regular Expressions (RegEx). Again, if the value does not match the specified pattern, the input will throw an error.,In this tutorial we’ll explore HTML’s pattern attribute, using it to help us customize the way we validate our forms.,Begin by adding an id to the input element, so as to be able to select it conveniently.

For example, say we have a username input in our form. There isn’t a standard type for username, hence we use the regular text input type:

<form action="somefile.php">
   <input type="text" name="username" placeholder="Username">
</form>
load more v

Other "attribute-javascript" queries related to "How to set HTML5 required attribute in Javascript?"