Question

我正在使用此Jquery Validation Plugin中的示例中的Tooltipster Plugin和post。

两个插件一起工作正常，必须验证输入类型，但是当我尝试验证一对单选按钮时单击提交按钮时，无论是否选择了单选按钮，都会提交表单，尽管这些是明确要求的。 / p>

这是我正在尝试验证的表单

    <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>

这是进行验证的脚本

<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>

很奇怪，因为没有使用Tooltipster插件，这个验证工作得很好。我已经阅读了两个插件的文档，但我找不到原因

提前致谢

Answer 1

您忘记在type="radio"输入上初始化Tooltipster。请注意下面jQuery选择器中的type="text" ...

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

你需要做这样的事情......

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

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

或者如果您想要radio按钮的不同定位选项，请单独附加...

$('#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/

您还可以使用offsetX，offsetY和position选项进一步调整展示位置。请参阅options。

使用Jquery Validate + Tooltipster验证单选按钮的问题

1 个答案: