大家好我正在使用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 -->
答案 0 :(得分: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');
});
}
});
答案 1 :(得分:0)
如果您正在使用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');
});
});
答案 2 :(得分:0)
我认为这就像在输入类型中添加“required”类一样简单。只需添加class =“required”。 这将在您使用jquery.validate.min.js时起作用。