I'm having a problem of validating my form. I have more than 6 different drop down selection objects. Here are the first two as example:

<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>​​​​​​​​​​​​​​​​​​​​​​​​​

What I would like to do is to validate the drop down selection that if users select the empty option (default is the first option), and hit submit. Then it will get the error and notify the users that they have to select one option in each drop down selection. The six drop down selection ID is generated dynamically. I know that I could use jQuery .each() function to loop through the select element.

Can anyone help me about this? Thanks

I'm having a problem of validating my form. I have more than 6 different drop down selection objects. Here are the first two as example:

<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>​​​​​​​​​​​​​​​​​​​​​​​​​

What I would like to do is to validate the drop down selection that if users select the empty option (default is the first option), and hit submit. Then it will get the error and notify the users that they have to select one option in each drop down selection. The six drop down selection ID is generated dynamically. I know that I could use jQuery .each() function to loop through the select element.

Can anyone help me about this? Thanks

• javascript
• jquery
• html
• validation

Share Improve this question Follow asked Aug 1, 2012 at 4:20 R.SparkR.Spark 96522 gold badges1616 silver badges2222 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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
    }
})​;

DEMO

See DEMO

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

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

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

Here i have done plete bin for above validation issue.

Demo: http://codebins./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;
}

Demo: http://codebins./bin/4ldqp94