如何驗證一組複選框並返回錯誤信息javascript

我有一個帶有4個複選框的窗體，並且如果未選中框，我必須在提交窗體時顯示錯誤消息。這是我迄今爲止所做的，我只是不知道自己出錯的地方。如何驗證一組複選框並返回錯誤信息javascript

Im new to javascript。我已經驗證正在加載身體標籤，我剛剛包括必要的部分。預先感謝您的幫助。

function validate() { 
 
    var choice1 = document.getElementById("base_small"); 
 
    var choice2 = document.getElementById("base_medium"); 
 
    var choice3 = document.getElementById("base_large"); 
 
    var choice4 = document.getElementById("base_xlarge"); 
 

 
    if ((choice1 == "") && (choice2 == "") && (choice3 == "") && (choice4 == "")) { 
 
    alert("Please choose a base") 
 

 

 
    return false; 
 
    } 
 
    return true; 
 
}

<div class="form1"> 
 
    <h3>Please select a base size**:</h3> 
 
    <form id="orderformbase" class="orderbase" onsubmit="return validate()"> 
 
    <label class="block"><input type="radio" name="base" value="base_small" id="base_small">Small<span class="price"> £5</span></label> 
 
    <label class="block"><input type="radio" name="base" value="base_medium" id="base_medium">Medium<span class="price"> £7.50</span></label> 
 
    <label class="block"><input type="radio" name="base" value="base_large" id="base_large">Large<span class="price"> £10</span></label> 
 
    <label class="block"><input type="radio" name="base" value="base_xlarge" id="base_xlarge">X-Large<span class="price"> £12.50</span></label> 
 
</div> 
 
<!-- form1 close --> 
 
</form>

來源

2017-05-15 AdamElsbury

您檢索checkboxe輸入，但沒有核實其'checked' propertie（布爾）。 – Booster2ooo

最簡單的解決方案，迭代你的無線電，並檢查是否已經檢查或不。

<script> 
 
function validate() { 
 
    var isValid=false; 
 
    var radioLength = document.getElementsByName('base').length; 
 
    for(var i =0;i < radioLength;i++){ 
 
\t if(document.getElementsByName('base')[i].checked){ 
 
\t isValid=true; 
 
\t } 
 
    } 
 

 
    if(!isValid){ 
 
    alert("Please choose a base") 
 
    return false; 
 
    }else{ 
 
    alert("valid data"); 
 
    document.getElementById('orderformbase').submit(); 
 
    return true; 
 
    } 
 
     
 
} 
 
</script> 
 

 
<div class="form1"> 
 
<h3>Please select a base size**:</h3> 
 
<form id="orderformbase" class="orderbase"> 
 
<label class="block"><input type="radio" name="base" value="base_small" id="base_small">Small<span class="price"> £5</span></label> 
 
<label class="block"><input type="radio" name="base" value="base_medium" id="base_medium">Medium<span class="price"> £7.50</span></label> 
 
<label class="block"><input type="radio" name="base" value="base_large" id="base_large">Large<span class="price"> £10</span></label> 
 
<label class="block"><input type="radio" name="base" value="base_xlarge" id="base_xlarge">X-Large<span class="price"> £12.50</span></label> 
 
<input type="button" onclick="validate();" value="submit"/> 
 
</div> 
 
</form>

來源

2017-05-15 09:16:26

你是我的英雄。非常感謝！祝您有個美好的一天我的朋友 – AdamElsbury

您尚未註冊我的答案。 ;） –

驗證在JS這樣一個複選框：

if(!choice1.checked) 
{ 
    alert('You must check a checkbox.'); 
    return false; 
}

來源

2017-05-15 09:04:27

-1

你如果條件應該是這樣的：

if((choice1.checked="None")&&(choice2.checked="None")&&(choice3.checked="None")&&(choice4.checked="None"))

來源

2017-05-15 09:08:28 NickYuan

嘗試象下面這樣：

var choice1 = document.getElementById("base_small").checked; 
    var choice2 = document.getElementById("base_medium").checked; 
    var choice3 = document.getElementById("base_large").checked; 
    var choice4 = document.getElementById("base_xlarge").checked; 
if ((choice1 == false) && (choice2 == false) && (choice3 == false) && (choice4 == false)) { 
    alert("Please choose a base"); 
    return false; 
    }

檢查屬性設置或返回複選框的選中狀態。

來源

2017-05-15 09:08:41 lalithkumar

這對你有幫助嗎？ @AdamElsbury – lalithkumar

它顯示錯誤警告框，但腳本在提交表單之前正在運行，有什麼想法？ – AdamElsbury

請爲您的問題找到下面的代碼。

/* GETTING ALL ELEMENTS INSIDE THE FORM */ 
var elements = document.getElementById("orderformbase").elements, 
    isFormValid = false; 
/* LOOPING ALL THE ELEMENTS INSIDE THE FORM */ 
for (var i = 0; i < elements.length; i++) { 
    /* CHECKING WHETHER ITS RADIO BUTTON AND ITS CHECKED, TO MAKE THE ISFORMVALID VARIABLE TO TRUE */ 
    if (elements[i].type && elements[i].type == "radio" && elements[i].checked) { 
     isFormValid = true; 
     break; 
    } 
} 
/* CHECKING WHETHER FORM IS VALID OR NOT USING ABOVE PROCESS, IF ITS NOT VALID, SHOW BELOW ERROR MSG */ 
if (!isFormValid) { 
    alert("Please choose a base"); 
} 

