如何在 Javascript 中缩短多个 if else 语句

Question

I recently came across a situation where I was working on a huge form with atleast 60 fields and I wanted that form to only submit if all fields were filled and if not, I wanted to show a custom message (Sweetalert) for every field not filled. For example, If first name was left empty, show the message "Please enter your first name", If country of residence was not selected, show them the message that "Please select your country of residence" so on and so forth. While I was writing tons of if and else statements to match every field using document.getElementById() , this thought of not doing things right came into my mind. I tried searching the web for this but was unable to find a suitable way of doing such things. Can anyone suggest me a better way rather then writing if else statements of 100 lines?

Answer 1

By adding a specific class to your form controls you'd be able to retrieve them and iterate through them in order to check which ones are not filled.

Let's say this is your form:

<form id="myForm" name="myForm" novalidate>
  <div>
    <label for="control_1">Label_1:</label>
    <input type="text" id="control_1" name="control_1" class="control" />
  </div>
  <div>
    <label for="control_2">Label_2:</label>
    <input type="text" id="control_2" name="control_2" class="control" />
  </div>
  <div>
    <label for="control_3">Label_3:</label>
    <input type="text" id="control_3" name="control_3" class="control" />
  </div>
  <div>
    <label for="control_4">Label_4:</label>
    <select id="control_4" name="control_4" class="control">
      <option value="option_1">Option 1</option>
      <option value="option_2">Option 2</option>
      <option value="option_3">Option 3</option>
    </select>
  </div>
  <div>
    <input type="submit" value="Submit!" />
  </div>
</form>

Then you can use the .control class to retrieve all controls and check them:

function onSubmit(e) {
  e.preventDefault();
  
  const controls = document
    .getElementById("myForm")
    .querySelectorAll(".control");

  controls.forEach(control => {
    if (!isControlFilled(control)) {
      console.log(control.id);
      // Do whatever you want with control's id
    }
  });
}

// This is just for illustrative purposes
// Should be adapted to cover all control types
function isControlFilled(control) {
  return control.value ? true : false;
}