个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
除非我遗漏了什么，否则这似乎是 Chrome 中的一个错误。
这里有三种形式，每种形式都有两个单选元素。当没有必需的属性时，表单上的 checkValidity() 将按预期返回 true。当存在必需的属性时，表单上的 checkValidity() 会按预期返回 false。
但是，当使用 JavaScript 删除必需的属性时，checkValidity() 将返回 false。这不是我所期望的。任何解释/解决方法表示赞赏!这在 Safari 和 Firefox 中正常工作，在 Chrome 中不起作用。
console.log('Valid form: ' + document.getElementById('validForm').checkValidity());
console.log('Invalid form: ' + document.getElementById('invalidForm').checkValidity());
//document.getElementById('rad1').required = false; //Neither this nor below work
//document.getElementById('rad2').required = false;
document.getElementById('rad1').removeAttribute('required');
document.getElementById('rad2').removeAttribute('required');
console.log('Should be valid form: ' + document.getElementById('shouldBeValidForm').checkValidity());<form id="validForm">
<input type="radio" name="my radio 1" value="option 1">
<input type="radio" name="my radio 1" value="option 2">
</form>
<form id="invalidForm">
<input type="radio" name="my radio 2" value="option 1" required>
<input type="radio" name="my radio 2" value="option 2" required>
</form>
<form id="shouldBeValidForm">
<input id="rad1" type="radio" name="my radio 3" value="option 1" required>
<input id="rad2" type="radio" name="my radio 3" value="option 2" required>
</form>最佳答案
我现在可以肯定地说这是 Chrome 中的一个错误 - 如果 required 属性是硬设置的，即使删除它也不会被忽略(出于有效性目的)，并且不再在属性列表中该项目的。如果它确实在 Chromium 51 中被修复，我们将不必等待很长时间才能修复它。同时，您可以删除硬设置的“required”属性，并使用“setAttribute”函数将其动态放入。
请查看下面的代码进行检查 - 这是一个下午的工作。默认情况下，“required”属性标签被移除，所以它是有效的。一旦点击“设置必填”，则无效。删除它可以正常工作。您可以通过单击“打印属性”(记录到控制台)来检查 rads 的属性，从而看到它已正确应用。
如果您选择一个单选按钮，“重置辐射”会清除单选按钮。
<!DOCTYPE html>
<html>
<body>
<form id="shouldBeValidForm">
<input id="rad1" type="radio" name="my radio 3" value="option 1">
<input id="rad2" type="radio" name="my radio 3" value="option 2">
</form>
<button onclick="setRequired()">Set Required</button>
<button onclick="removeRequired()">Remove Required</button>
<button onclick="checkValid()">Check if Valid</button>
<button onclick="printAttr()">Print Attributes</button>
<button onclick="clearButton()">Reset Rads</button>
<script>
function setRequired() {
document.getElementById("rad1").setAttribute("required", "");
document.getElementById("rad2").setAttribute("required", "");
//document.getElementById('shouldBeValidForm').validate();
}
function removeRequired() {
document.getElementById("rad2").removeAttribute("required");
document.getElementById("rad1").removeAttribute("required");
}
function checkValid() {
console.log('Should be valid form: ' + document.getElementById('shouldBeValidForm').checkValidity());
console.log('Rad1: ' + document.getElementById('rad1').checkValidity());
console.log('Rad2: ' + document.getElementById('rad2').checkValidity());
console.log('willValidate: Rad1: ' + document.getElementById('rad1').willValidate);
console.log('willValidate: Rad2: ' + document.getElementById('rad2').willValidate);
console.log('validationMessage: Rad1: ' + document.getElementById('rad1').validationMessage);
console.log('validationMessage: Rad2: ' + document.getElementById('rad2').validationMessage);
}
function printAttr() {
console.log("rad1 Attributes");
var el = document.getElementById("rad1");
for (var i = 0, atts = el.attributes, n = atts.length, arr = []; i < n; i++) {
console.log(atts[i].nodeName);
}
console.log("rad2 Attributes");
var el = document.getElementById("rad2");
for (var i = 0, atts = el.attributes, n = atts.length, arr = []; i < n; i++) {
console.log(atts[i].nodeName);
}
}
function clearButton() {
document.getElementById("rad1").checked = false;
document.getElementById("rad2").checked = false;
}
</script>
</body>
</html>关于javascript - 当在 Chrome 中使用 JavaScript 删除必需属性时，checkValidity() 会返回 false，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36346858/
24
4
0
我有三列表单，第一列有输入字段，接下来的两列有复选框，如果我提交我的表单而不输入任何内容，那么页面顶部的第二列和第三列会出现警报，然后第 1 列会出现警报消息。这里如何使用这个方法？
有没有办法让 checkValidity() 只对表单的一部分起作用？例如，检查 keyUp 事件的有效性？还是严格要求完整的表单提交？ 如果那样不行，是否有任何第三方插件可以作为此类情况的垫片？ 我
我有一个带有按钮的表单，该按钮是一个链接(带有“to”属性)，并且我使用 checkValidity() 来使用必需的属性，但是如果我使用 to={{pathname...} } 它更改为链接而不进行
出于某些原因，当我在表单上使用 checkValidity() 时，失败的输入不会被标记为无效。 方法是这样调用的: var result=$("#myForm")[0].checkValidity(
当我在输入元素上使用 .checkValidity() 并返回 false 时，我如何获得失败的原因？ 我知道我可以使用 ValidityState interface并检查每个可能的失败，但是那些只
如果通过 JavaScript 设置值，HTML5 checkValidity()/reportValidity() 方法似乎不起作用。 考虑这个例子(JSFiddle): Set Is valid
第一次发帖，请多多关照。我正在尝试自学如何为本地俱乐部编写响应式网站。有没有办法使用 bootstrap 4 表单验证方法检查两个密码字段是否相同并相应地出错？我可以在服务器端执行此操作，但由于我正在
我有一个简单的表格如下: Line 1: Fill Line 2? Lin
给定以下文档: 不填写输入，运行: document.querySelector('input').checkValidity() 返回 true。 因为空输入不匹配[a-z]，为什么是HTML5
当我们尝试提交 HTML5 表单时，如果一个或多个必填字段缺少值或发生其他错误(类型或长度不匹配)，它会阻止表单提交。 UI 更新为突出显示的无效字段，并聚焦第一个无效字段。此外，第一个无效字段附有一
我刚刚发现了 JavaScript Validation API checkValidity() 函数。 caniuse.com 表示此 API 在 Firefox 和 Chrome 中可用。我不需要
此处为 IE11 问题，可在其他浏览器中使用(见图)。 我有一个带有一组单选按钮的表单。 单选按钮具有required属性 当我加载页面并在表单上运行 checkValidity() 函数时，它返回
HTML 和 JS 新手。我一直在试图弄清楚为什么当我没有在字段中输入任何名称时我没有收到任何通知。当前外观的快速视频:VIDEO of entering name 我的代码正在查找 HTML:
我在 ajax 表单提交中使用 jQuery 的 checkValidity()，一切正常，直到表单有一个 select 元素。 例如，我有一个页面根据用户选择的行数显示数据。 (选择多少行数据)..
阅读一个使用 MVC 的网站源代码时，我很难理解其中的一些内容。 View 的代码片段: function submitForm (action) { var forms = document.g
我正在尝试使用这样的 checkValidity 函数验证表单的输入 let inputs = document.getElementsByTagName('input'); inpu
我注意到输入元素验证有两种方法: element.checkValidity()。 element.validity.valid。 我知道 validity 是一个对象，而 checkValidity
我正在尝试对模糊的数字输入字段执行简单的 checkValidity，但无法使其正常工作。这在 Chrome 中有效吗？例如: 或 似乎什么都不做。但是，在控制台中， $("#x")[0].che
我正在尝试使用表单方法 checkValidity()。 http://html5test.com/告诉我我的浏览器 (Chrome) 支持表单级 checkValidity 方法。 但是，使用 js
问题的简短版本 有没有办法用 Javascript 触发原生浏览器表单验证错误反馈？ 问题的详细版本 当尝试提交具有用户未填写的必填输入字段的表单时，现代浏览器会自动处理验证，并在发现错误的输入字段处
我是一名优秀的程序员,十分优秀！