Unable to validate jQuery multiselect dropdown with id

Question

I am using jQuery multi-select drop down box. Because of it's default property I am unable to validate it with it's name attribute. So that I would like to validate with id. I am using this as reference. But my idea is not working. I don't know where my mistake is??

HTML

<form id="form1" method="post" action="">
    <div>
        <select name="offer" id="offer1">
        <option value="">Select one</option>
        <option value="aaaaa">aaaaaaaaaaa</option>
        <option value="bbbbb">bbbbbbbbbbb</option>
        <option value="cccccc">ccccccccccc</option>
        </select>
    </div>
</form>
<input type="submit" id="submit1" value="Save" />

JS

$(function () {
    $("#submit1").click(function () {
        alert("submit")
        var $off = $("#offer1").attr("name");
        var $params = {
            debug: true,
            rules: {},
            messages: {}
        };
        $params['rules'][$off] = "off";
        $params['messages'][$off] = "Select an offer";

        $("#form1").validate($params);
    });
});

fiddle

What isn't working, are there any errors? Your fiddle doesn't have jquery or jquery validation plugin. Are you linking to them before you try and validate? — gwillie, Oct 25 '13 at 07:57

score 2 · Answer 1 · answered Oct 25 '13 at 07:04

Try this

HTML CODE

<form id="RNA" name="RNA">
  <select size="5" name="sampleMut[]" multiple="multiple" id="sampleMut">
   <option value="41" >41</option>
   <option value="48" >48</option>
   <option value="65" >65</option>
   <option value="102" >102</option>
  </select>
  <input type="submit" />
</form>

JavaScript CODE

$(function(){
$('form').submit(function(){
     var options = $('#sampleMut > option:selected');
     if(options.length == 0){
         alert('no value selected');
         return false;
     }
 });
});

You can select multiple value from this select. options.length gives you how many values you select.

score 0 · Answer 2 · answered Oct 25 '13 at 06:40

enclose <option> tags inside your <select> tag

<select name="offer" id="offer1>
    <option value="">Select one</option>
    <option value="aaaaa">aaaaaaaaaaa</option>
    <option value="bbbbb">bbbbbbbbbbb</option>
    <option value="cccccc">ccccccccccc</option>
</select>

score 0 · Accepted Answer · answered Oct 25 '13 at 08:35

0

Please remove the [ ] in adding rule and message

The answer is:

$(function () {
    $("#submit1").click(function () {
        alert("submit");
        var $off = $("#offer1").attr("name");
        var $params = {
            debug: true,
            rules: {},
            messages: {}
        };

       //// Please note here
          $params.rules [$off] = "required";    
           $params.messages[$off] = "Select an offer";

      //
        $("#form1").validate($params);
    });
});

answered Oct 25 '13 at 08:35

Abdul Razak

253
2
3
14

Don't add multiple ans. You can edit your first ans if you want to do some change. – Arpit Oct 25 '13 at 09:33
-1, You absolutely do not need to put `.validate()` inside of a `click` handler. The `.validate()` call is the **one-time** _initialization_ method and therefore does not need to be repeatedly called on button `click`. The click event of the submit button is automatically captured by the plugin. I know you're just copying the OP's code, however, if you're going to post an answer, it might as well promote the proper usage. @Sam, see: http://jsfiddle.net/BzSLC/ – Sparky Oct 25 '13 at 20:50

score -1 · Answer 4 · answered Oct 25 '13 at 08:07

-1

Try out this:

$(function () {

 $("#submit1").click(function(){
 alert("submit");
 $("#form1").validate({
        rules: {
            offer: "required"

        },
        messages: {
            offer: "Select an Offer"

        }
    });
 });
});

answered Oct 25 '13 at 08:07

Abdul Razak

253
2
3
14

-1, You absolutely do not need to put `.validate()` inside of a `click` handler. The `.validate()` call is the **one-time** _initialization_ method and therefore does not need to be repeatedly called on button `click`. The click event of the submit button is automatically captured by the plugin. See: http://jsfiddle.net/BzSLC/ – Sparky Oct 25 '13 at 20:52

Unable to validate jQuery multiselect dropdown with id

4 Answers4