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

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>

sinisake

You have empty space inside text area, remove it:

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

Fiddle demo

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.

try this

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

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

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

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

来源：https://stackoverflow.com/questions/17061436/textareas-required-attribute-doesnt-work-even-though-the-value-is-empty

标签

html

html5

textarea

required