jQuery validation: form always valid issue

Question

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

There is an error in your first jQuery code sample "mypage.php is missing the closing ". — Sébastien
– Sébastien, Commented Oct 13, 2013 at 2:08
You need to return false; inside $("#frmParticipante").submit to prevent the form from submitting. — Khanh TO
– Khanh TO, Commented Oct 13, 2013 at 2:10
Sébastien you are right about "mypage.php", this was a mistake while typing in here KhanhTO, I had tested using e.preventDefault() with the same result, putting that line there does not changes the result, the form is passing validation anyway Thanks — E-Bat
– E-Bat, Commented Oct 13, 2013 at 2:26

kevindeleon · Accepted Answer · 2013-10-13 03:23:31Z

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.

edited Oct 13, 2013 at 3:23

answered Oct 13, 2013 at 2:26

kevindeleon

1,9243 gold badges18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

E-Bat Over a year ago

kevindeleon, tryied your suggestion and did not worked, same result. Thanks

kevindeleon Over a year ago

Can you put up a fiddle or give an example URL so that we can try to help you out, Cheers.

kevindeleon Over a year ago

I put a fiddle up, and it works fine for me if you add names like I said. jsfiddle.net/7WTvL/1

kevindeleon Over a year ago

The only other thing I can think is that it is a timing issue with your document.ready and when you are pulling in your form from ajax...the form may not exist on the page when the validation library does it's initializing.

E-Bat Over a year ago

hey kevin, i just tested jsfiddle.net/ElioB/ZjjQd/2 and noticed the same, if the problem is timing issue i thing that i have to get rid of the plugin and validate manually. Have you any other sugestion? Thanks very much

|

Collectives™ on Stack Overflow

jQuery validation: form always valid issue

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related