带有提交按钮功能的javascript调试问题答案

【问题标题】：debugging issue in javascript with submit button function带有提交按钮功能的javascript调试问题
【发布时间】：2014-12-02 13:01:21
【问题描述】：

这段代码似乎在做我想做的事，直到用户单击提交的部分和 validateInput() 函数应该提交表单或发送错误警报消息。我无法弄清楚代码有什么问题。

谁能帮忙？

这是实际代码的链接—— http://ciswebs.smc.edu/cis55/naruse_kevin_k/week2/default.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>Week 2 cis 55</title>
    <script type="text/javascript">

        function validateText(inputField, helpText)
        {
            if (inputField.value.length == 0) 
            {
                if (helpText != null) 
                {
                    helpText.innerHTML = "please enter a value";
                }
                return false;
            }
            else 
            {
                if (helpText != null) 
                {
                    helpText.innerHTML = /*inputField.value.length + */"";
                }
                return true;
            }
        }

        function validate_zip_code(inputField, helpText)
        {
            var isnumber = true; var is5chars = true;
            if (isNaN(inputField.value))
            {
                //alert("not a number");
                if (helpText != null) 
                {
                    helpText.innerHTML = /*inputField.value.length +*/ "please enter a numeric value";  
                }
                return false;
            }
            else if (inputField.value.length != 5)  
            {
                //alert("not 5 digits")
                if (helpText != null) 
                {                   
                    helpText.innerHTML = /*inputField.value.length +*/ "please enter a valid zip code with 5 digits";   
                }
                return false;   
            }
            else
            {
                if (helpText != null) 
                {
                    helpText.innerHTML = "";
                }
            //alert("passed the test");
                return true;
            }
        }
        function submit_validate(form)
        {   //alert("check everything except zip");
            if ( validateText( form["first_name"], form["first_name_help"] ) &&
                 validateText( form["last_name"], form["last_name_help"] ) &&   
                 validateText( form["street"], form["street_help"] ) &&
                 validateText( form["city"], form["city_help"] ) &&     
                 validateText( form["state"], form["state_help"] ) &&
                 validate_zip_code( form["zip"], form["zip_help"] )
            )
            {
                alert( "so far - validated everyting else next check zip code");
                // on this next if/then
                alert("yay - ready to submit now"); 
                form.submit();  


            }
            else     
            {   alert("we didn't even get to zip, smething else is wrong");
                alert("one or more fields were incorect. please correct before submitting");    
                return false;       
            }           
        }
        function submit_validate1(form)
        {   //alert("check everything except zip");
            if ( validateText( form["first_name"], form["first_name_help"] ) &&
                 validateText( form["last_name"], form["last_name_help"] ) &&   
                 validateText( form["street"], form["street_help"] ) &&
                 validateText( form["city"], form["city_help"] ) &&     
                 validateText( form["state"], form["state_help"] ) 
            )
            {
                //alert( "so far - validated everyting else next check zip code");
                // on this next if/then
                if ( validate_zip_code( form["zip"], form["zip_help"] ) )
                {   
                    form.submit();  
                    alert("yay - ready to submit now");     
                }
                else
                {
                    alert("your zip isn't valid - please correct the info and resubmit");
                }
            }
            else     
            {   alert("we didn't even get to zip, smething else is wrong");
                alert("one or more fields were incorect. please correct before submitting");            
            }           
        }

    </script>
</head>

<body
<form action="" method="post" name="address_form">
    <fieldset>
        <p>
          <label>First Name:</label>
          <input name="first_name" id="first_name" type="text" 
                onblur="validateText( this, document.getElementById('first_name_help') );" />
          <span id="first_name_help" class="help"></span>
        </p>
        <p>
          <label>Last Name:</label>
          <input name="last_name" id="last_name" type="text" 
                 onblur="validateText( this, document.getElementById( 'last_name_help' ) );">
          <span id="last_name_help" class="help"></span>

      </p>
      <p> 
          <label>Street</label>
          <input name="street" id="street" type="text" 
                onblur="validateText( this, document.getElementById( 'street_help' ) );">
          <span id="street_help" class="help"></span>
      </p>
      <p>  
          <label>City</label>
          <input name="city" id="city" type="text" 
                onblur="validateText(this, document.getElementById( 'city_help' ));">   
          <span id="city_help" class="help"></span>
      </p>
      <p>  
          <label>State</label>
          <input name="state" id="state" type="text"
                 onblur="validateText(this, document.getElementById( 'state_help' ) );">
          <span id="state_help" class="help"></span>
      </p>
      <p>
          <label>Zip</label>
          <input name="zip" type="text" 
                onblur="validate_zip_code( this, document.getElementById( 'zip_help' ) );"> 
          <span id="zip_help" class="help"></span>
      </p>
      <p>
          <input name="submit" type="submit" id="submit" value="submit" 
                onclick="return submit_validate( this.form );">
      </p>
    </fieldset>
</form>
</body>
</html>

【问题讨论】：

您是否尝试过使用浏览器的开发者工具对其进行调试。
将点击监听器从提交按钮移动到表单的onsubmit 处理程序，可以在不点击提交按钮的情况下提交表单。从提交按钮中删除名称和 ID（名称或 ID 为“提交”的表单控件会掩盖表单的提交方法，因此您无法调用它）。

标签： javascript forms validation button submit

【解决方案1】：

以下是我编写验证函数的方式。您已经将错误消息元素与相关的表单控件名称巧妙地联系起来，因此请利用它来发挥您的优势：

    function validateText(node) {
      var msgEl = document.getElementById(node.name + '_help');

      if (node.value.length == 0) {
        msgEl.innerHTML = "please enter a value";
        return false;
      }
      msgEl.innerHTML = '';
      return true;
    }

    function validate_zip_code(node) {
      var msgEl = document.getElementById(node.name + '_help');
      var value = node.value;

      if (!/^\d{5}$/.test(node.value)) {
        msgEl.innerHTML = 'ZIP code must be 5 digits';
        return false
      }
      msgEl.innerHTML = '';
      return true;
    }

现在可以使用控件名称列表调用这些函数，因此您不必为每个控件单独调用它们，例如

validateText('first-name', 'last_name', 'street',...)

我会把这个改变留给你。 :-)

以下对submit_validate函数的重写很少，还是需要整理一下：

    function submit_validate(form) {

      if (validateText(form["first_name"]) &&
          validateText(form["last_name"]) &&
          validateText(form["street"]) &&
          validateText(form["city"]) &&
          validateText(form["state"]) &&
          validate_zip_code(form["zip"])
        )
      {
        alert( "so far - validated everyting else next check zip code");
        // on this next if/then
        alert("yay - ready to submit now");
        return true;

      } else {
        alert("one or more fields were incorect. please correct before submitting");
        return false;
      }
    }

提交侦听器应该在表单上，以便在提交表单时调用它，因为无需单击提交按钮即可提交表单。

此外，具有名称或 ID 为“submit”的表单控件会掩盖表单的提交方法，因此您无法调用它。提交按钮不需要名称或 ID（甚至不需要值，尽管您可能想给它一个），所以只需删除它们：

<form ... onsubmit="return submit_validate(this);">

  ...

  <p>
      <input type="submit">
  </p>
</form>

【讨论】：