Question

我的登录页面加载时，我的淡入效果非常有效。

我正在使用表单从连接到数据库的用户收集用户名和密码。我还有一个PHP错误，显示用户名和密码不正确或没有插入数据。

我的问题是，当我点击提交而不输入任何内容时，我的页面会再次淡入，然后显示错误。

如何在错误消息显示时停止页面淡入？

当用户第一次进入网站时，我只是希望页面淡入。

CSS：

  body{
 animation: fadein 1.5s;}

   @keyframes fadein {
   from { opacity: 0; }
  to   { opacity: 1; }
  }

PHP显示错误：

  <p><?php echo $error; ?></p>

Answer 1

最简单的解决方案是要求对表单进行客户端验证。这将阻止每次按下提交按钮并且表单不完整或令人满意时页面重新加载。

添加＆＃39; required＆＃39;属性到您的输入（至少）或添加一些JS验证。

例如：

  <input type="text" id="username" required>
  <input type="password" id="password" required">
  <button type="submit">Submit</button>

大多数浏览器都支持此功能。 https://caniuse.com/#feat=form-validation

使用javascript验证补充此功能也是最佳做法。您可以在MDN上找到更多相关信息。 https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

编辑：回答你的评论：

正如您所看到的，客户端验证将检查的唯一事情是（a）完成，和/或（b）模式条件（如正则表达式或HTML5条件[输入类型=＆＃ 34;电子邮件＆＃34;，输入类型=＆＃34;数字＆＃34;等等]。

验证数据库中现有用户的用户名和密码将归属于PHP验证（或其他服务器端处理程序）。如果不使用AJAX，则无法在不重新加载页面的情况下检查正确的用户名/密码。假设您想跳过学习AJAX，可以尝试以下方法：

If (username) and (password) == (username) and (password)
{redirect to ('success.html')}
else {redirect to ('fail.html')}
NOTE: THIS IS AN OUTLINE OF CONCEPT -- NOT THE ACTUAL CODE

On＆＃39; fail.html＆＃39;不包括淡入。这意味着用户将转到登录页面（将淡入）并从那里转到成功页面或失败页面，这两个页面都不包括淡入的代码。

Answer 2

除了错误之外，您还可以回显样式，这会覆盖动画。例如：

  <script>
     var sBlock = $('[data-block-json*="9dac9e62587eab820575"]'),
         items = sBlock.find('.summary-item');  
     $.each(items, function() { 
       var $this = $(this),
           itemLink = $this.find('.summary-title a').attr('href');
       $this.find('.summary-read-more-link').attr('href', itemLink);
       $this.find('.summary-metadata-item a').attr('href', itemLink);
       $(this).attr('target', '_blank');
     });
  </script>

仅在错误在css之前回显时才使用！important 。

单击提交按钮时禁用CSS3淡入

2 个答案: