Question

大家好我正在使用jquery验证登录表单，检查用户ID和密码是否有效。

这是我到目前为止所尝试的：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<script language="javascript">  
    $(document).ready(function(){  

    $("#loginForm").validate({
        rules: {
         username: "required",
         password: {
           required: true
         }
        },
        messages: {
         username: "This field is required",
         password: {
           required: "This field is required"
         }
        }
    });

    $("#loginForm").submit(function(){  

    $("#report").removeClass().addClass('loader').html('<img src="img/login/spinner.gif">').fadeIn(1000);  
    $.post("checklogin.php",{ username:$('#username').val(),password:$('#password').val()},function(data){  
        if(data=='yes'){  
        $("#report").fadeTo(200,1,function(){       
        $(this).html('<img src="img/login/spinner.gif">').addClass('log').fadeTo(900,1,function(){          
                document.location='processed.php';  
             });       
         });  
        }
        else {  
        $("#report").fadeTo(200,1,function(){        
        $(this).html('<img src="img/login/icon_error.gif"> Username or password error.').addClass('error').fadeTo(900,1);  
            });    
        }  
        });  
        return false;   
    });  
    $("#password").blur(function(){  
    $("#login_form").trigger('submit');  
        });  
    }); 

</script>

我想要发生的是，如果字段具有空值，则应该验证并显示字段是必需的。但我的表单显示错误消息，并检查字段是否有值。为什么会这样？有什么想法来解决这个问题吗？感谢。

更新： index.html

  <form class="form-signin" action="checklogin.php" method="post" id="loginForm">
    <img alt="" src="img/irasa_logoa.png" title="IRASA"> 
    <h2 class="form-signin-heading">Log In</h2>
    <input type="text" class="input-block-level" placeholder="User ID" name="username" id="username" class="required">
    <input type="password" class="input-block-level" placeholder="Password" name="password" id="password" class="required">
    <button class="btn btn-large btn-custom" type="submit">Log in</button>
    <div id="report"></div>
  </form>

</div> <!-- /container -->

Answer 1

试试这个

$("#loginForm").validate({
        rules: {
         username: "required",
         password: "required"

        },
        messages: {
         username: "This field is required",
         password: "This field is required"
        },
            submitHandler: function(form) {

             $("#report").removeClass().addClass('loader').html('<img src="img/login/spinner.gif">').fadeIn(1000);  
            $.post("checklogin.php",{ username:$('#username').val(),password:$('#password').val()},function(data){  
                if(data=='yes'){  
                    $("#report").fadeTo(200,1,function(){       
                        $(this).html('<img src="img/login/spinner.gif">').addClass('log').fadeTo(900,1,function(){          
                            document.location='processed.php';  
                        });       
                    });  
                } else {  
                    $("#report").fadeTo(200,1,function(){        
                        $(this).html('<img src="img/login/icon_error.gif"> Username or password error.').addClass('error').fadeTo(900,1);  
                    });    
                }  
            });  
            return false;   
        })

 }); 
 $("#password").blur(function(){  
     $("#login_form").trigger('submit');   
 });

      }
    });

Answer 2

如果您正在使用jQuery validate，那么您也不应该自己绑定到表单的submit事件。将该代码放在submitHandler中。见http://jqueryvalidation.org/validate#submithandler

修改以添加示例。
请注意，我没有检查过你的函数（你有一个提交事件）是正确的 - 只是复制它。我已经删除了规则，因为@Sambhav Sharma说，你应该简单地添加一个＆＃34; required＆＃34;类到字段，它是自动要求的）。我还假设应该始终触发模糊提交，而不是在提交验证后。我还没有测试过这个：）

 $(document).ready(function(){  

     $("#loginForm").validate({
            messages: {
             username: "This field is required",
             password: {
               required: "This field is required"
             }
            },
            submitHandler: function(){  
                $("#report").removeClass().addClass('loader').html('<img src="img/login/spinner.gif">').fadeIn(1000);  
                $.post("checklogin.php",{ username:$('#username').val(),password:$('#password').val()},function(data){  
                    if(data=='yes'){  
                        $("#report").fadeTo(200,1,function(){       
                            $(this).html('<img src="img/login/spinner.gif">').addClass('log').fadeTo(900,1,function(){          
                                document.location='processed.php';  
                            });       
                        });  
                    } else {  
                        $("#report").fadeTo(200,1,function(){        
                            $(this).html('<img src="img/login/icon_error.gif"> Username or password error.').addClass('error').fadeTo(900,1);  
                        });    
                    }  
                });  
                return false;   
            })

     }); 
     $("#password").blur(function(){  
         $("#login_form").trigger('submit');   
     }); 
 });

Answer 3

我认为这就像在输入类型中添加“required”类一样简单。只需添加class =“required”。这将在您使用jquery.validate.min.js时起作用。

参考：http://help.campaignmonitor.com/topic.aspx?t=194

登录表单上的Jquery验证

3 个答案: