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

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

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>