为 html-form 中的必填字段设置验证操作答案

【问题标题】：Set validation action for required fields in html-form为 html-form 中的必填字段设置验证操作
【发布时间】：2020-10-28 14:04:48
【问题描述】：

我想达到的目标

我尝试创建一个包含必填字段的表单。如果用户在未填写所有提交字段的情况下提交表单，则字段边框应变为红色并且不应出现标准消息“请填写此字段”。

以下形式是一个最小的工作示例：

<!DOCTYPE html>
<html lang='en'>
<head>
    <title>Test</title>
</head>
<body>
    <div class='inner'>
        <form method='POST' action='php/send.php' class='input'>
            <label>Your Name:</label><br>
            <input type='text' name='myName' placeholder='Name' required oninvalid='invalid(this)'/><br><br>
            <label>Your Email:</label><br>
            <input type='email' name='myEmail' placeholder='E-Mail' required oninvalid='invalid(this)'/><br><br>

            <label>Message:</label><br>
            <textarea rows='8' name='myMessage' id='myMessage' placeholder='Message' required oninvalid='invalid(this)'></textarea><br><br>
            <input type='submit' value='Send'/>
        </form>
    </div>
</body>
</html>

我尝试过的

我尝试将自定义验证消息设置为空字符串：

function invalid(e) {
    e.setCustomValidity('');
    e.style.border = '3px solid red';
}

这不起作用（在 Firefox 和 chrome 中）。

我还在某处读到（不幸的是，我再也找不到链接了）我必须将其设置为一个空格：

function invalid(e) {
    e.setCustomValidity(' ');
    e.style.border = '3px solid red';
}

这确实适用于 chrome，但不幸的是它不适用于 firefox（消息框仍然出现，其中有一个空格）。

我终于尝试阻止默认设置：

function invalid(e) {
    e.preventDefault();
    e.style.border = '3px solid red';
}

这不适用于 firefox 和 chrome。

问题

是否可以完全防止所有浏览器出现消息错误？

【问题讨论】：

尝试在表单标签中添加 novalidate
@cojack 这并不能解决问题，因为这样用户无需填写必填字段即可提交表单。

标签： javascript html

【解决方案1】：

我刚刚测试过，它有效。

(function() {

  document.addEventListener('invalid', (function(){
      return function(e) {
        // prevent the browser from showing default error bubble / hint
        e.preventDefault();
        // optionally fire off some custom validation handler
        // myValidation();
      };
  })(), true);

})();

function invalid(e) {
    e.style.border = '3px solid red';
}

<!DOCTYPE html>
<html lang='en'>
<head>
    <title>Test</title>
</head>
<body>
    <div class='inner'>
        <form method='POST' action='php/send.php' class='input'>
            <label>Your Name:</label><br>
            <input type='text' name='myName' placeholder='Name' required oninvalid='invalid(this)'/><br><br>
            <label>Your Email:</label><br>
            <input type='email' name='myEmail' placeholder='E-Mail' required oninvalid='invalid(this)'/><br><br>

            <label>Message:</label><br>
            <textarea rows='8' name='myMessage' id='myMessage' placeholder='Message' required oninvalid='invalid(this)'></textarea><br><br>
            <input type='submit' value='Send'/>
        </form>
    </div>
    
</body>
</html>

【讨论】：

【解决方案2】：

虽然Raul Marquez 的answer 有效，但我想分享我自己的解决方案：

<!DOCTYPE html>
<html lang='en'>
<head>
    <title>Test</title>
</head>
<body>
    <div class='inner'>
        <form method='POST' action='php/send.php' class='input'>
            <label>Your Name:</label><br>
            <input class='validInput' type='text' name='myName' placeholder='Name' required/><br><br>
            <label>Your Email:</label><br>
            <input class='validInput' type='email' name='myEmail' placeholder='E-Mail' required/><br><br>

            <label>Message:</label><br>
            <textarea class='validInput' rows='8' name='myMessage' id='myMessage' placeholder='Message' required></textarea><br><br>
            <input class='validInput' type='submit' value='Send'/>
        </form>
    </div>
    <script>
        //Get an array of elements with classname 'validInput'
        let elements = document.getElementsByClassName('validInput');

        //iterate over the elements
        for(let i = 0; i < elements.length; i++) {

            //When user focuses on one element (clicks on that element and writes something)
            elements[i].addEventListener('focus', function() {
                this.style.border = '3px solid green';
            });

            //When user stops focusing on an element
            elements[i].addEventListener('blur', function() {
                this.style.border = '1px solid #f3f3f3';
            });

            //When user submits the form and the field-value is invalid
            elements[i].addEventListener('invalid', function(event) {
                event.preventDefault();
                this.style.border = '3px solid red';
            });
        }
    </script>
</body>
</html>

【讨论】：