如何隐藏我的提交按钮，直到我的表单被验证

How do i hide my submit button until my Form is validated

本文关键字：我的 表单 验证 按钮 提交 何隐藏 隐藏      更新时间：2023-09-26

我目前正在做一个学校项目，再一次，我有另一个问题要问！我想创建一个函数，阻止我的提交按钮工作，除非我的"主题"answers"问题"中的值被填充。

我想尝试做的是，如果我的"主题"answers"问题"字段为空，则使我的"提交"按钮变为display: none;。

我已尝试使用if (data != 0)或.strLength扩展。然而，我真的不确定它应该如何运作。

如有任何帮助，将不胜感激

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="TestingTrueQuestionStylesheet.css">
    <script>
      function submitAnswer(){
      var data = document.getElementById("Question").value;
      var topicName = document.getElementById("TopicName").value;

      localStorage.newdata = data;
      localStorage.topicName = topicName;

      }
    </script>
  </head>

  <body>
      <form>
        <fieldset>
              <input placeholder="Topic" id="TopicName" required type="text"></input>
              <br/>
              <textarea placeholder="Question" id="Question" required rows="30" cols="100"></textarea>
              <br/>
              <input type="submit" onclick="submitAnswer()" id="SubmitButton" required ></input>
        </fieldset>
      </form>
  </body>
</html>

您不应该隐藏而是禁用按钮。更好的解决方案是让用户提交表格，然后使用checkValidity功能检查表格的有效性

function submitAnswer(){
    var f = document.forms["myform"];//get hold of the form
    if(f.checkValidity()){
         // form is valid
    }
    else{
         //form is invalid
    }

此外，您还必须将表单命名为

 <form name="myform">

如果您想禁用该按钮，您必须在每个表单元素上添加onkeyup事件处理程序，并调用下面的函数

var f=document.forms['myform'];
var sbmtBtn=document.getElementById('SubmitButton');
function checkFormsValidity(){
        if(f.checkValidity()){
             sbmtBtn.disabled=false;
        }
        else{
             sbmtBtn.disabled=true;
        }
}

你的html看起来像

<form name='myform'>
..
<input onkeyup='checkFormsValidity()'..
<textarea onkeyup='checkFormsValidity()'..

禁用按钮演示

相关文章：