2

i am trying to perfom form validation before submit to server. I am using jquery.validate plugin (JQuery validation plugin page) The problem i am facing is that does not matter what i type in the form fields, validation always succeded, i double checked everything against documentation and samples over the wire and cannot see why i am getting this behaviour. This form is loaded via jquery ajax: 

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

Here i show you mypage.php code

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

Thanks

4

1 回答 1

6

I am pretty sure that the validation library requires name attributes and doesn't pay attention to id attributes. You should either change your id attr's to name, or just add name attributes with the same values...like :

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

Here is a fiddle to show that it works http://jsfiddle.net/7WTvL/1/

Along with the names, you will likely need to load your validate.js library in the head of the page you are loading the form into, and then run validate in .done() on your ajax request.

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

Again...make SURE the validate library is loaded on the page you're ajax'ing content into...it needs to be on the page before your ajax'd content arrives.

于 2013-10-13T02:26:37.773 回答