英文:
How to check if radio button group is required
问题
我有一个动态单选按钮组，在所有输入上可能未指定required属性。
<form name="myform">
<input type="radio" id="option1" name="foo" value="First">
<input type="radio" id="option2" name="foo" value="Second" required>
<input type="radio" id="option3" name="foo" value="Third">
<input type="radio" id="option4" name="foo" value="Fourth">
</form>
是否有一种方法可以在JavaScript中检查单选按钮组是否需要，而不必遍历组中的所有输入？
我查看了输入元素的validity.missingValue属性，当没有选中单选按钮时有效，但我没有解决方案，用于当字段有效时。目前，我有以下代码，但如果有其他属性可以使用，例如在HTMLInputElement或RadioNodeList上使用，那将很好。
function isRequired() {
return Array.from(document.myform.foo).some(i => i.required)
}
英文:
I have a dynamic radio button group where the required attribute may not be specified on all inputs.
<form name="myform">
<input type="radio" id="option1" name="foo" value="First" >
<input type="radio" id="option2" name="foo" value="Second" required>
<input type="radio" id="option3" name="foo" value="Third">
<input type="radio" id="option4" name="foo" value="Fourth">
</form>
Is there a way to check in JavaScript whether the radio button group is required without iterating through all inputs in the group?
I have looked at input element's validity.missingValue property which works when no radio button is selected but I have no solution for when the field is valid. Currently I have the following code, but it would be nice if there was some other property to use e.g. on the HTMLInputElement or RadioNodeList.
function isRequired() {
return Array.from(document.myform.foo).some(i => i.required)
}
答案1
得分: 1
以下是您要翻译的代码部分：
const myForm = document.forms['my-form'];
console.log(!!myForm.querySelector('input[name="foo"][required]')); // true
<form name="my-form">
<input type="radio" name="foo" value="First">
<input type="radio" name="foo" value="Second" required>
<input type="radio" name="foo" value="Third">
<input type="radio" name="foo" value="Fourth">
</form>
// 定义新的 getter 属性（脏包装器）
RadioNodeList.prototype.__defineGetter__('isRequired', function(){ return [...this].some(r=>r.required) });
const myForm = document.forms['my-form'];
console.log(myForm.foo.isRequired); // true
<form name="my-form">
<input type="radio" name="foo" value="First">
<input type="radio" name="foo" value="Second" required>
<input type="radio" name="foo" value="Third">
<input type="radio" name="foo" value="Fourth">
</form>
英文:
Maybe something like that ?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const myForm = document.forms['my-form'];
console.log( !!myForm.querySelector('input[name="foo"][required]') ) // true
<!-- language: lang-html -->
<form name="my-form">
<input type="radio" name="foo" value="First" >
<input type="radio" name="foo" value="Second" required >
<input type="radio" name="foo" value="Third" >
<input type="radio" name="foo" value="Fourth" >
</form>
<!-- end snippet -->
You can also add a "dirty wrapper":
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// define new getter property (dirty wrapper)
RadioNodeList.prototype.__defineGetter__( 'isRequired', function(){ return [...this].some(r=>r.required) });
const myForm = document.forms['my-form'];
console.log( myForm.foo.isRequired ); // true
<!-- language: lang-html -->
<form name="my-form">
<input type="radio" name="foo" value="First">
<input type="radio" name="foo" value="Second" required>
<input type="radio" name="foo" value="Third">
<input type="radio" name="foo" value="Fourth">
</form>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论