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

Posted 2023-05-09

【中文标题】除了使用javascript的输入之外，如何删除每个输入的oninvalid？

【英文标题】：How to remove oninvalid for every input except one using javascript?

【发布时间】：2021-06-27 15:53:27

【问题描述】：

我创建了一个包含一些输入字段的表单，用户需要填写至少一个字段，如果用户没有选择任何字段，则会显示错误。我实现了这个目标，但我需要将我的自定义要求消息显示为无效。由于每个输入都有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));
);

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

【参考方案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://***.com" method="GET">
    <input name="youtube" value="">
    <input name="vimeo" value="">
    <input name="pinterest" value="">
    <button type="button">submit</button>
</form>

【讨论】：

您的代码工作正常，但是当我在提交表单的警报上单击“确定”时只有一个问题

表单提交发生在警报之后，因为我们没有阻止它。我还将input type="submit" 更改为button type="button"，这样就没有值为“提交”的第四个输入。我更改了答案以修复提交...

我最终编辑了您的代码，它工作正常，谢谢！