forms - Issue using Jquery Validate + Tooltipster to validate radio buttons

Question

I'm using the Jquery Validation Plugin and Tooltipster Plugin based in the example found in this post.

Both plugins works fine together validating must the input types, but when i try to validate a pair of radio buttons clicking the submit button, the form is submitted regardless that none radio button is selected, despite that these are explicit required.

This is the form that i'm trying validate

    <form id="form1" method="post" action="">

        <table class="bordered">

            <tbody>
                <tr>
                      ...
                        <div id="vtelfonos">
                            <label for="telf_local">Local</label>
                            <input type="radio" id="telf_local" name="telf"/>

                            <label for="telf_movil">Movil</label>
                            <input type="radio" id="telf_movil" name="telf"/>

                            <div id="raytel" style="padding-left:100px">
                                <span style="float:left">
                                    <label for="cel1"></label>
                                  <select name="cel1" id="cel1" disabled="disabled" style="padding-bottom:1px; margin-right:2px" required>
                                      <option value="0426">0426</option>
                                      <option value="0424">0424</option>
                                      <option value="0416">0416</option>
                                      <option value="0414">0414</option>
                                      <option value="0412">0412</option>
                                    </select>
                                </span>
                                <span style="float:left">
                                    <label for="telefono"></label>
                                    <input name="telefono" id="telefono" type="text" disabled="disabled" maxlength="7" style="width:58px"  onkeyUp="return ValNumero(this);" required/>
                                </span>
                                </div>

                            <div id="raytel2" style="display:none; padding-left:100px" >
                                <p>
                                <!--<label for="cel11"  ><span style="float:left">
                                <input type="text" name="cel11" id="cel11" size="3px" maxlength="4" />
                                </span></label>-->
                                <span style="float:left" id="sprytextfield5">
                                    <label for="cel11"></label>
                                    <input type="text" name="cel11" id="cel11"  maxlength="4" style="margin-right:2px; width:50px" disabled="disabled" onkeyUp="return ValNumero(this);" required/>
                                    <span class="textfieldRequiredMsg"></span>
                                </span>

                                <label for="cel1"  >
                                    <span style="float:left"></span>
                                </label>
                                <span id="sprytextfield44">
                                    <label for="telefono11"></label>
                                    <input id="telefono11" name="telefono11" type="text" disabled="disabled" id="telefono11" onkeyUp="return ValNumero(this);"  maxlength="7" style="width:58px" required />
                                </span>
                                </p>
                            </div>
                        </div>
                            <div id="telefonoR" style="display:none">
                             <input size="11" name="Rtelefono" type="text" disabled="disabled" id="Rtelefono"  maxlength="11"  size="10px"/>   
                            </div>
                            </td>
                        </tr>

                        </div>

                    </td>
                </tr>


            </tbody>
        </table>

    </form>

And this is the script that make the validation

<script>
$(document).ready(function () {
     // initialize tooltipster on text input elements
    $('#form1 input[type="text"]').tooltipster({
        trigger: 'custom',
        onlyOne: false,
        position: 'right'
    });


    $("#form1").validate({
        errorPlacement: function (error, element) {
            var lastError = $(element).data('lastError'),
                newError = $(error).text();

            $(element).data('lastError', newError);

            if(newError !== '' && newError !== lastError){
                $(element).tooltipster('content', newError);
                $(element).tooltipster('show');
            }
        },
        success: function (label, element) {
            $(element).tooltipster('hide');
        },
        rules: {
            email2: {
                required: true,
                email: true
            },
            donante: {
                required: true,
                minlength: "2"
            },
            telf: "required",
            cel11: {
                required: true,
                minlength: "3"
            },
            telefono11: {
                required: true,
                minlength: "7"
            },
            telefono: {
                required: true,
                minlength: "7"
            },
            Rtelefono: {
                required: true,
                minlength: "11"
            }

        },
        messages: {
            email2:{
                required: "Campo Requerido.",
                email: "Introduzca un email valido."
            }, 
            donante: {
                required: "Campo Requerido.",
                minlength: "Debe tener min. 2 letras."

            },
            telf: "Campo Requerido.",
            cel11: {
                required: "Campo Requerido.",
                minlength: "Debe tener 3 digitos."
            },
            telefono11:{
                required: "Campo Requerido.",
                minlength: "Debe tener 7 digitos."
            },
            telefono: {
                required: "Campo Requerido.",
                minlength: "Debe tener 7 digitos."
            },
            Rtelefono: {
                required: "Campo Requerido.",
                minlength: "Debe tener 11 digitos."
            }

            }
});

});
</script>

Is weird because without using the Tooltipster plugin this validation works perfectly. I 've read the documentation of both plugins but i can′t find out the reason

Thanks in advance

Answer 1

You forgot to initialize Tooltipster on the type="radio" inputs. Notice the type="text" in the jQuery selector below...

$('#form1 input[type="text"]').tooltipster({...

You'll need to do something like this...

$('#form1 input[type="text"], #form1 input[type="radio"]').tooltipster({...

DEMO: http://jsfiddle.net/9qM6P/

Or if you'd like different positioning options for the radio buttons, attach it separately...

$('#form1 input[type="radio"]').tooltipster({  // attach to radio groups
    trigger: 'custom',
    onlyOne: false,
    position: 'top',  // position for radio button groups
    offsetX: 0,  // tweak horizontal position for radio button groups
    offsetY: 0   // tweak vertical position for radio button groups
});

DEMO: http://jsfiddle.net/9qM6P/1/

You can also use the offsetX, offsetY and position options to tweak the placement further. See options.