javascript - 验证动态单选按钮、复选框和文本区域

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"/>

与复选框和文本区域相同......

//尝试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