### What I try to achieve

I try to create a form with required fields. If the user submits the form without filling out all submitted fields, the field-border should become red *and* the standard message "Please fill out this field" shouldn't appear.

The following form is a minimal working example:

```html
<!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>

```

### What I've tried

I've tried to set the custom validation message to an empty string:

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

```

This does not work (in firefox and in chrome).

---

I've also read somewhere (unfortunately I can't find the link anymore) that I have to set it to just one space:

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

```

This does work with chrome, but unfortunately it doesn't work with firefox (the message-box still appears with one space in it).

---

I've finally tried to just prevent the default:

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

```

This doesn't work with firefox and chrome.

### Question

Is it possible to prevent the appearance of the message-error entirely for all browsers?