Javascript Multiple validation error message failed

Question

I am unable to figure where is the issue in my JavaScript code. I want show and hide the error message based on whether the field value is empty or not.

if (info == "" && hrContacts == "") {
    document.getElementById("hr_contacts_error").style.display = "block";
    document.getElementById("info_error").style.display = "block";
    return false;
} else if (hrContacts == "") {       
    document.getElementById("hr_contacts_error").style.display = "block";
    return false;
} else if (hrContacts != "") {
    document.getElementById("hr_contacts_error").style.display = "none";
} else if (info == "") {
    document.getElementById("info_error").style.display = "block";
    return false;
} else if (info != "") {
    document.getElementById("info_error").style.display = "none";
} else if (info != "" && hrContacts != "") {
    form submit
}

Cerbrus · Accepted Answer · 2023-05-04T07:54:27.913

You can simplify this a lot.

First, set the initial state, assume there are no errors, and hide all messages.
Check every individual field, and if there's an input error, display the message, and set the error tracking boolean to true.
If at the end, there are any errors, return false to prevent form submit.
Actually submit the form, if there's no errors.

let hasError = false;
document.getElementById("hr_contacts_error").style.display = "none";
document.getElementById("info_error").style.display = "none";

if (hrContacts == "") {
  document.getElementById("hr_contacts_error").style.display = "block";
  hasError = true;
}
if (info == "") {
  document.getElementById("info_error").style.display = "block";
  hasError = true;
}

if (hasError) {
  return false;
}

// form submit

You could reduce some code duplication like this:

let hasError = false;

// Loop over all fields with their error message ID.
[
    [hrContacts, 'hr_contacts_error'],
    [info, 'info_error']
].forEach(([value, errorId]) => {
    const isEmpty = value == '';
    document.getElementById(errorId).style.display = isEmpty ? 'block' : 'none';
    hasError = hasError || isEmpty;
});

if (hasError) {
    return false;
}

// form submit

Np. I just added a even neater version, @jvk. If you have more fiels, it just takes an extra row in that arrauy. — Cerbrus, May 04 '23 at 07:55
So how will the screen reader handle that you do not change the aria-hidden attribute? — mplungjan, May 04 '23 at 08:06
Screen readers generally ignore anything with `display: none` @mplungjan. — Cerbrus, May 04 '23 at 08:22

Lk77 · Answer 2 · 2023-05-04T07:48:51.740

I would simply do :

document.getElementById("hr_contacts_error").style.display = hrContacts == "" ? "block" : "none";
document.getElementById("info_error").style.display = info == "" ? "block" : "none";

if(hrContacts != "" && info != "") {
    /* form submit */
} else {
    // if you need to
    return false;
}

no need for all those if/else

Also try to rely on native html validation as much as you can, like maxlength, min, max attributes and so on

mplungjan · Answer 3 · 2023-05-04T08:01:58.190

1

You did not tell us how you call the validation.

Here is how you SHOULD call it

NOTE: Simply adding required to the form fields can replace the validation of empty fields completely

window.addEventListener("DOMContentLoaded", () => { // page load
  document.getElementById("formID").addEventListner("submit", (e) => { // form submission - do not call anything "submit" in your form
    const hrContactsValue = document.getElementById("hr_contacts").value.trim();
    const infoValue = document.getElementById("info").value.trim();
    document.getElementById("hr_contacts_error").hidden = hrContactsValue !== "";
    document.getElementById("info_error").hidden = infoValue !== "";
    if (hrContactsValue === "" || infoValue === "") {
      e.preventDefault(); // cancel submit
    }
    // here form will submit
  });
});

edited May 04 '23 at 08:01

answered May 04 '23 at 07:56

mplungjan

169,008
28
173
236

I'd not use the `hidden` attribute... https://stackoverflow.com/a/64644217/1835379 . You're also checking the same condition twice, but opposite for each field. That seems error-prone. – Cerbrus May 04 '23 at 07:59
@Cerbrus thanks for the correction but what do you mean opposite? Ah, the === instead of the already fixed !== – mplungjan May 04 '23 at 08:02
@Cerbrus If I read that, I would PREFER hidden than to style.display, since that does NOT set the ARIA-HIDDEN at all. A good screen reader should handle hidden better than changes to a class or style – mplungjan May 04 '23 at 08:05
Thanks @mplungjan, It is a basic javascript validation – jvk May 04 '23 at 08:06

Javascript Multiple validation error message failed

3 Answers3