web-dev-qa-db-fra.com

L'attribut "requis" de textarea ne fonctionne pas même si la valeur est vide

J'ai créé une page simple avec une zone de liste et une zone de texte avec des conditions qui devraient toutes être requises.

La zone de liste fonctionne correctement, mais la zone de zone de texte ne dit pas que le champ doit être rempli.

<!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>
htmlhtml5textarearequired
20
divakar.scm

Vous avez un espace vide à l'intérieur de la zone de texte, supprimez-le:

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

Démo Fiddle

67
sinisake

Le problème est avec les espaces entre les balises. Vous n'êtes pas censé donner d'espace en html entre ces balises, sinon le navigateur le considérera comme la valeur.

10
Siddharth Nagar

essaye ça

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

Et la forme probaly a l'attribut novalidate. Tout attribut de validation d'élément de formulaire (comme required ou regexp) de forme attribut novalidate sera ignoré.

2
Alexander Goncharov

Vérifiez la valeur par défaut dans la zone de texte. Il doit y avoir des espaces vides qui sont considérés comme une valeur.

1
code_poetry

J'ai rencontré un problème similaire. J'ai laissé un espace entre les balises d'ouverture et de fermeture de Textarea comme dans le code suivant

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

et dans mon javascript j'essayais de suivre

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

Et je n'ai pas pu comprendre quel était le problème jusqu'à ce que j'atterrisse sur cette page. C'était l'espace. Merci @sinisake pour la solution. J'espère que partager mon expérience aiderait quelqu'un

0
tim3in