帶有提交按鈕功能的javascript中的調試問題

Question

這段代碼似乎正在執行我想要的操作，直到用戶單擊提交的部分和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>

Answer 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',...)

我將零錢留給您。 :-)

以下代碼具有最少的對commit_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方法，因此您無法調用它。 提交按鈕不需要名稱或ID（甚至不需要值，盡管您可能想給它一個），所以只需刪除它們即可：

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

  ...

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

帶有提交按鈕功能的javascript中的調試問題

問題描述

1 個解決方案

解決方案1
0 2014-10-08 00:59:08

帶有提交按鈕功能的javascript中的調試問題

問題描述

1 個解決方案

解決方案1 0 2014-10-08 00:59:08

解決方案1
0 2014-10-08 00:59:08