How to set HTML5 required attribute in Javascript

Question

I am trying to mark a text input box as required in Javascript    lt input id  edName  type  text  id  name  gt    If the field is initially marked as required    lt form gt       lt input id  edName  type  text  id  name  required gt  lt br gt       lt input type  submit  value  Search  gt   lt  form gt    when the user tries to submit they are given a validation error     But now I want to set the required attribute at  runtime   through Javascript    lt form gt       lt input id  edName  type  text  id  name  gt  lt br gt       lt input type  submit  value  Search  gt   lt  form gt    with the corresponding script     recommended W3C HTML5 syntax for boolean attributes document getElementById  edName   attributes  required                    Except when I submit now  there is no validation check  no block   What is the correct way to set an HTML5 validation boolean attribute   jsFiddle  What s the value of the attribute  you ask   The HTML5 validation required attribute is documented as a Boolean      4 10 7 3 4 The required attribute      The required attribute is a boolean attribute  When specified  the element is required    There is a lot of hand-wringing about how to define a boolean attribute  The HTML5 spec notes      The presence of a boolean attribute on an element represents the true value  and the absence of the attribute represents the false value       If the attribute is present  its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute s canonical name  with no leading or trailing whitespace    This means that you can specify a required boolean attribute two different ways   edName attributes required         the empty string edName attributes required    required     the attribute s canonical name   But what is the value of the attribute really   When you look at my jsFiddle of this problem  you ll notice that if the required attribute is defined in the markup    lt input id  edName  type  text  id  name  required gt    Then the attribute s value is not the empty string  nor the canonical name of the attribute   edName attributes required    object Attr    That might lead to a solution

User · Answer

let formelems   document querySelectorAll  input textarea select    formelems forEach  formelem    gt      formelem required   true         If you wish to make all input  textarea  and select elements required

User · Answer

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  quot edName quot   required   true     Just for completeness   Re   Then the attribute s value is not the empty string  nor the canonical name of the attribute  edName attributes required    object Attr    That s because required in that code is an attribute object  not a string  attributes is a NamedNodeMap whose values are Attr objects  To get the value of one of them  you d look at its value property  But for a boolean attribute  the value isn t relevant  the attribute is either present in the map  true  or not present  false   So if required weren t reflected  you d set it by adding the attribute  element setAttribute  quot required quot    quot  quot        which is the equivalent of element required   true  You d clear it by removing it entirely  element removeAttribute  quot required quot        which is the equivalent of element required   false  But we don t have to do that with required  since it s reflected

User · Answer

What matters isn t the attribute but the property  and its value is a boolean   You can set it using    document getElementById  edName   required   true

User · Answer

try out this    document getElementById  edName   required   true

User · Answer

And the jquery version      input   attr  required   true     input   attr  required   false    I know it s beyond the question  but maybe someone will find this helpful

User · Answer

Short version  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   Long Version  Once T J  Crowder managed to point out reflected properties  i learned that following syntax is wrong   element attributes  name     value    bad  Overwrites the HtmlAttribute object element attributes name   value       bad  Overwrites the HtmlAttribute object value   element attributes name       bad  Returns the HtmlAttribute object  not its value value   element attributes  name      bad  Returns the HtmlAttribute object  not its value   You must go through element getAttribute and element setAttribute   element getAttribute  foo              correct element setAttribute  foo    test      correct   This is because the attribute actually contains a special HtmlAttribute object   element attributes  foo                returns HtmlAttribute object  not the value of the attribute element attributes foo                 returns HtmlAttribute object  not the value of the attribute   By setting an attribute value to  true   you are mistakenly setting it to a String object  rather than the HtmlAttribute object it requires   element attributes  foo      true      error because  true  is not a HtmlAttribute object element setAttribute  foo    true      error because  true  is not an HtmlAttribute object   Conceptually the correct idea  expressed in a typed language   is   HtmlAttribute attribute   new HtmlAttribute    attribute value       element attributes  required     attribute    This is why    getAttribute name  setAttribute name  value    exist  They do the work on assigning the value to the HtmlAttribute object inside   On top of this  some attribute are reflected  This means that you can access them more nicely from Javascript     Set the required attribute   element setAttribute  required         element required   true     Check the attribute   if  element getAttribute  required          if  element required           Remove the required attribute   element removeAttribute  required    element required   false    What you don t want to do is mistakenly use the  attributes collection   element attributes required   true        WRONG  if  element attributes required           WRONG  element attributes required   false       WRONG    Testing Cases  This led to testing around the use of a required attribute  comparing the values returned through the attribute  and the reflected property  document getElementById  name   required  document getElementById  name   getAttribute  required      with results   HTML                          required         getAttribute  required                                                                            lt input gt                       false  Boolean   null  Object   lt input required gt              true   Boolean       String   lt input required    gt           true   Boolean       String   lt input required  required  gt   true   Boolean    required   String   lt input required  true  gt       true   Boolean    true   String   lt input required  false  gt      true   Boolean    false   String   lt input required  0  gt          true   Boolean    0   String    Trying to access the  attributes collection directly is wrong  It returns the object that represents the DOM attribute   edName attributes  required     gt   object Attr  edName attributes required      gt   object Attr    This explains why you should never talk to the  attributes collect directly  You re not manipulating the values of the attributes  but the objects that represent the attributes themselves   How to set required   What s the correct way to set required on an attribute  You have two choices  either the reflected property  or through correctly setting the attribute   element setAttribute  required                  Correct edName required   true                          Correct   Strictly speaking  any other value will  set  the attribute  But the definition of Boolean attributes dictate that it should only be set to the empty string    to indicate true  The following methods all work to set the required Boolean attribute     but do not use them   element setAttribute  required    required      valid  but not preferred element setAttribute  required    foo           works  but silly element setAttribute  required    true          Works  but don t do it  because  element setAttribute  required    false         also sets required boolean to true element setAttribute  required   false          also sets required boolean to true element setAttribute  required   0              also sets required boolean to true   We already learned that trying to set the attribute directly is wrong   edName attributes  required     true          wrong edName attributes  required                   wrong edName attributes  required      required     wrong edName attributes required   true             wrong edName attributes required                    wrong edName attributes required    required        wrong   How to clear required   The trick when trying to remove the required attribute is that it s easy to accidentally turn it on   edName removeAttribute  required          Correct edName required   false                   Correct   With the invalid ways   edName setAttribute  required   null        WRONG  Actually turns required on  edName setAttribute  required               WRONG  Actually turns required on  edName setAttribute  required    false      WRONG  Actually turns required on  edName setAttribute  required   false       WRONG  Actually turns required on  edName setAttribute  required   0           WRONG  Actually turns required on    When using the reflected  required property  you can also use any  falsey  values to turn it off  and truthy values to turn it on  But just stick to true and false for clarity   How to check for required   Check for the presence of the attribute through the  hasAttribute  required   method   if  edName hasAttribute  required          You can also check it through the  Boolean reflected  required property   if  edName required

[javascript] How to set HTML5 required attribute in Javascript?

Examples related to javascript

Examples related to html

Examples related to validation