除了使用javascript的输入外，如何删除每个输入的oninvalid？

我创建了一个带有一些输入字段的表单，用户需要至少填写一个字段，如果用户没有选择任何字段，则会显示错误。我实现了这个目标，但我需要将我的自定义require消息显示为无效。由于每个输入都有

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));
});

document.addEventListener（'DOMContentLoaded'，函数（）{
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））；
});

---

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

您可以从所有输入中删除

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');
    }
});

var inputs=document.querySelectorAll（'input'）；
document.querySelector（'button'）。addEventListener（'click'，function（）{
var-valid=false；
对于（i=0；i

工作示例（使用“alert”而不是“setCustomValidity”）：

var inputs=document.querySelectorAll（'input'）；
document.querySelector（'button'）。addEventListener（'click'，function（）{
对于（i=0；i

提交
您的代码运行正常，但当我在警报上单击“确定”时，只有一个问题，即它正在提交表单。表单提交发生在警报之后，因为我们没有阻止它。我还将
input type=“submit”
更改为
button type=“button”
，这样就没有第四个输入值为“submit”。我更改了我的答案以修复提交…我编辑了您的代码，它工作正常，谢谢！