HTML表单中的必填和只读输入

Question

HTML表单中的必填和只读输入

formshtmlgoogle-chromereadonlyrequired-field

59

我正在制作一个表单。在其中一个标签上有一个OnClick事件处理程序，它打开了一个弹出窗口，在那里您可以选择一些内容，然后自动填充标签。

该标签也是的，所以只能输入正确的数据。

这是标签的代码：

<input type="text" name="formAfterRederict" id="formAfterRederict" size="50" required readonly="readonly" OnClick="choose_le_page();"  />

但是在Chrome中，required属性不起作用。但该字段是必填的。

有人知道我该如何使其工作吗？

- Mathlight

3

required 是HTML5中新增的属性 - 它仍然不被所有浏览器支持。 - Muleskinner

1

你应该在你的问题中标记HTML5标签和Chrome标签。 - Muleskinner

1

@Muleskinner：它被Firefox、Chrome和Opera的稳定版本支持：http://caniuse.com/#search=required - Blender

1

@Blender，感谢你提供的网站，我立刻收藏了它 :D - Mathlight

14个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alex Link · Answer 1

你可以为你的模板这样做：

<input required onfocus="unselect($event)" class="disabled">

而对于你的js，可以这样做：

unselect(event){
    event.preventDefault();
    event.currentTarget.blur();
}

用户输入将同时被禁用和要求，前提是您有一个用于禁用输入的CSS类。

- CsZsombor · Answer 2

我有同样的问题，最终我使用了这个解决方案（使用jQuery）：

form.find(':input[required][readonly]').filter(function(){ return this.value === '';})

除了使用form.checkValidity()之外，我会以某种方式测试以上搜索的长度：

let fcnt = $(form)
    .find(':input[required][readonly]')
    .filter(function() { return this.value === '';})
    .length;

if (form.checkValidity() && !fcnt) {
   form.submit();
}

- Ibrahim Muriithi · Answer 3

  function validateForm() {
    var x = document.forms["myForm"]["test2"].value;
    if (x == "") {
      alert("Name missing!!");
      return false;
    }
  }

  <form class="form-horizontal" onsubmit="return validateForm()" name="myForm" action="" method="POST">
   <input type="text"  name="test1">
    <input type="text" disabled name="test2">
    <button type="submit">Submit</button>
</form>

- Melisa · Answer 4

这对我来说是最好的解决方案。客户无法输入任何内容，必须填写。

<input type="text" class="read-only" required>
.read-only {
         pointer-events: none;
 }