<div class="form1"> 
    <h3>Please select a base size**:</h3> 
    <form id="orderformbase" class="orderbase" onsubmit="return validate()"> 
    <label class="block"><input type="radio" name="base" value="base_small" id="base_small">Small<span class="price"> £5</span></label> 
    <label class="block"><input type="radio" name="base" value="base_medium" id="base_medium">Medium<span class="price"> £7.50</span></label> 
    <label class="block"><input type="radio" name="base" value="base_large" id="base_large">Large<span class="price"> £10</span></label> 
    <label class="block"><input type="radio" name="base" value="base_xlarge" id="base_xlarge">X-Large<span class="price"> £12.50</span></label> 

<!-- form1 close --> 
</form></div>

來源

2017-05-15 09:14:14 Faizal

可以使用這個傳遞給窗體的引用，然後使用一個選擇器，看看有沒有選中的單選按鈕：

function validate(form) { 
 
    return !!form.querySelector('input[name=base]:checked')); 
 
};

<div class="form1"> 
 
    <h3>Please select a base size**:</h3> 
 
    <form id="orderformbase" class="orderbase" onsubmit="return validate(this)"> 
 
    <label class="block"><input type="radio" name="base" value="base_small" id="base_small">Small<span class="price"> £5</span></label> 
 
    <label class="block"><input type="radio" name="base" value="base_medium" id="base_medium">Medium<span class="price"> £7.50</span></label> 
 
    <label class="block"><input type="radio" name="base" value="base_large" id="base_large">Large<span class="price"> £10</span></label> 
 
    <label class="block"><input type="radio" name="base" value="base_xlarge" id="base_xlarge">X-Large<span class="price"> £12.50</span></label> 
 
</div> 
 
<input type="submit"> 
 
<!-- form1 close --> 
 
</form>

爲了支持舊版瀏覽器，喲ü可以遍歷所有的收音機，看看是否有一個檢查一個：

function validate(form) { 
 
    var radios = form.base; 
 
    for (var i=0, iLen=radios.length; i<iLen; i++) { 
 
    if (radios[i].checked) return true; 
 
    } 
 
    return false; 
 
};

<div class="form1"> 
 
    <h3>Please select a base size**:</h3> 
 
    <form id="orderformbase" class="orderbase" onsubmit="return validate(this)"> 
 
    <label class="block"><input type="radio" name="base" value="base_small" id="base_small">Small<span class="price"> £5</span></label> 
 
    <label class="block"><input type="radio" name="base" value="base_medium" id="base_medium">Medium<span class="price"> £7.50</span></label> 
 
    <label class="block"><input type="radio" name="base" value="base_large" id="base_large">Large<span class="price"> £10</span></label> 
 
    <label class="block"><input type="radio" name="base" value="base_xlarge" id="base_xlarge">X-Large<span class="price"> £12.50</span></label> 
 
</div> 
 
<input type="submit"> 
 
<!-- form1 close --> 
 
</form>

來源

2017-05-15 09:23:19 RobG

一種方法是使用一個按鈕，而不是形式提交。

例如。

<input type="button" />

而不是：

<input type="submit" />

然後編程提交表單，只有當條件滿足。

工作實例：

var orderForm = document.getElementById('orderformbase'); 
 
var submitButton = orderForm.querySelector('input[type="button"]'); 
 

 
function validateForm() { 
 
    
 
    var choice1 = document.getElementById("base_small").checked; 
 
    var choice2 = document.getElementById("base_medium").checked; 
 
    var choice3 = document.getElementById("base_large").checked; 
 
    var choice4 = document.getElementById("base_xlarge").checked; 
 

 
    if ((choice1 === false) && (choice2 === false) && (choice3 === false) && (choice4 === false)) { 
 
     orderForm.classList.add('invalid'); 
 
     alert("Please choose a base"); 
 
    } 
 

 
    else { 
 
     orderForm.submit(); 
 
    } 
 
} 
 

 
submitButton.addEventListener('click', validateForm, false);

input[type="button"] { 
 
display: block; 
 
margin: 12px auto; 
 
} 
 

 
#orderformbase.invalid { 
 
color: rgb(255, 0, 0); 
 
} 
 

 
#orderformbase.invalid fieldset { 
 
border: 1px solid rgb(255, 0, 0); 
 
}

<div class="form1"> 
 
    <h3>Please select a base size**:</h3> 
 
    <form id="orderformbase" class="orderbase"> 
 
<fieldset> 
 
<legend>Base Sizes</legend> 
 
    <label class="block"><input type="radio" name="base" value="base_small" id="base_small">Small<span class="price"> £5</span></label> 
 
    <label class="block"><input type="radio" name="base" value="base_medium" id="base_medium">Medium<span class="price"> £7.50</span></label> 
 
    <label class="block"><input type="radio" name="base" value="base_large" id="base_large">Large<span class="price"> £10</span></label> 
 
    <label class="block"><input type="radio" name="base" value="base_xlarge" id="base_xlarge">X-Large<span class="price"> £12.50</span></label> 
 
</fieldset> 
 
<input type="button" value="Submit Form" /> 
 
</form> 
 
</div>

來源

2017-05-15 09:46:14 Rounin

如何驗證一組複選框並返回錯誤信息javascript

回答

相關問題