33

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>

7 Answers 7

92

You have empty space inside text area, remove it:

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

Fiddle demo

0
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.

0
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.

3

try this

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

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

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

2

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.