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:
<!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:
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:
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:
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?
Advertisement
Answer
Although the answer by Raul Marquez is working, I want to share my own solution:
<!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>