使用JavaScript和html進行表單驗證

我想驗證我的表單。我的代碼中有一個表單驗證的javascript代碼，點擊查看器，但它不工作，仍然沒有任何驗證地將值發送到下一頁。您能告訴我我在哪裏我犯了錯誤，爲什麼會發生這種情況？使用JavaScript和html進行表單驗證

代碼：

<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>

來源

2012-12-19 Bilal Khalid

你得到的是警報？ – arjuncc

保持結構清潔非常重要！然後像缺失的括號不會發生錯別字經常再次發生錯別字。 –

如果您使用的是mozilla，請在出現錯誤後按（ctrl + shift + j）。這將有助於您進行調試。 – Shurmajee

你缺少結束括號。在驗證碼中的任何錯誤都會返回一個非假值和允許提交

下面是一個使用形式訪問一個規範的方法：

<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>

來源

2012-12-19 09:34:43 mplungjan

嘗試插入此處調試器，並嘗試去投方法

<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; 
    }

來源

2012-12-19 09:30:41 Alexandr

看起來好像你在函數的結尾缺少了大括號「}」。

<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>

來源

2012-12-19 09:32:15 naota

在你的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>

來源

2012-12-19 09:32:30 somasundaram

在您發佈的代碼，你缺少一個爲你的validateForm（）函數關閉大括號，因此假設這是你的實際代碼，發生了什麼是你在提交時出現JavaScript錯誤，這會導致眉毛呃只是發佈表單。

來源

2012-12-19 09:32:46 tom

嘗試只是這一行

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

，而不是

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

和

postcode==undefined

，而不是

postcode==null

和function validateForm() {你缺少收盤}

來源

2012-12-19 09:32:56 Rab

@ RabNawaz.Thanks這一個爲我工作。乾杯 –

1）使用窗體訪問或getElementById同樣的事情和2）如果該字段有一個名爲值的屬性postcode值不能爲空 – mplungjan

請添加結束括號爲功能

<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>

來源

2012-12-19 09:33:15

使用JavaScript和html進行表單驗證

回答

相關問題