0
147
ViewsPossible to override the text in a validation error dialog box?
I have a form built out in HTML, and for sake of keeping things simple and to the point, I have the following (along with 3 other similar <input> radio buttons, wrapped in a <form> tag:
<input id="Q1_r1" name="Question_1" required="" type="radio" value="Very Bad"><label class="radio" for="Q1_r1"><span style="padding-left:30px; font-size:13px;">
So, when you try to submit this form without choosing a radio option, we get a validation error:
Totally expected - so the question I have is, is there any way to override the "cloud.chfsmail.ky.gov" in the alert box to something more user friendly?
1 answers
Answer question0
For posterity's sake, here's a simple example of how one might create a custom alert-popup to communicate sth. to the user (in this case that the form wont submit until all fields are filled out).
The key idea is having a dedicated container for your message, who's visibility you change when you want to say sth. Don't forget to hide it again!
const form = document.querySelector('form');
const overlay = document.getElementById('overlay');
form.onsubmit = (event) => {
event.preventDefault();
if ([...form.querySelectorAll('input')].some(i => !i.value)) {
overlay.textContent = 'All fields need filling out';
overlay.classList.add('active');
setTimeout(() => overlay.classList.remove('active'), 3000);
}
};#overlay {
position: absolute;
top: 50vh;
right: 50vw;
background: lightgrey;
padding: 8px 12px;
display: none;
}
#overlay.active {
display: block;
}<form>
<label>
<input name="foo">
<span>Foo</span>
</label>
<label>
<input name="bar">
<span>Bar</span>
</label>
<label>
<input name="baz">
<span>Baz</span>
</label>
<button>Submit</button>
</form>
<div id="overlay"></div>