CODEWITHSUNDEEP
javascriptjqueryjquery-validateselectlist
TDub
TDub

Reputation: 35

Using jQuery validate to ensure at least one dropdown has a value

I am new to jQuery, jQuery validate, and JavaScript so I apologize in advance for my ignorance. I have spent hours looking for an answer and trying different code but I haven't been able to figure what seems like should be simple.

To keep things simple, I have two dropdowns. One for Apples and one for Oranges. I want to ensure that at least one dropdown has a value when the form is submitted using the "Approve" button. If neither dropdown has a value then the form shouldn't be submitted and a notice next to each field should state something like "At least one dropdown must have a value". When one dropdown is then selected, the warning for both dropdowns goes away.

The form code is:

    <form name="form1" id="form1" action="" method="post">
  <table>
    <tr>
      <td><label for="selApples">Apples</label></td>
      <td><select name="selApples" id="selApples" class="authSelect">
          <option value="">None</option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </td>
    </tr>
    <tr>
      <td><label for="selOranges">Oranges</label></td>
      <td><select name="selOranges" id="selOranges" class="authSelect">
          <option value="">None</option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </td>
    </tr>
    <tr>
      <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="button" name="btnApprove" id="btnApprove" value="Approve">
        <input type="button" name="btnCancel" id="btnCancel" value="Cancel">
      </td>
    </tr>
  </table>
</form>

I would post my attempt at the jQuery but at the risk of embarrassing myself, I won't. Does anyone have any ideas on the best way to tackle this?

EDIT: Since it was pointed out I should use require_from_group here is my attempt:

$("#btnApprove").on("click", function() {

    $("#form1").validate( {
        ignore: "",
        rules: {    
            selApples: {
                require_from_group: [1, ".authSelect"]
            },              
            selOranges: {
                require_from_group: [1, ".authSelect"]
            }
        }       
    });

});

Upvotes: 1

Views: 1904

Answers (1)

Sparky
Sparky

Reputation: 98738

There is nothing wrong with your require_from_group rule. The issue is that you've wrapped the .validate() method inside of a click handler.

The .validate() method is how the plugin is initialized, it's never called by the form's button.

$(document).ready(function() {

    $("#form1").validate({ // intialize plugin
        ignore: "",
        rules: {    
            selApples: {
                require_from_group: [1, ".authSelect"]
            },              
            selOranges: {
                require_from_group: [1, ".authSelect"]
            }
        }       
    });

    $("#btnApprove").on("click", function() {
        $("#form1").valid(); // trigger validation
    });

});

DEMO: http://jsfiddle.net/0arvubxy/

  • If you want to combine the two error messages into one, then you would use the groups option.

  • If you need to move the error message, then use the errorPlacement option.

Upvotes: 1

Related Questions