1

In my bootstrap project I'm trying to use the plugin select2 but I realized that if you use this plugin are no longer able to validate select fields in my form with validate plugin. I would avoid using the commercial plugin bootstrap validator..

<div class="container">
<div class="row">
    <form id="test_form" action="?">
        <div class="col-md-3">
            <div class="form-group">
                <label for="name">Foo</label>
                 <select class="form-control" id="foo" name="foo">
                     <option value=""></option>
                     <option value="1">1</option>
                     <option value="2">2</option>
                 </select>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label for="name">Bar</label>
                <select class="form-control" id="bar" name="bar">
                    <option value=""></option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </div>
        </div>
        <div class="col-md-1">
            <button type="submit" class="btn btn-primary">VALIDATE</button>
        </div>
    </form>
</div>
</div>

JS

/* select 2 plugin */
$('select#foo').select2();

/* Validation */
$("#test_form").validate({
    rules:
    {
        foo: { required: true },
        bar: { required: true }
    },
    errorPlacement: function (error, element) {
        $(element).addClass('err');
    },
    success: function (label, element) {
        $(element).removeClass('err');
    },
    submitHandler: function(form) {
        alert("validation ok");
    }
});

In your opinion how could I fix this problem? Thanks

MY DEMO

Paolo Rossi
  • 2,490
  • 9
  • 43
  • 70
  • For best practices, you should only be adding/removing the classes with `highlight` and `unhighlight`, NOT with `errorPlacement` and `success`... that's not their intended purpose. – Sparky Dec 02 '14 at 15:42
  • @Sparky - I apologize for the duplicate, I had not found your answer, which is what I wanted.. – Paolo Rossi Dec 04 '14 at 18:55

1 Answers1

6

Ok. Here is what worked for me

/* select 2 plugin */
$('select#foo').select2();

/* Validation */
    $("#test_form").validate({
        ignore: 'input[type=hidden]',
        rules:
        {
            foo: { required: true },
            bar: { required: true }
        },
        errorPlacement: function (error, element) {
            $(element).parent().addClass('has-error');
        },
        success: function (label, element) {
            $(element).parent().removeClass('has-error');
        },
        submitHandler: function(form) {
            alert("validation ok");
        }
    });

I added a "ignore: 'input[type=hidden]'," option because the Select2 script adds a hidden option to the original input and the Jquery Validator seems to ignore it. Then i changed the error class from "err" on the element to "has-error" on the parent element (the div with form-group class)

Julino Neto
  • 76
  • 2
  • 1
    `ignore: 'input[type=hidden]'` means to ignore only `input type="hidden"` elements instead of the default to ignore all hidden elements. You could specify to ignore _nothing_ hidden by using `ignore: []` and that would work too. Otherwise, you could specify to ignore everything _except_ the hidden `select` element. – Sparky Dec 02 '14 at 15:47
  • 1
    i'm not a pro developer.. i only know it worked :D thanks for your explanation ;) – Julino Neto Dec 02 '14 at 17:04