即使值为空,textarea的“required”属性也不起作用

时间:2013-06-12 08:56:05

标签: html html5 textarea required

我创建了一个带有列表框和文本区域的简单页面,其条件应该是所有条件。

列表框工作正常,但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>

8 个答案:

答案 0 :(得分:64)

文本区域内有空格,请将其删除:

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

Fiddle demo

答案 1 :(得分:9)

问题在于标签之间的空格。你不应该在这些标签之间的html中给出任何空格,否则浏览器会将其视为值。

答案 2 :(得分:4)

试试这个

<asp:HyperLink ID="hyperlink_TruckList" runat="server" Text="Truck List" NavigateUrl="~/View/Trucklist.aspx" Font-Underline="false" CssClass="col-sm-4" Style="text-align: center; font-size: 18px; color: black; height: 40px; padding-top: 8px; background: #E8D73E">
     <i class="glyphicon glyphicon-home"></i>
</asp:HyperLink>

答案 3 :(得分:2)

并且probaly表单具有novalidate属性。表单novalidate attribute的任何表单元素验证属性(如requiredregexp)都将被忽略。

答案 4 :(得分:0)

检查文本区域中的默认值。必须有空格,它们被视为值。

答案 5 :(得分:0)

我遇到了类似的问题。我在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提供解决方案。希望分享我的经验对别人有帮助

答案 6 :(得分:-1)

我被困在这个问题上很长时间,结果是>后面的空间。感谢上帝赐予我们祖先的知识

答案 7 :(得分:-1)

不要在开始和结束标签之间使用空格。

例如:

<textarea required>**Don't put any space here**</textarea>

它会正常工作。