multiple drop down selection validation using jQuery before the AJAX submit

Question

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

thecodeparadox · Accepted Answer · 2012-08-12 04:26:14Z

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

edited Aug 12, 2012 at 4:26

answered Aug 1, 2012 at 4:35

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Danil Speransky · Accepted Answer · 2012-08-01 04:34:57Z

1

See DEMO

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

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

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

answered Aug 1, 2012 at 4:34

Danil Speransky

30.5k6 gold badges70 silver badges78 bronze badges

Comments

gaurang171 · Accepted Answer · 2012-08-01 05:07:23Z

Here i have done complete bin for above validation issue.

Demo: 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;
}

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

Collectives™ on Stack Overflow

multiple drop down selection validation using jQuery before the AJAX submit

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related