Question

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

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

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

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

但是你似乎并不熟悉jQuery或编码，所以如果我是你，我会添加这一行：

$('.error').slideDown("slow");

submit，而不是提交按钮上的click事件，因为实际上它会做同样的事情，但没有点击，并且捕获整个提交事件，这是你想要的。（如果他们按回车键，而不是点击按钮）

所以你要删除js代码顶部的这些行：

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

并在实际出现错误时添加slideDown函数，例如此处（在您的代码中）：

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

这使得只有在出现错误时才会查看.error元素，并且一旦它收集了所有错误。并且捕获所有提交，而不仅仅是当有人点击按钮时，如果他们按下表单中的输入，它也会监听，这也会触发提交。（你不需要在我的答案的顶部跟随第2步）

验证登录表单; jQuery的

2 个答案: