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

Question

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

List box are working fine, but 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>

score 92 · Answer 1 · edited Apr 18 '19 at 13:10

92

You have empty space inside text area, remove it:

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

Fiddle demo

edited Apr 18 '19 at 13:10

isherwood

58,414
16
114
157

answered Jun 12 '13 at 09:01

sinisake

11,240
2
19
27

score 15 · Answer 2 · answered Jun 12 '13 at 09:03

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.

answered Jun 12 '13 at 09:03

Siddharth Nagar

392
2
13

score 5 · Answer 3 · edited Mar 28 '21 at 16:41

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.

edited Mar 28 '21 at 16:41

answered Mar 27 '21 at 09:54

Shubham Sharma

61
1
1

score 3 · Answer 4 · answered Sep 24 '15 at 04:22

3

try this

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

answered Sep 24 '15 at 04:22

Mayur Morey

57
2

1

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"` – Raptor Apr 14 '16 at 08: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." https://www.w3.org/TR/html5/infrastructure.html#boolean-attributes https://html.spec.whatwg.org/multipage/infrastructure.html#boolean-attributes https://www.w3.org/TR/html51/infrastructure.html#sec-boolean-attributes An attribute value is not required, though. – hmundt Jun 23 '16 at 11:23
Correct and some dynamically created html needs required="required" – user3012857 Mar 21 '17 at 11:12

score 3 · Answer 5 · answered Sep 02 '17 at 00:35

3

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

answered Sep 02 '17 at 00:35

Alexander Goncharov

1,572
17
20

tim3in · Answer 6 · 2019-07-05T10:07:56.457

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

score 2 · Answer 7 · answered Jun 25 '19 at 09:08

2

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

answered Jun 25 '19 at 09:08

code_poetry

333
1
6
16

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

7 Answers7

Linked