在不提交的情況下驗證表單

Question

我有以下代碼檢查兩個選擇字段是否相同。使用onsubmit調用代碼時可以正常工作。但是在完成這個驗證之後，表單仍然被提交。如何防止腳本或我的表單提交不正確的數據。下面

請參閱代碼：

var fieldalias="Email address field" 

function verify(element1, element2) { 
    var passed=false 
    if (element1.value=='') { 
     alert("Please fill out the "+fieldalias+"!") 
     element1.focus() 
    } 
    else if (element2.value=='') { 
     alert("Please verify the "+fieldalias+"!") 
     element2.focus() 
    } 
    else if (element1.value!=element2.value) { 
     alert("The two "+fieldalias+"s do not match") 
     element1.select() 
    } 
    else 
     passed=true 

    return passed 

} 

Answer 1

調用代碼不同的事件，如即：平變化，或onfocusout在。這樣，驗證將在用戶每次輸入一些值到您的字段時執行，當然在提交之前。

編輯：

我不知道如果我理解正確，但我會附上您的JS代碼是這樣的：

首先分配你的選擇框的變量：

var object_input = document.getElementById("selectId"); 

然後：

if(object_input.addEventListener) 
{ 
    object_input.addEventListener('blur', focus_lost); 
    object_input.addEventListener('keypress', checkForEnter); 
} 
else 
{ 
    object_input.attachEvent('onblur', focus_lost); 
    object_input.attachEvent('onkeypress', checkForEnter); 
} 

然後執行您的驗證ith focus_lost或chec kForEnter。

Answer 2

您沒有包含您的HTML，所以我會假設您已將onsubmit（）添加到您的表單元素。

如果是這樣，請確保您的通話是這樣的：

onsubmit="return verify(element1, element2)" 

（更換部件1和element2的相應）

如果這個假設是不正確的，請包括一些額外的細節，以便我們能夠更好地幫助。

Answer 3

假設在HTML代碼中，你有這樣的事情：

<form action="test2.html" method="post" onsubmit="return verify(e1, e2);"> 
    <input type="text" name="e1" /><br/> 
    <input type="text" name="e2" /><br/> 
    <input type="submit" value="Validate" /> 
</form> 

你必須把在onsubmit事件：

return verify(e1, e2); 

，所以你不會，如果數據轉到submiting頁是不是valida

編輯：

我認爲問題是

element1.select() 

在第三個if，那這個select方法對於select對象是不存在的。

您可以使用

element1.focus() 

，將工作的代碼是：

var fieldalias="Email address field" 

     function verify(element1, element2){ 
      var passed=false; 
      if (element1.value==''){ 
       alert("Please fill out the "+fieldalias+"!"); 
       element1.focus(); 
      } 
      else if (element2.value==''){ 
       alert("Please verify the "+fieldalias+"!"); 
       element2.focus(); 
      } 
      else if (element1.value!=element2.value){ 
       alert("The two "+fieldalias+"s do not match"); 
       element1.focus(); 
      } 
      else 
       passed=true; 

      return passed; 

     } 

而且

<form action="test2.html" method="post" onsubmit="return verify(document.getElementById('e1'), document.getElementById('e2'));"> 
    <select id="e1"> 
     <option value="One">One</option> 
     <option value="two">two</option> 
     <option value="Three">Three</option> 
     <option value="four">four</option> 
    </select><br/> 
    <select id="e2"> 
     <option value="One">One</option> 
     <option value="two">two</option> 
     <option value="Three">Three</option> 
     <option value="four">four</option> 
    </select><br/> 
    <input type="submit" value="Validate" /> 
</form> 

Answer 4

嘗試對事件調用stopImmediatePropagation（），以防止任何進一步的處理由表單元素或更高級別的元素中的任何其他處理程序提交事件。