验证动态单选按钮，复选框和文本区域

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");
  }
 }

单击此处检查此小提琴

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 ..就像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>