Java script reduction

Question

I was wondering if there was anyway of simplifying the code below without using jQuery?

Still very inexperienced with JavaScript so any help is much appreciated! Thank you in advance everyone :D

    if (name === "") {
        document.getElementById("name").focus();
        alert("Name must be filled out.");
        return false;
    } else if (!(/\S/.test(name))) {
        document.getElementById("name").focus();
        alert("Name cannot be blank.");
        return false;
    } else if (!(/^([^0-9]*)$/.test(name))) {
        document.getElementById("name").focus();
        alert("Name cannot contain numbers.");
        return false;
    } else if (email === "") {
        document.getElementById("email").focus();
        alert("Please enter your email address.");
        return false;
    } else if (/^\S+@\S+\.\S+$/.test(email) === false) {
        document.getElementById("email").focus();
        alert("Please enter a valid email address.");
        return false;
    } else if (basecamp === "") {
        document.getElementById("basecamp").focus();
        alert("Please select a base camp.");
        return false;
    } else if (max == 0) {
        document.getElementById("basecamp").focus();
        alert("This base camp has run out of slots, please select another base camp.");
        return false;
    } else if (package === "") {
        document.getElementById("package").focus();
        alert("Please select a package.");
        return false;
    } else if (validdate === "") {
        document.getElementById("date").focus();
        alert("Please select a date.");
        return false;
    } else if (groupsize === "") {
        document.getElementById("groupsize").focus();
        alert("Please select a group size.");
        return false;
    } else if (groupsize <= 0) {
        document.getElementById("groupsize").focus();
        alert("Please select a postitve number.");
        return false;
    } else {
        updateData();
    }
}

I believe you can get better answers in codereview.stackexchange.com/ — Thum Choon Tat
– Thum Choon Tat, Commented Apr 2, 2019 at 2:36

CertainPerformance · Accepted Answer · 2019-04-02 02:39:23Z

You might use an array of conditions, where each subarray (or subobject) contains the condition to test (what's in your if / else if at the moment), the ID to focus if the condition is true, and the message to alert. Then, iterate over it, finding the first truthy condition - if found, alert the associated message, focus the element, and return false. Otherwise, if none of the bad conditions were found, call updateData:

const arr = [
  [
    name === "",
    'name',
    "Name must be filled out."
  ],
  [
    !(/\S/.test(name)),
    'name',
    'Name cannot be blank.'
  ],
  [
    !(/^([^0-9]*)$/.test(name)),
    'name',
    'Name cannot contain numbers.'
  ]
  // etc
];

const firstBadCondition = arr.find(([cond]) => cond);
if (firstBadCondition) {
  const [, idToFocus, errorMessage] = firstBadCondition;
  document.getElementById(idToFocus).focus();
  alert(errorMessage);
  return false;
} else {
  updateData();
}

Maheer Ali · Accepted Answer · 2019-04-02 02:39:35Z

You can create a function which takes element id name,email... as parameter and a message that need to alert. return false from that function. And you if-else statements just return that function.

Here is a little example.

function sendMsg(elm,msg){
  document.getElementById(elm).focus();
  alert(msg)
  return false;
}


if (name === "") {
        return sendMsg('name',"Name must be filled out.")
    } else if (!(/\S/.test(name))) {
        return sendMsg("name","Name cannot be blank.")
    } else if (!(/^([^0-9]*)$/.test(name))) {
        return sendMsg('name',"Name cannot contain numbers.")
    } else if (email === "") {
        return sendMsg('email',"Please enter your email address.")
    } else if (/^\S+@\S+\.\S+$/.test(email) === false) {
       return sendMsg('email',"Please enter a valid email address.")
    }
    .....
    .....
    .....

Collectives™ on Stack Overflow

Java script reduction

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related