Question

我遇到验证表单的问题。我有超过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（）函数来遍历select元素。

任何人都可以帮我这个吗？感谢

Answer 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

Answer 2

请参阅DEMO

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

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

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

Answer 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

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

3 个答案: