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 函数。它通过使用 if 语句来工作，该语句仅在第一次调用该函数时为真，之后将不再调用 alert()。

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

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