在序列驗證表單字段

我內置有這種方式的多步驟順序形式：在序列驗證表單字段

步驟1：通過單選按鈕選擇種類

「下一個」按鈕只是具有一個onclick的圖像函數隱藏單選按鈕的當前div，並顯示一個新的div與該過程中的下一步。

步驟2：文本，複選框 - >動態價格

包含一個textarea，動態價格，和四個複選框。價格根據textarea中的字符數量和複選框中的選項而變化。 JQuery腳本是用來做到這一點。再次，「下一步」按鈕只是一個圖像，它在激活onclick函數時會隱藏當前div，並顯示包含表單中下一步的div。

第3步：個人資料

這是我的問題。這裏用戶插入名稱，電子郵件等。「下一步」按鈕再次只是一個圖像，在激活onclick功能時隱藏當前div並顯示包含下一步的div。我如何使這個步驟中的表單域成爲必需，以便用戶能夠進入下一步。我有隱藏和顯示div的代碼如下：

<script type="text/javascript"> 
    function toggleDiv(id, flagit) { 
     if (flagit == "1") { 
      if (document.layers) document.layers[''+id+''].visibility = "show" 
      else if (document.all) document.all[''+id+''].style.visibility = "visible" 
      else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible" 
     } 
     else`if (flagit == "0") { 
      if (document.layers) document.layers[''+id+''].visibility = "hide" 
      else if (document.all) document.all[''+id+''].style.visibility = "hidden" 
      else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"` 
     } 
    } 
    //--> 
</script>

來源

2012-06-18 raz

不再需要支持非DOM瀏覽器。 – ThiefMaster

@ThiefMaster - 我同意，但我們的一些老闆可能不會。幾個月前我只支持IE6支持，但仍然試圖不打破它。 – mplungjan

IE6是的，但非DOM瀏覽器比IE6老... – ThiefMaster

這是一個可怕的（和錯誤的）舊代碼片。

這裏要說的是居然還在處理Netscape4（層部分）

你必須告訴我，你切換腳本的其餘部分的更新。你需要添加驗證這部分，而不是切換。

例如，使用

<form onsubmit="return validate(this)">

和

<input type="image" src="next.png" />

你可以做到這一點（普通的JavaScript，展示和jQuery中隱藏在其他地方顯示在頁面上）：

var currentStep=1; 
function toggleDiv(id,flagit) { 
    if (document.getElementById) document.getElementById(id).style.visibility = (flagit)?"visible":"hidden"; 
    else if (document.all) document.all(id).style.visibility = (flagit)?"visible":"hidden"; 
    else if (document.layers) document.layers[id].visibility = (flagit)?"show":"hide"; 
} 
function validate(theForm) { 
    if (currentStep == 1) { 
    if (theForm.category.value....) { 
     alert("Error in category"); 
     return false; 
    } 
    currentStep++; 
    toggleDiv("part1",0); 
    toggleDiv("part2",1); 
    return false; // do not submit 
    } 
    if (currentStep == 2) { 
    if (theForm.price.value....) { 
     alert("Error in price"); 
     return false 
    } 
    currentStep++; 
    toggleDiv("part2",0); 
    toggleDiv("part3",1); 
    return false; // do not submit 
    } 
    if (currentStep == 3) { 
    if (theForm.name.value....) { 
     alert("Error in name"); 
     return false 
    } 
    return true; // submit 
    } 
}

來源

2012-06-18 08:35:45 mplungjan

這是一個很好的回覆。非常感謝！ – raz

歡迎您 – mplungjan

好吧，既然你已經用jQuery標記了你的問題，爲什麼不實際使用它並讓jquery處理所有平臺特定的問題ES。

function toggleDiv(id,flagit) { 
    if(flagit) { 
     $("#"+id).show(); 
    } else { 
     $("#"+id).hide(); 
    } 
}

讓我知道這是否有效。

來源

2012-06-18 08:41:42

您需要'$（'＃'+ id）'。在參數'id'中，人們期望一個ID，而不是一個選擇器/元素。你也可以使用'$（'＃'+ id）.toggle（flagit）;' – ThiefMaster

@ThiefMaster - 是的，只是在你的評論進來時改變它。 'toggle'功能更加緊湊和美觀。 –

這也不是OP的問題。 – mplungjan

在序列驗證表單字段

回答

相關問題