jquery - jQuery空字段验证只检查第一次出现？

Question

我有以下验证代码，如果第一个文本输入或菜单留空，它会正确突出显示表单中的所有问题区域。

但是，如果您填写第一个文本输入并从第一个选择框中进行选择，则此验证会让您错误地通过。

我已经包含了用于搜索空文本字段和选择菜单的 jquery。但如果我需要粘贴整个内容，请告诉我。

// create error flag
var error = 0;

// check required text fields for empty values, add class 'problem' to cells with inputs that have problems
if (!$('#register-form .required input').val()) {
    $('.required input:text[value=""]').parent().addClass("problem");
    error++;
    console.log('errors: ' + error + '; required text input missing a value.')
}

// check required select menus for default selections, add class 'problem' to cells with select menus that have problems
if (!$('#register-form .required select option:selected').val()) {
    $('.required select option:selected[value=""]').parent().parent().addClass("problem");
    error++;
    console.log('errors: ' + error + '; required select box missing a value.')
}

但是如果我（仅）满足第一个文本输入或从一组必需的菜单中选择菜单，则此验证失败。

我显然需要这个验证来检查每一个文本输入和一个单元格内部的每个 .required 类

Answer 1

$('#register-form .required').each(function() {

  var $input = $('input[type="text"]', this),
      $select = $('select', this);

  if(!$.trim($input.val())) {
     $input.parent().addClass("problem");
      error++;
      console.log('errors: ' + error + '; required text input missing a value.')

  }

  if(!$select.val()) {
      $select.parent().parent().addClass("problem");
      error++;
      console.log('errors: ' + error + '; required select box missing a value.'
  }

});