web-dev-qa-db-ja.com

値が空であってもtextareaの「必須」属性が機能しない

リストボックスとすべてが必要な条件を備えたテキスト領域を備えたシンプルなページを作成しました。

リストボックスは正常に機能していますが、textareaボックスは、フィールドに入力する必要があることを通知しません。

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

テキスト領域内に空のスペースがあります。削除してください：

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

フィドルデモ

67
sinisake

問題は、タグ間のスペースにあります。これらのタグの間にHTMLでスペースを入れることは想定されていません。そうしないと、ブラウザは値としてそれを考慮します。

10
Siddharth Nagar

これを試して

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

そして、おそらくフォームにはnovalidate属性があります。 novalidate attribute という形式のフォーム要素検証属性（requiredやregexpなど）は無視されます。

2
Alexander Goncharov

テキストエリアのデフォルト値を確認してください。値と見なされる空白スペースが必要です。

1
code_poetry

同様の問題に直面しました。次のコードのように、Textareaの開始タグと終了タグの間にスペースを残しました

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

そして私のjavascriptで私はフォローしようとしました

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

そして、このページにたどり着くまで、何が問題なのか理解できませんでした。それはスペースでした。ソリューションをありがとう@sinisake。私の経験を共有することが誰かを助けることを願っています

0
tim3in