Question 137104 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript Multiple validation error message failed

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
}
Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    You can simplify this a lot.

    1. First, set the initial state, assume there are no errors, and hide all messages.
    2. Check every individual field, and if there’s an input error, display the message, and set the error tracking boolean to true.
    3. If at the end, there are any errors, return false to prevent form submit.
    4. 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
    Login or Signup to reply.
  3. 0

    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
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search