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

Posted

技术标签:

【中文标题】即使值为空,textarea 的“必需”属性也不起作用【英文标题】:textarea's "required" attribute doesn't work even though the value is empty 【发布时间】:2013-06-08 07:48:51 【问题描述】:

我创建了一个简单的页面,其中包含列表框和文本区域,其中包含所有条件。

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

【问题讨论】:

【参考方案1】:

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

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

Fiddle demo

【讨论】:

【参考方案2】:

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

【讨论】:

【参考方案3】:

试试这个

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

【讨论】:

不正确。 required 属性是一个布尔值。如果存在,则需要填写textarea。因此required的行为等于required="required" 正确。引用 W3C 和 Whatwg 的规范:“如果存在属性,则其值必须是空字符串或与属性的规范名称匹配的不区分大小写的 ASCII 值,并且没有前导或尾随空格。” w3.org/TR/html5/infrastructure.html#boolean-attributes html.spec.whatwg.org/multipage/… w3.org/TR/html51/infrastructure.html#sec-boolean-attributes 不过属性值不是必需的。 正确和一些动态创建的html需要required="required"【参考方案4】:

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

【讨论】:

【参考方案5】:

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

【讨论】:

【参考方案6】:

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

【讨论】:

【参考方案7】:

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

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

它会正常工作的。

【讨论】:

以上是关于即使值为空,textarea 的“必需”属性也不起作用的主要内容,如果未能解决你的问题,请参考以下文章

即使停用词列表为空,如果包含停用词,全文搜索也不起作用

必需的属性,但可以为空,通过代码优先的实体框架

textarea数据输入检查,如果为空,则提醒

textArea中的placeholder属性不起作用

即使在设置委托后协议也不起作用

Spring Security - 即使凭据正确,身份验证也不起作用