使用 JavaScript 和 html 进行表单验证答案

【问题标题】：Form Validation using JavaScript and html使用 JavaScript 和 html 进行表单验证
【发布时间】：2012-12-19 09:27:20
【问题描述】：

我想验证我的表单。我的代码点火器视图中有一个表单验证 javascript 代码，但它不工作，并且仍然在没有任何验证的情况下将值发送到下一页。你能告诉我我在哪里犯错以及为什么这样正在发生吗？

代码：

<form method="get" action="/calculator/stage_two" name="calculate" id="calculate" onsubmit="return validateForm();">
    <div class="calc_instruction">
        <input type="text" name="property_number" placeholder="No/Name" id = "property_number" class="stage_one_box" />
        <input type="text"  name="postcode" placeholder="Postcode" id = "postcode" class="stage_one_box" />
    </div>
    <input type = "image" name = "submit_calculator" id = "submit_calculator" value="Go" src = "/images/next_button.png" />
</form>

Javascript 函数：

<script type="text/javascript">
    function validateForm() {
        var postcode=document.forms["calculate"]["postcode"].value;
        if (postcode==null || postcode=="") {
            alert("Please enter the postcode to give you more accurate results");
            document.forms["calculate"]["postcode"].focus();
            return false;
        }
</script>

【问题讨论】：

你收到警报了吗？
保持结构清洁非常重要！那么像缺少括号这样的错字就不会再经常发生了..
如果你使用的是mozilla，出现错误后按(ctrl+shift+j)。这将帮助您进行调试。
干杯，伙计们。已排序。我缺少括号并且没有使用 getElementById。谢谢。

标签： php javascript html codeigniter

【解决方案1】：

您缺少一个结束括号。验证码中的任何错误都会返回一个非假值并允许提交

这是使用表单访问的规范方式：

<form method="get" action="/calculator/stage_two" name="calculate" 
  id="calculate"  onsubmit="return validateForm(this);">
  <div class="calc_instruction">
    <input type="text" name="property_number" placeholder="No/Name" id = "property_number" class="stage_one_box" />
    <input type="text"  name="postcode" placeholder="Postcode" 
      id = "postcode" class="stage_one_box" />
  </div>

    <input type = "image" name = "submit_calculator" id="submit_calculator" src="/images/next_button.png" />
</form>


<script type="text/javascript">
function validateForm(theForm) {
  var postcode=theForm.postcode;

  if (postcode.value=="")  { // cannot be null or undefined if value="" on field
    alert("Please enter the postcode to give you more accurate results");
    postcode.focus();
    return false;
  }
  return true; // allow submit
}
</script>

【讨论】：

【解决方案2】：

您似乎缺少函数末尾的右大括号“}”。

<script type="text/javascript">
function validateForm() {

    var postcode=document.forms["calculate"]["postcode"].value;
    if (postcode==null || postcode=="")
    {
        alert("Please enter the postcode to give you more accurate results");
        document.forms["calculate"]["postcode"].focus();
         return false;
    }
} // <-- here 
</script>

【讨论】：

【解决方案3】：

请为函数添加大括号

<script type="text/javascript">
function validateForm()
 {
  var postcode=document.forms["calculate"]["postcode"].value;
  if (postcode==null || postcode=="")
  {
   alert("Please enter the postcode to give you more accurate results");
   document.forms["calculate"]["postcode"].focus();
    return false;
  }
 }
 </script>

【讨论】：

【解决方案4】：

在您的 javascript 函数中缺少右括号

请用这个

在您的 javascript 右大括号中丢失了

<script type="text/javascript">
 function validateForm()
 {

   var postcode=document.forms["calculate"]["postcode"].value;
   if (postcode==null || postcode=="")
    {
    alert("Please enter the postcode to give you more accurate results");
    document.forms["calculate"]["postcode"].focus();
     return false;
    }
}
   </script>

【讨论】：

【解决方案5】：

试试这一行

var postcode=document.getElementById("postcode").value;

而不是

var postcode=document.forms["calculate"]["postcode"].value;

和

postcode==undefined

而不是

postcode==null

对于function validateForm() {，你错过了结束}

【讨论】：

1) 相同的事情使用表单访问或 getElementById 和 2) 如果字段具有名为 value 的属性，则邮政编码值不能为 null

【解决方案6】：

尝试在此处插入调试器并尝试 go throw 方法

<script type="text/javascript">
 function validateForm() {
     debugger;
     var postcode=document.forms["calculate"]["postcode"].value;
     if (postcode==null || postcode=="")
     {
       alert("Please enter the postcode to give you more accurate results");
       document.forms["calculate"]["postcode"].focus();
       return false;
     }

【讨论】：

【解决方案7】：

在您发布的代码中，您的 validateForm() 函数缺少右括号，因此假设这是您的实际代码，发生的情况是您在提交时收到 JavaScript 错误，这导致浏览器仅发布表单.

【讨论】：