textarea's "required" attribute doesn't work even though the value is empty

S

7

33

I created a simple page with a list box and a text area with conditions that all should be required.

The List box is working fine, but the textarea box doesn't tell that the field is required to be filled.

<!DOCTYPE html>
<html>

<head>
  <title>Ratings & Reviews</title>

  <body>
    <form>

      <span>Customer Service*</span>
      <span>
        <select name=customer id=aa required>
            <option selected="rate" value="" disabled>rate</option>
            <option value=1>1</option>
            <option value=2>2</option>
            <option value=3>3</option>
            <option value=4>4</option>
            <option value=5>5</option>
        </select>
    </span>
      <br><br>
      <span>Value for money*</span>
      <span>
        <select name=money id=aa required>
            <option selected="rate" value="" disabled>rate</option>
            <option value=1>1</option>
            <option value=2>2</option>
            <option value=3>3</option>
            <option value=4>4</option>
            <option value=5>5</option>
        </select>
    </span>

      <div>
        <textarea name="reviews" rows=11 cols=50 maxlength=250 required>
        </textarea>
      </div>

      <div id=submit>
        <br>
        <input type=submit name=submit value=submit>
      </div>

    </form>
  </body>

</html>

Silverts answered 12/6, 2013 at 8:56 Comment(0)

D

92

You have empty space inside text area, remove it:

 <textarea name="reviews" rows=11 cols=50 maxlength=250 required ></textarea>

Fiddle demo

Disinterest answered 12/6, 2013 at 9:1 Comment(0)

G

15

The problem is with the spaces between the tags. You are not supposed to give any spaces in html between these tags, otherwise browser will consider it as the value.

Glowing answered 12/6, 2013 at 9:3 Comment(0)

L

5

Don't use spaces between opening and closing tags.

e.g:

<textarea required>**Don't put any space here**</textarea>

It will work fine.

Ladd answered 27/3, 2021 at 9:54 Comment(0)

I

3

try this

<textarea name="mm" id="mm" rows="5" placeholder="NA if not applicable" required="required"></textarea>

Iaea answered 24/9, 2015 at 4:22 Comment(3)

Incorrect. required attribute is a boolean value. If it exists, the textarea will be required to fill in. Therefore, the behavior of required is equal to required="required" – Alannaalano 14/4, 2016 at 8:42

Correct. Quote from W3C's and Whatwg's specs: "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." w3.org/TR/html5/infrastructure.html#boolean-attributes html.spec.whatwg.org/multipage/… w3.org/TR/html51/infrastructure.html#sec-boolean-attributes An attribute value is not required, though. – Inchworm 23/6, 2016 at 11:23

Correct and some dynamically created html needs required="required" – Bike 21/3, 2017 at 11:12

L

3

And probaly form has novalidate attribute. Any form-element validation attributes (like required or regexp) with form novalidate attribute will ignore.

Lantz answered 2/9, 2017 at 0:35 Comment(0)

B

3

I faced similar problem. I left space between opening and closing tag of Textarea as in following code

<label><b>Register As:*</b></label>
<select name="category" id="category" class="form-control"  
 onchange="toggleInput()" required>
      <option value=''>--Select--</option>
      <option value='Attendee'>Attendee</option>
      <option value='Presenter'>Presenter</option>
</select>

 ...
<textarea name="description" id="description" class="form-control" 
placeholder="Explain here what you will present...">  </textarea>

and in my javascript I was trying following

<script>
   function toggleInput() {  
      if( document.getElementById("category").value=="Attendee"){  
        document.getElementById("description").required = false;
      }
      else{
        document.getElementById("description").required = true;
      }
   }//End Function
</script>

And I could not figure out what was the problem until I landed on this page. It was the space. Thanks @sinisake for the solution. Hope sharing my experience would help someone

Besnard answered 5/7, 2019 at 9:49 Comment(0)

W

2

Check default value in the textarea. There must be blank spaces which are considered as value.

Whitt answered 25/6, 2019 at 9:8 Comment(0)

Recommended topics

Hot tags