javascript - jQuery 验证 : form always valid issue

Question

我正在尝试在提交到服务器之前执行表单验证。我正在使用 jquery.validate 插件( JQuery validation plugin page )我面临的问题是，无论我在表单字段中键入什么，验证总是成功，我通过网络根据文档和示例仔细检查了所有内容，但看不出为什么我会出现这种行为。这个表单是通过 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>

谢谢

Answer 1

我很确定验证库需要 name 属性并且不会注意 id 属性。您应该将您的 id attr 更改为名称，或者只添加具有相同值的名称属性......例如:

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

这是一个表明它有效的 fiddle http://jsfiddle.net/7WTvL/1/

除了名称之外，您可能还需要在要加载表单的页面头部加载 validate.js 库，然后在 ajax 请求中运行 .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 内容到达之前位于页面上。