无法动态检查必填字段答案

【问题标题】：Unable to check for required field dynamically无法动态检查必填字段
【发布时间】：2016-11-07 07:01:58
【问题描述】：

我的输入元素之一的required 属性取决于复选框之一的checked 状态。我无法通过在该字段上动态设置 required 属性来触发 HTML5 的必填字段错误。

<input type="text" name="date" id="date" />
<input type="checkbox" name="immediate" id="immediate" onchange="setRequired(this.checked)" />

<script type="text/javascript">
   function setRequired(checked)
   {
        var date = document.getElementById("date");
        if(checked) {
            date.required = false;
        }
        else
            date.required = true;

   }
</script>

当我运行表单时，我没有看到日期输入的 HTML5 验证。

【问题讨论】：

date.required = true 和 date.setAttribute('required','true') 是两个不同的东西。给setAttribute 方法一个破解。 javascript 成员变量和 html 属性之间存在差异。对于某些元素，它们是 100% 等效的。对于其他人来说，情况就不那么乐观了。
date.required = true 在输入上设置required 属性，就像表单上的其他字段一样。让我试试.setAttribute。
少试代码：document.getElementById("date").setAttribute('required', checked)。 ;-)
@RobG - 或者更准确地说，....., !checked); - 只有在未选中复选框时才需要。 ;)

标签： javascript html

【解决方案1】：

<input type="text" name="date" id="date" />
<input type="checkbox" name="immediate" id="immediate" onchange="setRequired(this.checked)" />

<script type="text/javascript">
  function setRequired(checked)
   {
  var date = document.getElementById("date");
            console.log(checked);
    if(checked) {

        date.setAttribute("required",false);
    }
    else {
        date.setAttribute("required",true);
    }
    console.log(date);

}

CONSOLE 日志将帮助您检查元素更改

http://plnkr.co/edit/xFEJchgAqX5g9u2q6iWT?p=preview

【讨论】：