調用所有函數提交表格

Question

我是JavaScript新手，正在尋找如何驗證我的表單按鈕單擊，但我的腳本不斷跳到第一個函數驗證名稱保持突出顯示，我不知道該怎麼去放在清除所有功能，所以它跳轉到下一個非驗證項目

function validate_form(form) 
{ 
    var complete=false; 

    if(complete) 
    { 
     clear_all(); 
     complete = checkUsernameForLength(form.username.value); 
    } 
    if(complete) 
    { 
     clear_all(); 
     complete = checkaddress(form.address.value); 
    } 
    if(complete) 
    { 
     clear_all(); 
     complete = checkaddress(form.address.value); 
    } 

    if (complete) 
    { 
     clear_all(); 
     complete = checkphone(form.phone.value); 
    } 
    if (complete) 
    { 
     clear_all(); 
     complete = checkEmail(email.phone.value); 
    } 
} 

function clear_all() 
{ 
    document.getElementById('usernamehint').style.visibility= 'hidden'; 
    document.basicform.username.style.backgroundColor='white'; 
    document.getElementById("countryhint").style.visibility= 'hidden'; 
    document.basicform.country.style.backgroundColor='white'; 
    document.getElementById("").style.visibility= 'hidden'; 
    document.basicformm.address.style.backgroundColor='white'; 
    document.getElementById("").style.visibility= 'hidden'; 
    document.basicform.phone.style.backgroundColor='white'; 
    document.getElementById("").style.visibility= 'hidden'; 
    document.basicform.email.style.backgroundColor='white'; 
} 

function checkUsernameForLength(whatYouTyped) 
{ 
    var fieldset = whatYouTyped.parentNode; 
    var txt = whatYouTyped.value; 
    if (txt.length > 2) { 
     fieldset.className = "welldone"; 
     return true; 
    } else { 
     fieldset.className = ""; 
     return false; 
    } 
} 

function checkEmail(whatYouTyped) 
{ 
    var fieldset = whatYouTyped.parentNode; 
    var txt = whatYouTyped.value; 
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(txt)) { 
     fieldset.className = "welldone"; 
    } else { 
     fieldset.className = ""; 
    } 
} 



function checkaddress(whatYouTyped) 
{ 
    var fieldset = whatYouTyped.parentNode; 
    var txt = whatYouTyped.value; 
    if (txt.length > 3 && txt.length <10) { 
     fieldset.className = "welldone"; 
    } 
    else { 
     fieldset.className = ""; 
    } 
} 



function checkphone(whatYouTyped) 
{ 
    var fieldset = whatYouTyped.parentNode; 
    var txt = whatYouTyped.value; 
if (/^((\+\d{1,3}(-|)?\(?\d\)?(-|)?\d{1,5})|(\(?\d{2,6}\)?))(-|)?(\d{3,4})(-|)?(\d{4})((x| ext)\d{1,5}){0,1}$/.test(txt)) { 
     fieldset.className = "welldone"; 
    } 
else 
{ 
     fieldset.className = ""; 
    } 
} 



function addLoadEvent(func) 
{ 
    var oldonload = window.onload; 
    if (typeof window.onload != 'function') 
{ 
    window.onload = func; 
    } 
else 
{ 
    window.onload = function() 
{ 
     oldonload(); 
     func(); 
    } 
    } 
} 


function prepareInputsForHints() 
{ 
    var inputs = document.getElementsByTagName("input"); 
    for (var i=0; i<inputs.length; i++) 
{ 
    inputs[i].onfocus = function() 
{ 
     this.parentNode.getElementsByTagName("span")[0].style.display = "inline"; 
    } 
    inputs[i].onblur = function() 
{ 
     this.parentNode.getElementsByTagName("span")[0].style.display = "none"; 
    } 
    } 
} 

Answer 1

function checkUsernameForLength(name, callback) { 
    if (error) { 
     return [null, error]; 
    } 
    return [name, null] 
} 
var series = function(funcs, success, error) { 
    var results = errors = []; 
    for (var i in funcs) { 
     var result = funcs[i](); 
     results.push(result[0]); 
     errors.push(result[1]); 
     if (result[1]) { 
      return error(results, errors); 
     } 
    } 
    return success(results); 
} 
series([ 
    function() { 
     return checkUsernameForLength(form.username.value); 
    } 
], function(results) { 
    form.submit(); 
}, function(results, errors) { 
    alert(errors.join("\n")); 
}); 

系列調用每個驗證功能，如果一些錯誤傳遞停止執行。 比調用錯誤或成功函數，如果是或不是錯誤。

PS。這是學習javascript的正確方法。如果你想很好地瞭解JavaScript，你不應該使用jQuery等任何糖。

Answer 2

我可以推薦以下方法：

你有形式

{ // map of ids : validators 
    name: function(formElement) {..., return 'Cannot be all lowercase' or return 'Other error'}, 
    email: function(formElement) {...}, 
    ... 
} 

每個驗證函數返回一個錯誤信息，或沒有（不確定），如果有的驗證功能的列表，沒有問題。

然後使用$。每過ID：驗證對，你這樣做（代碼可能是越野車）：

$(id).bind(
    'change', //? 
    function() { 
     // Called when user changes form elements, you can use an alert, or better 
     // something not annoying like... 
     $(id).css({'background-color':'yellow'}) 
     $(id+'-error').get(0).innerHtml = validator(id); 
    } 
) 

這種方法的優點是它的用戶將看到所有的錯誤一次，而而不是一次一個。

或者，每次用戶點擊提交時，您都會執行類似$ .map或$ .each的操作來運行所有驗證器函數，並進行適當的投訴。

另請注意，您不能依賴客戶端代碼來驗證您的表單，因爲對於用戶或黑客來說，禁用或忽略您的驗證代碼並將任何想要的值發送到您的服務器是微不足道的。但是，客戶端驗證代碼對於平滑和響應用戶體驗非常有用。

Answer 3

我檢查了您的代碼，並得到了你的代碼的主要問題： 這裏是驗證的一部分：

complete = checkUsernameForLength(form.username.value); 
} 
if(complete) 

…… 

function checkUsernameForLength(whatYouTyped) { 
    var fieldset = whatYouTyped.parentNode; 
    var txt = whatYouTyped.value; 
    if (txt.length > 2) { 
     fieldset.className = "welldone"; 
    } 
    else { 
     fieldset.className = "fail"; 
    } 
} 

的問題是，checkUsernameForLength沒有返回值，所以完全沒有值。 你應該改變你的函數代碼：

function checkUsernameForLength(whatYouTyped) { 
    var fieldset = whatYouTyped.parentNode; 
    var txt = whatYouTyped.value; 
    if (txt.length > 2) { 
     fieldset.className = "welldone"; 
     return true; 
    } else { 
     fieldset.className = "fail"; 
     return false; 
    } 
} 

在這種情況下

complete = checkUsernameForLength(form.username.value); 

將有真或假的值，如果沒有錯誤或者一些錯誤。它會停止執行驗證