I want to change default error message for inputs in browser. I turn on all default messages, create hidden div with text and I want to show this div for every invalid input. Text inside div is different and for some inputs I don't need text error.
My HTML form:
<form id="registration__form" action="form_handler.php" class="form" method="POST" name="form">
<div>
<label for="email">email</label>
</div>
<div>
<input id="email" type="email" name="email" required="required">
<div class="error-message-2">error 1</div>
</div>
<div>
<label for="number">number</label>
</div>
<div>
<input id="number" type="text" name="number" required="required">
<div class="error-message-2">error 2</div>
</div>
<div>
<label for="company">company</label>
</div>
<div>
<input id="company" type="text" name="company" required="required">
</div>
<div>
company
</div>
<div>
<input type="password" id="field" data-indicator="pwindicator" name="password" required="required">
</div>
<div>
<div id="pwindicator" class="pwindicator">
<div class="bar">
</div>
<div class="label"></div>
</div>
</div>
My css is very simple
.error-message-2 {
display: none;
color: #fd1d1e;
}
My JS
function replaceValidationUI(form) {
// Suppress the default bubbles
form.addEventListener("invalid", function(event) {
event.preventDefault();
}, true);
// Support Safari, iOS Safari, and the Android browser—each of which do not prevent
// form submissions by default
form.addEventListener("submit", function(event) {
if (!this.checkValidity()) {
event.preventDefault();
}
});
var submitButton = form.querySelector("button:not([type=button]), input[type=submit]");
submitButton.addEventListener("click", function(event) {
var invalidFields = form.querySelectorAll(":invalid"),
errorMessages = form.querySelectorAll(".error-message"),
parent;
// Remove any existing messages
for (var i = 0; i < errorMessages.length; i++) {
errorMessages[i].parentNode.removeChild(errorMessages[i]);
}
for (var i = 0; i < invalidFields.length; i++) {
parent = invalidFields[i].parentNode;
parent.getElementsByClassName("error-message-2").style.display = "block";
}
// If there are errors, give focus to the first invalid field
if (invalidFields.length > 0) {
invalidFields[0].focus();
}
});
}
// Replace the validation UI for all forms
var forms = document.querySelectorAll("form");
for (var i = 0; i < forms.length; i++) {
replaceValidationUI(forms[i]);
}
I got error 'getElementsByClassName.style is undefined' here
for (var i = 0; i < invalidFields.length; i++) {
parent = invalidFields[i].parentNode;
parent.getElementsByClassName("error-message-2").style.display = "block";
}
What is wrong?
P.S. JSFiddle here
