Breaking down a form validation function into smaller ones

Question

I've got a form validation that has 8 textareas - only 1 of them is with a different condition. 7 of them are checked if they have less than 140 characters. I'm fairly new to JavaScript and was wondering how can I break it down into 2 functions, 1 for the less than 140 characters and the other one is for word count.

inputTextAreas.forEach(input => {

     let inputValue = input.value;

      input.classList.remove("error");

      if(input.name == 'question1') {
        if (input.value.length < 10 || input.value.length > 140) {
          $self.outputInputError(input,inputTextAreasErrors.question1);
        }
      } else if (input.name == 'question2') {
        if (input.value.length < 10 || input.value.length > 140) {
          $self.outputInputError(input,inputTextAreasErrors.question2);
        }
      } else if (input.name == 'question3') {
        if (input.value.length < 10 || input.value.length > 140) {
          $self.outputInputError(input,inputTextAreasErrors.question3);
        }
      } else if (input.name == 'question4') {
        if (questionFourWordCount.length < 2 || questionFourWordCount.length > 7) { 
          $self.outputInputError(input,inputTextAreasErrors.question4);
        }
      } else if (input.name == 'question5') {
        if (input.value.length < 10 || input.value.length > 140) {
          $self.outputInputError(input,inputTextAreasErrors.question5);
        }
      } else if (input.name == 'question6') {
        if (input.value.length < 10 || input.value.length > 140) {
          $self.outputInputError(input,inputTextAreasErrors.question6);
        }
      } else if (input.name == 'question7') {
        if (input.value.length < 10 || input.value.length > 140) {
          $self.outputInputError(input,inputTextAreasErrors.question7);
        }
      } else {
        if (input.name == 'question8') {
          if (input.value.length < 10 || input.value.length > 140) {
            $self.outputInputError(input,inputTextAreasErrors.question8);
          }
        }
      }
    });

Yes, try putting it in a function. Can you show us your attempt, please? — Bergi, Jan 18 '19 at 12:30
Hint: `inputTextAreasErrors.question2` etc. seems like they can be replaced by `inputTextAreasErrors[input.name]`, then the code is the same for each of them. — Bergi, Jan 18 '19 at 12:31

score 0 · Answer 1 · answered Jan 18 '19 at 12:45

inputTextAreas.forEach(input => {

 let inputValue = input.value;

  input.classList.remove("error");

  if(input.name == 'question1' || input.name == 'question2' || input.name == 'question3' || input.name == 'question5' || input.name == 'question6' || input.name == 'question7' || input.name == 'question8') {
    if (input.value.length < 10 || input.value.length > 140) {
      $self.outputInputError(input,inputTextAreasErrors.input.name);
    }
  } else{
    if (questionFourWordCount.length < 2 || questionFourWordCount.length > 7) { 
      $self.outputInputError(input,inputTextAreasErrors.input.name);
    }
  }
});

I think that will do. I also changed the name dynamically. Let me know if this work or not. There's not much more information on this code. Thanks.

score 0 · Accepted Answer · answered Jan 18 '19 at 12:54

You could replace the else if in the following way, an take advantage of accessing a property of an object using the bracket notation

if (input.name === 'question4') {
    if (questionFourWordCount.length < 2 || questionFourWordCount.length > 7) {
        $self.outputInputError(input, inputTextAreasErrors.question4);
    }
} else {
    if (input.value.length < 10 || input.value.length > 140) {
        $self.outputInputError(input, inputTextAreasErrors[input.name]);
    }
}

Breaking down a form validation function into smaller ones

2 Answers2