向用户显示消息答案

【问题标题】：Displaying a message to user向用户显示消息
【发布时间】：2018-07-04 18:46:03
【问题描述】：

带引导程序的代码：

function ValidateForm() {
  var fname = document.forms["form1"]["fname"].value;
  var requiredValue = "this value is required";

  if (fname == "") {
    document.getElementById("validation").innerHTML = requiredValue;;
    return false;
  }

}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form action="/action_page.php" onsubmit="return ValidateForm()" method="post">
  <fieldset>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <p id="validation"></p>
          <input type="text" id="fname" name="fname" placeholder="Enter First Name" data-type="alphanum" />

          <button type="submit" class="btn btn-info">Save</button>
        </div>
      </div>
    </div>
  </fieldset>
</form>

没有引导的代码：

function ValidateForm() {
  var fname = document.forms["form1"]["fname"].value;
  var requiredValue = "this value is required";

  if (fname == "") {
    document.getElementById("validation").innerHTML = requiredValue;
    return false;
  }

}

<form id="form1" action="" onsubmit="return ValidateForm()" method="post">
  <p id="validation"></p>
  <input type="text" id="fname" name="fname" placeholder="Enter First Name" />
  <button type="submit">Save</button>
</form>

为什么ValidateForm() 在没有引导代码的情况下无法工作？我只是在访问validation id，但它不起作用。但奇怪的是它可以与引导代码一起使用。我只是为应该显示this value is required 的用户制作一个脚本。现在对我来说为什么它不能与引导程序一起使用没有意义？

注意：在我的环境中，所有这些代码都可以工作。

【问题讨论】：

使用 HTML5 必需属性，https://www.w3schools.com/tags/att_input_required.asp
据我所见，在第一个 sn-p 中 document.forms["form1"] 未定义，因为 <form> 缺少属性：name="form1"。 IE。它与引导程序的关系绝对为零。
不，我不需要这个。
@ChrisG 是的，你是对的 tnx 人。
我会这样写：jsfiddle.net/khrismuc/6tadobvL

标签： javascript html twitter-bootstrap

【解决方案1】：

据我了解您的代码，它们位于单独的文件中。第一种形式的代码如下：

<form action="/action_page.php" onsubmit="return ValidateForm()" method="post">

第二个是这样的：

<form id="form1" action="" onsubmit="return ValidateForm()" method="post">

显然“action_page.php”不再被加载。你是从不同的文件加载脚本吗？该文件位于何处以及如何在页面上加载实际脚本？

以下代码按预期工作，当放入保存为 HTML 的单个文件时：

<!DOCTYPE html>
<html lang="en">
<body>

    <script>
function ValidateForm(){
   var fname = document.forms["form1"]["fname"].value;
   var requiredValue = "this value is required";

     if(fname == ""){
        document.getElementById("validation").innerHTML= requiredValue;
                 return false;
     }

    }
</script>

<form id="form1" action="" onsubmit="return ValidateForm()" method="post">
<p id="validation"></p>
<input type="text" id="fname" name="fname" placeholder="Enter First Name"/>
<button type="submit">Save</button>
</form>


</body>
</html>

【讨论】：

兄弟感谢您的努力，但我没有在引导代码中声明 id="form1"。