2

サーバーに送信する前にフォームの検証を実行しようとしています。jquery.validate プラグインを使用しています ( JQuery 検証プラグイン ページ)私はこの動作を得ています。このフォームは jquery ajax を介してロードされます。

$.ajax({
    url: "mypage.php",
    type: "POST",
    cache: false,
    success: function(cont){
        $("body").append(cont);
    }
});

ここに mypage.php コードを示します

<script src="js/jquery.validate.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {

    $("#frmParticipante").validate({
        rules: { 
            nombre: {  required: true  } ,
            email: { required: true, email: true },
            ci: { required: true}
        }
    });

    $("#frmParticipante").submit(function(e){
        e.preventDefault();  
        if($(this).valid()){
            loadpop("ganaste.php");
        }
    else
        loadpop("perdiste.php");    

    });
});


</script>

<div id="pop_terminaste" class="pop_mensaje ingresardatos animated fadeInDown">
    <div id="infopop">
        <div id="lady"> <img src="images/terminaste1.jpg" width="453" height="626" /> </div>
        <div id="dato">
            <p class="txt1">¡Terminaste la trivia!</p>
            <p class="txt2">Ahora solo te falta completar tus datos para conocer el resultado.</p>
            <p class="txt3">Si ha cargado anteriormente sus datos, ingresar solo su cédula.</p>
            <form action="" id="frmParticipante" class="form">
                <fieldset>
                    <label for="nombre"><img src="images/ico_nombre.png" alt="ico_nombre" /></label>
                    <input type="text" placeholder="Nombre y Apellido" id="nombre">
                </fieldset>
                <fieldset>
                    <label for="email"><img src="images/ico_email.png" alt="ico_email" /></label>
                    <input type="text" placeholder="Email" id="email">
                </fieldset>
                <fieldset>
                    <label for="ci"><img src="images/ico_ci.png" alt="ico_ci" /></label>
                    <input type="text" placeholder="C.I" id="ci">
                </fieldset>
                <p class="msg error">Favor verificar los datos ingresados.</p>                
                <input type="submit" value="VER RESULTADOS" />                    
            </form>
        </div>
    </div>
</div>

ありがとう

4

1 に答える 1

6

検証ライブラリには name 属性が必要であり、id 属性には注意を払っていないことは確かです。ID属性を名前に変更するか、名前属性を同じ値で追加する必要があります...のように:

<input type="text" placeholder="Nombre y Apellido" id="nombre" name="nombre">

これが動作することを示すためのフィドルですhttp://jsfiddle.net/7WTvL/1/

名前に加えて、フォームをロードするページのヘッドに validate.js ライブラリをロードし、ajax リクエストで validate in .done() を実行する必要があります。

<script>
$.ajax({
    url: "mypage.php",
    type: "POST",
    cache: false
}).done(function(cont) {
    $("body").append(cont);
    $("#frmParticipante").validate({
        rules: { 
            nombre: {  required: true  } ,
            email: { required: true, email: true },
            ci: { required: true}
        }
    });
});
$("#frmParticipante").submit(function(e){
    e.preventDefault();  
    if($(this).valid()){
        loadpop("ganaste.php");
    }
    else
        loadpop("perdiste.php");    
});
</script>

繰り返しになりますが、コンテンツを ajax しているページに検証ライブラリがロードされていることを確認してください。ajax されたコンテンツが到着する前に、ライブラリがページにロードされている必要があります。

于 2013-10-13T02:26:37.773 に答える