验证登录表单; Jquery

尝试使用Jquery验证我的登录表单，当错误评估为true时，错误应该向下滑动，呈现相应的文本，但不会。我已经设法在所有其他形式上进行此项工作，但由于某种原因，它不喜欢此登录表单。验证登录表单; Jquery

CSS代码

.error{ 
color: red; 
padding: 2px; 
text-align: left; 
margin-left: 100px; 
margin-top: 50px; 
display: none; 
height: 70px; 
width: 400px; 
float: left; 
}

登录形式

<form id="login_form" method="post" action="login.php"> 
    <fieldset><legend>Login</legend> 
    <label for="email">Email</label> 
    <input type="text" name="email" id="email" /> 

    <br/> 

    <label for="password">Password</label> 
    <input type="password" name="password" id="password" /> 

    <br/> 
    <input type="submit" name="submit" value="login" /> 

    </fieldset> 
</form>

jQuery代码

$('#submit').click(function(){ 
    $('.error').slideDown("slow"); 
    }); 

//Log In Validation 
     $('#login_form').submit(function(e){ 

     // initialize error 
     var error = false; 

     $('.error').empty(); 

    if ($('#email').val() == "") { 
     $('.error').append("<li>Please enter your email address</li>"); 
     error = true; 
    } 

    if ($('#password').val() == "") { 
     $('.error').append("<li>Please enter a password<li>"); 
     error = true; 

    } 

    if (error) { 
     e.preventDefault(); 
    } 

});

来源

2013-12-09 user1829823

究竟是不是工作，因为我不能找到'.error'在你的HTML？ – Phil

您的调试控制台是否会抛出任何错误？ – David

Slidedown功能。对不起，应该解释。 – user1829823

提交按钮没有ID，以便用于选择不被发现

更改为：

<input type="submit" name="submit" value="login" id="submit"/>

来源

2013-12-09 20:06:19 charlietfl

学校男孩错误，按钮上没有ID。 – user1829823

您应该使用'on（）'以及'click（）'和'submit（）'已弃用 – Phil

Op也缺少'

'。 –

你的代码是不完整的，也许这就是为什么它不工作：

你缺少你.error元素，你的代码是不断地寻找，所以加<div class="error"></div>到您的文档。
将id="submit"添加到您的提交按钮。

但它似乎并不认为你就是那个熟悉的jQuery，或编码好，所以如果我是你，我会加入这一行：你的submit函数内部

$('.error').slideDown("slow");，而不是提交按钮上的click事件，因为实际上，它执行相同的操作，但没有点击，并捕获整个提交事件，而这正是您想要的。（在情况下，他们按enter键，而不是单击该按钮）

所以，你会删除这些线在你的js代码的顶部：

$('#submit').click(function(){ 
    $('.error').slideDown("slow"); 
});

，并添加了slideDown功能，当有实际上是一个错误像这里（代码）：

if (error) { 
    e.preventDefault(); 
    $('.error').slideDown("slow"); // ADD IT HERE INSTEAD 
}

这使得它，所以它不仅使.error元素可见，如果有一个错误，一旦收集了所有的错误。并捕获所有提交，而不是仅当有人点击按钮时，它也会监听是否按下表单中的回车，这也会触发提交。（并且你不需要按照我的答案顶部的步骤＃2）

来源

2013-12-09 20:08:18

验证登录表单; Jquery

回答

相关问题