验证登录表单；Jquery

Question

试图用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();
  }

}); 

Answer 1

提交按钮没有ID，因此找不到所使用的选择器。

改为：

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

Answer 2

您的代码是不完整的，也许这就是它不起作用的原因：

1. 您丢失了您的.error元素，您的代码一直在寻找这个元素，因此将<div class="error"></div>添加到您的文档中。
2. 将id="submit"添加到提交按钮中。

但是，似乎您对jQuery并不那么熟悉，也不太熟悉编码，所以如果我是您，我会添加以下一行：

$('.error').slideDown("slow");在您的submit函数中，而不是提交按钮上的click事件，因为实际上，它做同样的事情，但没有单击，并捕获整个提交事件，这正是您想要的。(如果他们按enter键，而不是单击按钮)

因此，您可以删除js代码顶部的这些行：

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

并在实际存在错误时将slideDown函数添加到其中，如下面(在代码中)：

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

这使得它只能在出现错误时才能查看.error元素，并且一旦它收集了所有的错误。并且捕捉所有提交，而不是仅仅当有人单击按钮时，它也会侦听表单中的enter，这也会触发提交。(你也不需要遵循我回答的第二步)