HTML：如何让我的oninvalid警报只出现一次，当一个以上的必填字段是无效

Question

考虑下面的代码：

<input type="text" oninvalid="alert('Missing required fields!');" id="input1" name="input1" required/> 
<input type="text" oninvalid="alert('Missing required fields!');" id="input2" name="input2" required/> 
<input type="text" oninvalid="alert('Missing required fields!');" id="input3" name="input3" required/> 

我想，不管有多少的三个字段的用户离开空白，警报消息只出现一次。使用我当前的代码，警报消息显示的次数与无效字段的次数相同。

Answer 1

您可以使用由oninvalid调用的JavaScript函数。它的工作原理是在第一次调用函数时使用只有true的if语句，然后alert（）将不再被调用。

var once = false; 
function prompt(){ 
    if(once == false){ 
     alert('Missing required fields!'); 
     once = true; 
    } 
} 

然后在您的输入标签中使用oninvalid="prompt();"。