表单提交后如何在文本输入周围保持红色边框？ [复制]答案

【问题标题】：How to maintain a red border around a text input after form submission? [duplicate]表单提交后如何在文本输入周围保持红色边框？ [复制]
【发布时间】：2021-11-11 21:25:14
【问题描述】：

我有以下 HTML：

  <form id="contactInfo" name="contactInfo">
        <label>Name: </label>
        <input type="text" name="name"></input><br/><br/>
        <label>E-mail: </label>
        <input type="text" name="email"></input><br/><br/>
        <label>Message:</label><br/>
        <textarea rows="10" cols="80" name="message"></textarea><br/><br/>
        <input type="submit" name="sendMessage" onclick="messageChecker()"></input>
      </form>

还有以下 Javascript：

 function messageChecker(){
        let x = document.forms["contactInfo"]["name"].value;
        let y = document.forms["contactInfo"]["email"].value;
        let z = document.forms["contactInfo"]["message"].value;
        if (x=="" || y=="" || z==""){
          alert("Please fill out the indicated field(s).");
          if (x==""){
           document.forms["contactInfo"]["name"].style.border = "1px solid red";
          }
          if (y==""){
           document.forms["contactInfo"]["email"].style.border = "1px solid red";
          }
          if (z==""){
           document.forms["contactInfo"]["message"].style.border = "1px solid red";
          }
      
        }
      
      }

所以我希望在提交表单并且未填写字段时出现红色边框；它出现不到一秒钟，然后与输入的文本一起消失。我怎样才能让它留下来？

【问题讨论】：

听起来很正常。当您提交表单时，它将重新加载相同的页面，除非指定了不同的页面，您不会在此处执行此操作。您可以通过多种方式阻止提交表单，所有这些都已在其他问题中重复介绍过。另外，输入是自动关闭的，所以没有</input>。而且您应该使用点表示法而不是非常古老的传统表示法
你真的应该使用the HTML5 form/input element type validation for this。如果验证错误，表单将不会提交，并且您会收到自动的小内置消息来指导问题所在。

标签： javascript html

【解决方案1】：

因为您正在执行表单提交，如果您想要一种应用风格的行为，您不提交表单然后重新加载网页，那么您需要使用 AJAX 类型的数据提交。

How to use ajax link instead of submit button for form?

【讨论】：

【解决方案2】：

也许使用 e.preventDefault() 处理程序来解锁您的代码？

【讨论】：

【解决方案3】：

preventDefault() 方法用于阻止浏览器执行所选元素的默认操作。它可以阻止用户通过单击链接来处理请求。语法：

event.preventDefault()

【讨论】：