2

フォームの検証に問題があります。6つ以上の異なるドロップダウン選択オブジェクトがあります。例として最初の2つを次に示します。

<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>
​&lt;button type="button">Submit</button>​​​​​​​​​​​​​​​​​​​​​​​​​

私がしたいのは、ユーザーが空のオプション（デフォルトは最初のオプション）を選択した場合にドロップダウン選択を検証し、送信を押すことです。次に、エラーが発生し、各ドロップダウン選択で1つのオプションを選択する必要があることをユーザーに通知します。6つのドロップダウン選択IDが動的に生成されます。jQuery .each（）関数を使用してselect要素をループできることはわかっています。

誰かがこれについて私を助けることができますか？ありがとう

4

3 に答える 3

3 
// 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
    }
})​;

デモ

于 2012-08-01T04:35:17.107 に答える
1

デモを見る

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

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

    if (!valid) {
        $('.error').show();
        return false;
    }
});​
于 2012-08-01T04:34:57.657 に答える
1

ここで、上記の検証の問題について完全なビンを作成しました。

デモ： 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

于 2012-08-01T05:07:23.073 に答える