оптимизация проверки значения в этой проверке JQuery

Question

У меня есть этот сценарий проверки для моей формы (опрос). Он просматривает все ответы и проверяет, является ли это радиокнопкой, флажком, вводом или вопросом textarea. Исходя из этого, он соответственно проверяет ввод с проверенным значением (и радио, и флажок), или значением, отличным от "" (input / textarea) (это не так уж много, но с чего-то начинать). RequiredMessage () устанавливает предупреждение, если поля оставлены пустыми, или удаляет предупреждение, когда поле корректируется пользователем.

Я ищу способ оптимизировать этот код, потому что он выглядит очень повторяющимся, но я не слишком уверен, с чего начать. Хотя у блоков есть некоторые общие черты, они, кажется, не вписываются в одну общую проверку. Любая помощь приветствуется!

Примечание: я не ожидаю полностью пересмотренную версию, мне просто нужно какое-то направление, где искать улучшения или как использовать jQuery для объединения этих проверок.

Вот код JavaScript:

// validate the form
function validate(event){
    var sendform = true;
  $(".questionnaire-question-answer").each(function(){

// radiobutton case
    if($(this).find("input:radio").length){
        if($(this).find("input:radio:checked").length == 0){
            requiredMessage(this, "invalid");
            sendform = false;
        } else {
            requiredMessage(this, "valid");
        }
    }
// checkboxes case
    else if($(this).find("input:checkbox").length){
         if($(this).find("input:checkbox:checked").length == 0){
            requiredMessage(this, "invalid");
            sendform = false;
         } else {
            requiredMessage(this, "valid");
         }
    }
// single freetext case
    else if($(this).find("input:text").length == 1) {
         if($(this).find("input:text").val() == ""){
            requiredMessage(this, "invalid");
            sendform = false;
         } else {
            requiredMessage(this, "valid");
         }
    }
// multiple freetext case
    else if($(this).find("input:text").length > 1) {
        var content = false;
        $(this).find("input:text").each(function(){
            if($(this).val() != ""){
              content = true;
              requiredMessage(this, "valid");  
            }
        });
        if(content == false){
          requiredMessage(this, "invalid");
          sendform = false;
        }
    }
// textarea case
    else if($(this).find("textarea").length){
         if($(this).find("textarea").val() == ""){
           requiredMessage(this, "invalid");
           sendform = false;
         } else {
           requiredMessage(this, "valid");
         }
    }
  });
// check whether the form has errors
  if(sendform == true){
    return true;
  } else {
    event.preventDefault();
  }
}

Answer 1

Вы можете немного сузить его с помощью селекторов, это очень близко, но не точно , что вы имеете для логики, попробуйте:

function validate(event){
  var sendform = true;
  $(".questionnaire-question-answer").each(function() {
    var e = $(this).find("input:checked,input:text[value!=''],textarea[value!='']");
    //e is input/textarea elements with values
    if(e.length) {
      requiredMessage(this, "valid");
    } else {
      requiredMessage(this, "invalid");
      sendform = false;
    }
  });

  if(sendform) return true;
  event.preventDefault();
}