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 f

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

try this

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

Answer 6

You have empty space inside text area, remove it:

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

Fiddle demo