1

我在 Chrome 中遇到问题，表单提交导致以下错误：

An invalid form control with name='ctl00$cphMain$ctl01$groupControl$website' is not focusable.

这是在已设置<input type="url" ...>的 Chrome 中呈现的（直到选中相邻的复选框）。没有属性，也没有设置属性，所以不确定提交失败的原因。这是标记的相关部分（有问题的控件在 2nd 内）：<div>display:nonerequiredmaxlength<fieldset>

<label class="checkbox">
    <input id="ctl00_cphMain_ctl01_groupControl_ctl13" type="checkbox" name="ctl00$cphMain$ctl01$groupControl$ctl13" onclick="$(this).parent().siblings('div.expandableContainer').slideToggle();"/>
    Include contact...
</label>
<div class="expandableContainer form-expanded js-initial-hide " style="display: none;">
    <fieldset>
        <label>
            Name:
            <span class="req">*</span>
        </label>
        <input name="ctl00$cphMain$ctl01$groupControl$name" type="text" maxlength="100" id="ctl00_cphMain_ctl01_groupControl_name"/>
    </fieldset>
    <fieldset>
        <label>
            Website:
            <span class="req">*</span>
        </label>
        <input name="ctl00$cphMain$ctl01$groupControl$website" type="url" id="ctl00_cphMain_ctl01_groupControl_website" value="http://" onblur="if (this.value == 'http://') this.style.color = '#666';" onfocus="this.style.color = '#000';" style="color:#666;"/>
    </fieldset>
    <fieldset>
        <label>
            Email:
            <span class="req">*</span>
        </label>
        <input name="ctl00$cphMain$ctl01$groupControl$email" type="email" maxlength="100" id="ctl00_cphMain_ctl01_groupControl_email"/>
    </fieldset>
</div>

根据 W3.org ( http://www.w3.org/TR/html401/interact/forms.html#successful-controls )，这应该是一个“成功的”控件。即使添加 2000 的 MaxLength（数据库字段宽度）也不起作用。周围控件没有收到错误。

是否知道为什么此表单提交失败？选中该框（以显示周围环境<div>（使用display:block）允许提交表单而不会出现任何问题。

非常感谢。

4

1 回答 1

3

好吧，我发现了问题：不可见的 URL 字段 ( <input type="url" ... />) 有一个非空值集（基本上是实现占位符文本的遗留 JavaScript 解决方案的一部分）。出于某种原因，这个不可见字段中的值会引起 Chrome（可能来自他们的内置验证，其他讨论类似问题的人已经提到过）。也许 Chrome 错过了祖先中指定的缺乏可见性<div>。

我是如何解决这个问题的：

  • 删除了onblur,onfocus和style属性，因为它们是多余的；
  • 将属性更改value为新的 HTML5placeholder属性，保持相同的属性值。

唯一的缺点是网站访问者必须http://在字段中手动输入“”而不是附加到它；我们的项目团队将讨论改善用户体验的策略。

于 2013-06-05T06:28:51.890 回答