驗證動態單選按鈕，複選框和文本區域

Question

我開發了一個頁面，其中包含幾個問題和答案......有三種類型的答案單選按鈕，複選框和文本區域...我必須驗證這些使用JavaScript ...

根據問題類型我得到從數據庫答案選項是否可能是一個單選按鈕或複選框或文本區域...

<input type="radio" id="radio" name="21" value="59"/> 
<input type="radio" id="radio" name="22" value="60"/> 
<input type="radio" id="radio" name="23" value="61"/> 

像一樣的複選框動態創建的問題和文本區域....

// try 1

var form = document.getElementById('form1'); 
var inputs = form.getElementsByTagName('INPUT'); 
for (var i = 0; i < inputs.length; ++i) { 
if (inputs[i].type.toLowerCase == 'radio' && !inputs[i].checked) 
return false; 
} 
return true; 

//嘗試2

var rv = document.getElementsByName("reservation_in"); 
var ci = -1; 
for(var ikj=0; ikj < rv.length; ikj++){ 
if(rv[ikj].checked) { 
ci = ikj; 
} 
} 
if (ci == -1) { 
document.getElementById('err_reservation_for').innerHTML=""; 
document.getElementById('err_reservation_for').innerHTML= 
'Please&nbsp;let&nbsp;us&nbsp;know&nbsp; 
//Reservation&nbsp;for&nbsp;Inside&nbsp;or&nbsp;Patio.'; 
return false; 
} 

//嘗試3

var radios = document.getElementById('radio'); 
var formValid = false; 
var i = 0; 
while (!formValid && i < radios.length) { 
if (radios[i].checked) 
formValid = true; 
i++; 
} 
if (!formValid) 
//document.getElementById('radio_error').innerHTML=""; 
//document.getElementById('radio_error').innerHTML= 
'Please&nbsp;select&nbsp;one&nbsp;answer.'; 
alert("Please select the answer"); 
return formValid; 

Answer 1

我有一些示例代碼，它可以幫助你瞭解更多。

HTML代碼：

<div id="que1" class="que"> 
    xyz is not abc? <br /> 
    <div class="ans"> 
    <input type="radio" name="radioGroup1" id="radio1" />One 
    <input type="radio" name="radioGroup1" id="radio2" />Two 
    <input type="checkbox" name="check" id="check1" />Three <br/> 
    <textarea id="textarea-1"></textarea> 
    </div> 
    </div><br /> 
    <div id="que2" class="que"> 
     xyz is not abc? <br /> 
     <div class="ans"> 
    <input type="radio" name="radioGroup2" id="radio3" />One 
    <input type="radio" name="radioGroup2" id="radio3" />Two 
    <input type="checkbox" name="check" id="check2" />Three <br /> 
    <textarea id="textarea-2"></textarea> 
    </div> 

    </div> 

JS代碼：

var questions=document.getElementsByClassName("que"); 
for(var i=0;i<questions.length;i++){ 
    var inputs=questions[i].getElementsByTagName("input"); 
    for(var j=0;j<inputs.length;j++){ 
     if(inputs[j].type=="radio"){ 
     alert("question ID:- "+ questions[i].id+ " radio"); 
     } 
     if(inputs[j].type=="checkbox"){ 
     alert("question ID:- "+ questions[i].id+ " checkbox"); 
    } 
    } 
    var textarea=questions[i].getElementsByTagName("textarea"); 
    for(var k=0;k<textarea.length;k++){ 
     alert("question ID:- "+ questions[i].id+ " Textarea"); 
    } 
} 

Click here check this fiddle

Answer 2

單選按鈕驗證： HTML：

<form> 
    <input type="radio" id="21" name="radio" value="59"/> 
    <input type="radio" id="22" name="radio" value="60"/> 
    <input type="radio" id="23" name="radio" value="61"/> 
</form> 

的Javascript：

if ((form.radio[0].checked == false) && (form.radio[1].checked == false) && (form.radio[2].checked == false)) { alert ("Please choose one radio button"); return false; } 

Answer 3

如果有許多輸入框，然後用each ..that將迭代就像for循環..

var iz_checked = false; 
 
    var is_blank = false; 
 
    var is_choose = false; 
 
    $('button').on('click', function() { 
 
iz_checked = false; 
 
is_blank = false; 
 
is_choose = false; 
 
$('input[type="radio"]').each(function() { 
 
    if ($('input[type="radio"]').is(':checked') == true) { 
 
    iz_checked = false; 
 
    } else { 
 
    iz_checked = true; 
 
    } 
 
    if ($('textarea')[0].value == "") { 
 
    is_blank = true; 
 
    } 
 
}); 
 
$('input[type="checkbox"]').each(function() { 
 
    if ($('input[type="checkbox"]').is(':checked') == true) { 
 
    is_choose = false; 
 
    } else { 
 
    is_choose = true; 
 
    } 
 
}); 
 
if (is_choose || iz_checked || is_blank) { 
 
    alert("Validation err"); 
 
} 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <form> 
 
    <input type="radio" id="21" value="59" />a 
 
    <input type="radio" id="22" value="60" />q 
 
    <input type="radio" id="23" value="61" />w 
 
    <input type="radio" id="1" value="59" />e 
 
    <input type="radio" id="2" value="60" />r 
 
    <input type="radio" id="3" value="61" />t 
 
    <input type="radio" id="29" value="59" />y 
 
    <input type="radio" id="80" value="60" />u 
 
    <input type="radio" id="7" value="61" />i 
 
    <input type="radio" id="8" value="59" />o 
 
    <input type="radio" id="0" value="60" />p 
 
    <input type="radio" id="1" value="61" />l 
 
</form> 
 
<textarea cols="10" rows="10"></textarea> 
 
<br/> 
 
<input type="checkbox" value="Apples">f 
 
<input type="checkbox" value="Apples">d 
 
<input type="checkbox" value="Apples">s 
 
<input type="checkbox" value="Apples">a 
 
<br/> 
 
<button> 
 
    Validate 
 
</button>