jQuery error validation for div dropdown

Question

Is it possible, using jquery validation, to set required to a Bootstrap styled div dropdown, vs. option/select? I can't change the tags to option/select on this page. There are also multiple div dropdowns.

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span data-bind="label">Month</span><span class="caret"></span>
        <label class="error" for="dobMonth" generated="true"></label>
     </button>
     <ul name="dobMonth" id="dobMonth" class="dropdown-menu">
         <li><a href="#">January</a></li>
         <li><a href="#">February</a></li>
         <li><a href="#">March</a></li>
         <li><a href="#">April</a></li>
     </ul>
 </div>


$(document).ready(function () {
    $("#form").validate({
        rules: {
            "dobMonth": {
                required: true
            }
        },
        messages: {
            "dobMonth": {
                required: "Enter the month you were born"
            }
        },
        submitHandler: function (form) {
            alert('valid form submitted');
            return false;
        }
    });
});

http://jsfiddle.net/sw87W/24/

You should check the answer given here: Jquery Validate

Sam Munroe
– Sam Munroe

2016-09-29 02:56:29 +00:00
Commented Sep 29, 2016 at 2:56 — Sam Munroe
– Sam Munroe, Commented Sep 29, 2016 at 2:56

user6879896 · Accepted Answer · 2016-09-29 03:06:14Z

0

Why don't create your own custom validation for it? You can't use jQuery validation if you're using button and ul. Ul doesn't have a name attribute. So, there's no value inside of it. The trick here is check the span innerHTML if it's equal to 'Month'.

Here's a sample code for it.

$('#form').on('submit', function(e){
    e.preventDefault();
  var mo = $('#id-month').html();

  mo == 'Month' ? alert('add error') : alert('remove error');
})

Look at it on fiddle. http://jsfiddle.net/sw87W/26/

It's up to you if you create a prototype function to make it dynamic. You can just simply append an element with a class of (error, label-error, or something). And remove it if it's false. I used jQuery validator before. Hope someone can provide a solution for you using validator. Cheers!

answered Sep 29, 2016 at 3:06

user6879896

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

Collectives™ on Stack Overflow

jQuery error validation for div dropdown

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related