如何显示html div，以便在表单提交后自动显示错误消息答案

【问题标题】：How to display the html div so that after form submit the error messgae is displayed automatically如何显示html div，以便在表单提交后自动显示错误消息
【发布时间】：2023-03-27 15:22:01
【问题描述】：

我有一个表单可以验证用户名和密码是否正确，但除非我再次单击表单，否则它不会显示错误消息。表单位于 html div 标签内，我想知道如何设置样式带有css的div，以便表单提交后可以自动显示错误消息。这是我的代码

<h3 class="registration-header">
Log in. </h3>
<div class="registration-box-info"><span>
Please enter username and password  </span></div>
<form action="/" charset="UTF-8" method="post">
            <div class="error-message alert-danger">
        <span>Sorry, unrecognized username or password.<a href="#">Have you forgotten your password?</a></span>
    </div>

插入错误输入后错误消息不会自动显示，因此如果您能告诉我如何使用 css 设置 div 样式以使其在提交错误输入后可见，我将不胜感激

【问题讨论】：

你需要学习一点js来让你的验证显示出来——或者使用html 5错误属性
可以使用jquery验证jqueryvalidation.org
vist css-tricks.com/form-validation-ux-html-css 了解表单和验证的基础知识
验证工作正常，但错误消息不自动可见。错误消息只有在再次单击注册按钮后才能看到。我想知道我可以对 div 做些什么样式，以便 div 内的内容（错误消息）在表单提交后可见。
验证工作正常。我只想显示 div class="error-message alert-danger"> 抱歉，用户名或密码无法识别。有您忘记了密码？
提交错误的用户名和密码后自动

标签： html css

【解决方案1】：

如果你想不使用js，你可以使用

:valid 
:invalid

CSS 伪类并相应地设置输入边框的样式。

您还可以将模式附加到验证中。

检查：https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

【讨论】：

谢谢 Gregor。我已经验证过了，但是如果用户名和密码不正确，我想在提交表单后自动显示错误消息。

【解决方案2】：

要检查用户名和其他字段是否为空，您只需在标签内添加required，如<input type="text" name="full-name" id="full-name" placeholder="Name" required /> 验证访问https://www.w3schools.com/js/js_validation.asp

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #eee;
  font-family: 'helvetica neue', helvetica, arial, sans-serif;
  color: #222;
}

#form {
  max-width: 700px;
  padding: 2rem;
  box-sizing: border-box;
}

.form-field {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 1rem 0;
}
label, input {
  width: 70%;
  padding: 0.5rem;
  box-sizing: border-box;
  justify-content: space-between;
  font-size: 1.1rem;
}
label {
  text-align: right;
  width: 30%;
}
input {
  border: 2px solid #aaa;
  border-radius: 2px;
}
.error-message {
    flex: 0 0 100%;
    margin-left: 30%;
    color: red;
}

<form method="post" action="/" id="form" class="validate">
  <div class="form-field">
    <label for="full-name">Full Name</label>
    <input type="text" name="full-name" id="full-name" placeholder="Name" required />
  </div>
  <div class="form-field">
    <label for="email-input">Email</label>
    <input type="email" name="email-input" id="email-input" placeholder="test@gmail.com" required />
  </div>
  <div class="form-field">
    <label for="password-input">Password</label>
    <input type="password" name="password-input" id="password-input" required />
  </div>
  <div class="form-field">
    <label for=""></label>
    <input type="submit" value="Sign Up" />
  </div>
</form>

【讨论】：

非常感谢，但我想分享验证工作正常但错误消息不自动显示。错误消息只能在再次单击注册按钮后才能看到。我想知道我可以对 div 样式做些什么，以便在表单提交后可以看到 div 内的内容（错误消息）

【解决方案3】：

如果你可以使用 jquery，并且如果你想自定义你的错误类型，

例如，如果您输入“地图”、“派生”或“词汇表”，您会得到不同的信息。如果输入'???'或其他任何您的消息“抱歉，无法识别...”

你可以使用：

<!DOCTYPE html>
<html>
<head>
<style>
  #div1   {background-color: red;}
  #div2   {background-color: blue;}
  #div3   {background-color: black;
    color: white;}
  #error   {background-color: red;}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<h3 class="registration-header">
Log in. </h3>
<div class="registration-box-info"><span>
Please enter username and password  </span></div>
<!-- form action="/" charset="UTF-8" method="post" -->
<input type="text" placeholder="ENTER COMMAND" />

<div id="div1">div1 : you entered the log 'map'</div>
<div id="div2">div2 : you entered the log 'derive'</div>
<div id="div3">div1= : you entered the log 'glossary'</div>
<div id="error"><span>Sorry, unrecognized username or password.<a href="#">Have you forgotten your password?</a></span></div>
 

