如何删除除使用javascript的输入之外的所有输入的oninvalid

Question

我创建了一个带有一些输入字段的表单，用户需要填写至少一个字段，如果用户没有选择任何字段，则会显示错误。我实现了这个目标，但我需要将我的自定义需求消息显示为无效。由于每个输入上都有oninvalid，我的代码无法正常工作，但我希望显示此消息，以便我如何从其余输入字段中删除oninvalid，而不是从填充的字段中删除？

<form>
<input name="youtube" oninvalid="this.setCustomValidity('Please fill out at least one social media field')" required/>
<input name="vimeo" oninvalid="this.setCustomValidity('Please fill out at least one social media field')" required/>
<input name="pinterest" oninvalid="this.setCustomValidity('Please fill out at least one social media field')" required/>
<input type="submit" name="submit" value="Submit" id="ls-submit">
</form>
document.addEventListener('DOMContentLoaded', function () {
const inputs = Array.from(document.querySelectorAll('input[name=youtube], input[name=vimeo], input[name=pinterest]'));
const inputListener = e => inputs.filter(i => i !== e.target).forEach(i => i.required = !e.target.value.length, i => i.oninvalid  = !e.target.value.length);
inputs.forEach(i => i.addEventListener('input', inputListener));
});

我真的不知道该怎么办。我们也可以使用警报作为错误消息，我也尝试过，但没有成功。

Answer 1

您可以从所有输入中删除oninvalid和required，并使用javascript:进行检查

var inputs = document.querySelectorAll('input');
document.querySelector('button').addEventListener('click', function() {
var valid = false;
for(i = 0; i < inputs.length; i++) {
if ( inputs[i].value != "" ) {
valid = true;
break;
}
}
if (valid) {
document.querySelector("form").submit();
}
else {
alert('Please fill out at least one social media field');
}
});

工作示例(使用"alert"而不是"setCustomValidity"(：

var inputs = document.querySelectorAll('input');
document.querySelector('button').addEventListener('click', function() {
for(i = 0; i < inputs.length; i++) {
var valid = false;
if ( inputs[i].value != "" ) {
valid = true;
break;
}
}
if (valid) {
document.querySelector("form").submit();
}
else {
alert('Please fill out at least one social media field');
}
});

<form action="https://stackoverflow.com" method="GET">
<input name="youtube" value="">
<input name="vimeo" value="">
<input name="pinterest" value="">
<button type="button">submit</button>
</form>