How to validate bootstrap multiselect dropdown using jquery

Question

I am trying to validate Bootstrap multiselect dropdown using the code given below, the form is getting validated but i did'nt get the proper output, the validation message is above the selectbox and the message gets multiplied when clicking on the submit button and after selecting option the message did'nt gets removed. Please help to solve my problem.

      <script type="text/javascript">
        $(document).ready(function() {
        $.validator.addMethod("needsSelection", function (value, element) {
            var count = $(element).find('option:selected').length;
            return count > 0;
          });

        $.validator.messages.needsSelection = 'Select Atleast One College'; 

          $("#User").validate({
                  rules: {    
                    'college[]': {
                    needsSelection: true
                    }
                  },
              }
          });

 $("#submit").click(function(e) {
    var isvalidate=$("#User").valid();
    if(isvalidate=="true")
    {

    }
    else
    {
        $("#User").submit();
    }
 });

});

    <form id="User" name="User" method="post" enctype="multipart/form-data" action="index">   
        <select data-placeholder="Choose College Name" name="college[]" class="chosen-select" id="college" multiple tabindex="4">
                    <option value=""></option>
                    <option value="1">abc</option>
                    <option value="2">abc1</option>
        </select>
    <a id="submit">Submit</a>
    </form>

cssyphus · Accepted Answer · 2015-07-28 16:19:47Z

This is not a direct answer to your question, but may provide a solution to your problem.

First, change the anchor tag to a button -- because anchor tags have built-in navigation behaviour that you must counter (event.preventDefault()) and therefore add needless complexity. How about a button (input or button tags) or a div tag, or a p?)

Next, a simpler structure to evaluating your form:

jsFiddle Demo

HTML: (just changed your anchor submit button to:

<input id="dosubmit" type="submit" value="Submit" />

Note: do not use "submit" as the id for a submit button, as that is a reserved keyword

javascript/jQuery:

$('#User').submit(function(e){
    var col = $('#college').val();
    if ( col==null || col=='' || col=='Please choose one:' ){
        $('#college').css('background','yellow').focus();
        return false;
    }else{
        $('#college').css('background','transparent');
        alert('Form submitted');
        //continue to submit the form - but not now
        return false;
    }
});

Please consider this verification script for your project.

Franco · Accepted Answer · 2015-07-28 20:21:29Z

0

This is not an answer to your question but I will advise you and encourage you to use a server-side validation together.

Your data should be validate and as needed sanitzed on the php file that receives the ajax call.

If something is going wrong there, the response will always be passed back to your form giving your users the needed feedback.

You can find many examples on the internet of how to do this.

See here an example: https://scotch.io/tutorials/submitting-ajax-forms-with-jquery

So to recap: Dont't do client-side validation!!

edited Jul 28, 2015 at 20:21

answered Jul 28, 2015 at 20:14

Franco

2,3291 gold badge13 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to validate bootstrap multiselect dropdown using jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related