<script>
$(document).ready(function() {

  // Hide both <div> by default
  $('#div1').hide();
  $('#div2').hide();
  $('#div3').hide();
  $('#error').hide();

  // Check on keydown
  $('input').keyup(function (e) {
    if (e.keyCode == 13) {
      var value = $(this).val();
      $('#div1').hide();
      $('#div2').hide();
      $('#div3').hide();
      $('#error').hide();
      if (value == 'map') { // If input value is div1
        $('#div1').slideDown();
      } else if (value == 'derive') { // If input value is div2
        $('#div2').slideDown();
      } else if (value == 'glossary') { // If input value is div3
        $('#div3').slideDown();
      } else if (value != '') { // If input value is wrong
        //$('#error').html(value + " is an incorrect input value");
        $('#error').slideDown();
      }
    }
  });
});
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
  #div1   {background-color: red;}
  #div2   {background-color: blue;}
  #div3   {background-color: black;
    color: white;}
  #error   {background-color: red;}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<h3 class="registration-header">
Log in. </h3>
<div class="registration-box-info"><span>
Please enter username and password  </span></div>
<form  action="submit_form.php" method="post" id="form_1" charset="UTF-8" >
<input id="submit_form" type="text" placeholder="ENTER COMMAND" />
</form>

<div id="div1">div1 : you entered the log 'map'</div>
<div id="div2">div2 : you entered the log 'derive'</div>
<div id="div3">div1= : you entered the log 'glossary'</div>
<div id="error"><span>Sorry, unrecognized username or password.<a href="#">Have you forgotten your password?</a></span></div>
 

<script>
$(document).ready(function() {

  // Hide both <div> by default
  $('#div1').hide();
  $('#div2').hide();
  $('#div3').hide();
  $('#error').hide();

  // Check on keydown
  $('input').keyup(function (e) {
    if (e.keyCode == 13) {
      var value = $(this).val();
      $('#div1').hide();
      $('#div2').hide();
      $('#div3').hide();
      $('#error').hide();
      if (value == 'map') { // If input value is div1
        $('#div1').slideDown();
      } else if (value == 'derive') { // If input value is div2
        $('#div2').slideDown();
      } else if (value == 'glossary') { // If input value is div3
        $('#div3').slideDown();
      } else if (value != '') { // If input value is wrong
        //$('#error').html(value + " is an incorrect input value");
        $('#error').slideDown();
      }
    }
  });
});

$('#submit_form').addEventListener('click', function (event) {

// Prevents form from submitting
             event.preventDefault();

   $.ajax({
       type: "POST",
       url: "submit_form.php",
       dataType: "json",
       data: $('#form_1').serialize(),
       success: function (json) {
        $('.message_center').html('');

        if(json['success']) {

         $('.message_center')
          .html('<div class="row">'+
            '   <div class="col-md-12">'+
            '     <div class="alert alert-success alert-dismissible">'+
            '       <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+
            '       <h4><i class="icon fa fa-check"></i> Success!</h4>'+
            '       '+json['success']+''+
            '     </div>'+
            '   </div>'+
            ' </div> ');
       }

       if(json['error']) {

         var html='';
         $.each( json['error'], function( key, value ) {
          html += value+'<br>';
        });
        $('.message_center')
          .html('<div class="row">'+
            '   <div class="col-md-12">'+
            '     <div class="alert alert-warning alert-dismissible">'+
            '       <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+
            '       <h4><i class="icon fa fa-warning"></i> Error! There was a problem.</h4>'+
            '       '+html+''+
            '     </div>'+
            '   </div>'+
            ' </div> ');
       }

    }

   });
});

</script>

</body>
</html>

【讨论】：

谢谢alex。我做了验证。我只想知道如何通过使用css在html中设置div标签来自动显示错误消息。
您可以在正文之前添加样式标签，您可以在其中设置 div 标签的样式。我修改了代码给你一个例子。如果我帮助了你，感谢投票或验证以通知其他人:)
非常感谢 alex..它几乎解决了我的问题..但是这里的 div 是在文件中声明的，我想知道我可以为要检查的用户名和密码做什么数据库。我的意思是如何为错误的用户名和密码提供错误消息。如果您能给我一些指导，我将不胜感激
如果您想在验证失败时留在同一页面上，这就是您想要的：link，但如果没有您的数据库（posgres、mysql、表、列，您如何访问它...）。我添加了另一个使用 ajax 和 php 的 sn-p 女巫，但我无法让它在页面上返回，因为它不是我的服务器。您必须尝试使用您自己的页面名称：something.php 并为您的服务器填充 ajax 部分。我的回答没有投票权，别忘了投票或验证。
再次感谢亚历克斯...我会尝试在我的页面中运行它，希望它会起作用..谢谢