0

この投稿にある例に基づいて、Jquery Validation PluginTooltipster Pluginを使用しています。

両方のプラグインは、入力タイプを検証する必要がありますが、送信ボタンをクリックしてラジオ ボタンのペアを検証しようとすると、ラジオ ボタンが選択されていないにもかかわらず、フォームが送信されます。

これは私が検証しようとしているフォームです

    <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 プラグインを使用しないと、この検証は完全に機能するため、奇妙です。両方のプラグインのドキュメントを読みましたが、理由がわかりません

前もって感謝します

4

1 に答える 1