驗證輸入字段，如果某個單選按鈕被選中

我有一個表單有多個問題，每個問題都要求選擇通過，失敗或不適用的單選按鈕。我想要實現的是，如果用戶爲任何問題選擇「失敗」並嘗試提交，則會打開3個文本字段的驗證。驗證輸入字段，如果某個單選按鈕被選中

如果用戶在任何問題上選擇「失敗」，則必須完成所有三個文本輸入字段，並且除非他們這樣做才能提交。

另外我已經對問題進行了驗證，以確保用戶爲每個字段選擇單選按鈕，因此解決方案必須能夠像現在一樣使用它。一個例子是我的形式是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Form</title> 
<script> 
function valbutton(thisform) { 

// Question 1 
myOption = -1; 
    for (i=thisform.questionone_one.length-1; i > -1; i--) { 
     if (thisform.questionone[i].checked) { 
     myOption = i; i = -1; 
     } 
    } 
    if (myOption == -1) { 
     alert("Please select Pass, Fail or N/A for Question 1"); 
    return false; 
    } 

// Question2 
myOption = -1; 
    for (i=thisform.questiontwo.length-1; i > -1; i--) { 
     if (thisform.questiontwo[i].checked) { 
     myOption = i; i = -1; 
     } 
    } 
    if (myOption == -1) { 
     alert("Please select Pass, Fail or N/A for Question 2"); 
    return false; 
    } 

//etc... 

thisform.submit(); 
} 
</script> 
</head> 

<body> 

<form method="post" action="send.php" enctype="multipart/form-data" class="form" name="claimform" id="claimform"> 

<div>1. Question? <input type="radio" name="questionone" class="radio" value="P" /> Pass &nbsp;&nbsp;&nbsp; <input name="questionone" type="radio" class="radio" value="F" /> Fail &nbsp;&nbsp;&nbsp; <inputname="questionone" type="radio" class="radio" value="N/A" /> N/A</div> 

<div>1. Question? <input type="radio" name="questiontwo" class="radio" value="P" /> Pass &nbsp;&nbsp;&nbsp; <input name="questiontwo" type="radio" class="radio" value="F" /> Fail &nbsp;&nbsp;&nbsp; <inputname="questiontwo" type="radio" class="radio" value="N/A" /> N/A</div> 

<button type="submit" title="Submit Claim" class="button" onclick="valbutton(claimform);return false;"><span><span>Submit Claim</span></span></button> 
<button type="button" title="Reset" class="button" onclick="this.form.reset()"><span><span>Clear Form</span></span></button> 

</form> 

</body> 
</html>

任何想法？

另外我忘了提及我在這個頁面中使用Mootools，所以任何解決方案應該與Mootools 1.2一起使用。

來源

2010-12-20 Jamie

首先，您應該使用var關鍵字聲明變量。否則，你會污染全局名稱空間，並且JavaScript必須通過堆棧向上移動以查找變量。

現在，至於你的問題...我喜歡用jQuery。如果你喜歡使用普通的舊JavaScript，那麼你可以翻譯它。

function submitMyForm() { 
    var failAnswers = $('input[type=radio]').filter(function() { return $(this).val() == "F"; }); 
    if (failAnswers.length > 0) { 
    var blankTextFields = $('input[type=text]').filter(function() { return $(this).val() == ""; }); 
    if (blankTextFields.length > 0) { 
     alert('Please answer the questions'); 
     return false; 
    } 
    } 

    myForm.submit(); 
}

這就是我們所做的。首先，我們找到所有帶有「F」答案的單選按鈕。如果至少有一個，我們會找到所有沒有輸入的文本框。如果其中至少有一個，我們彈出警報消息並返回false。否則，一切都很好，我們提交表格。

來源

2010-12-20 18:11:29 Samo

驗證輸入字段，如果某個單選按鈕被選中

回答

相關問題