使用提交按钮功能调试javascript中的问题

debugging issue in javascript with submit button function

本文关键字：javascript 问题 调试 功能 提交 按钮      更新时间：2023-09-26

这段代码似乎在做我想做的事情，直到用户单击提交和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>

以下是我如何编写验证函数。您已经将错误消息元素与相关的表单控件名称巧妙地链接在一起，因此可以利用它：

    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"的表单控件会屏蔽表单的submit方法，因此您无法调用它。submit按钮既不需要名称或ID（甚至不需要值，尽管您可能想给它一个值），所以只需删除它们：

<form ... onsubmit="return submit_validate(this);">
  ...
  <p>
      <input type="submit">
  </p>
</form>
相关文章：