在 AJAX 提交之前使用 jQuery 进行多个下拉选择验证答案

【问题标题】：multiple drop down selection validation using jQuery before the AJAX submit在 AJAX 提交之前使用 jQuery 进行多个下拉选择验证
【发布时间】：2012-07-29 22:50:09
【问题描述】：

我在验证表单时遇到问题。我有超过 6 个不同的下拉选择对象。这里以前两个为例：

<table id="ProjectTable">
<tr><td>
<select id="selected1" selectedIndex=0>
    <option></option>
    <option>o1</option>
    <option>o2</option>
    <option>o3</option>
    <option>o4</option>
</select>
</td>
<td>
<select id="selected2" selectedIndex=0>
    <option></option>
    <option>10</option>
    <option>12</option>
    <option>13</option>
    <option>14</option>
</select>
</td></tr></table>
<button type="button">Submit</button>

我想做的是验证下拉选择，如果用户选择空选项（默认是第一个选项），然后点击提交。然后它会收到错误并通知用户他们必须在每个下拉选项中选择一个选项。六个下拉选择 ID 是动态生成的。我知道我可以使用 jQuery .each() 函数来循环选择元素。

谁能帮我解决这个问题？谢谢

【问题讨论】：

标签： javascript jquery html validation

【解决方案1】：

// filter over empty selects
// function will jQuery object
function checkEmptySelect() {
    return $('select').filter(function() {
        // return those selects, with no value selected
        return !this.value.trim();
    });
}

// bind change event to select box
$('select[id^=selected]').on('change', function() {
    // keep reference of returned jQuery object
    var unselect = checkEmptySelect();
    // checking is any non-selected select box exists
    if (unselect.length) {
        unselect.addClass('error'); // if exists then add error class
    } else {  // if no non-selected found
        $('select[id^=selected]').removeClass('error'); // remove error class
    }
});

DEMO

【讨论】：

【解决方案2】：

见DEMO

$('#form').submit(function () {
    var valid = true;

    $('select', this).each(function (e) {
        if (!$(this).val()) valid = false;
    });

    if (!valid) {
        $('.error').show();
        return false;
    }
});

【讨论】：

【解决方案3】：

这里我已经为上述验证问题完成了完整的 bin。

演示： http://codebins.com/bin/4ldqp94

HTML：

<form id="frm1">
  <div class="error">
  </div>
  <table id="ProjectTable">
    <tr>
      <td>
        <select id="selected1" selectedIndex=0>
          <option>
          </option>
          <option>
            O1
          </option>
          <option>
            O2
          </option>
          <option>
            O3
          </option>
          <option>
            O4
          </option>
        </select>
      </td>
      <td>
        <select id="selected2" selectedIndex=0>
          <option>
          </option>
          <option>
            10
          </option>
          <option>
            12
          </option>
          <option>
            13
          </option>
          <option>
            14
          </option>
        </select>
      </td>
      <td>
        <select id="selected3" selectedIndex=0>
          <option>
          </option>
          <option>
            opt1
          </option>
          <option>
            opt2
          </option>
          <option>
            opt3
          </option>
          <option>
            opt4
          </option>
        </select>

      </td>
    </tr>
  </table>
  <button type="submit">
    Submit
  </button>
</form>

jQuery：

$(function() {
    $("form#frm1").submit(function() {
        var isValid = true;
        $("select").each(function() {
            $(".error").html();
            if ($(this).val() == "") {
                $(".error").html("Please selct value for empty dropdown..!");
                isValid = false;
            }
        });
        return isValid;
    });
});

CSS：

.error{
  color:#f81122;
  padding:5px;
}

演示： http://codebins.com/bin/4ldqp94

【讨论】：