使用JavaScript选中复选框后,如何验证“ textarea”

前端之家收集整理的这篇文章主要介绍了使用JavaScript选中复选框后,如何验证“ textarea” 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我已经填写了几个问题的表格.每个问题都有复选框或单选按钮,具体取决于问题的类型(可以有多少个答案).

然后,我开始进行验证功能,以检查用户是否检查了整个表单.

我不确定如何制作仅在选择了某个答案后才会触发的验证功能(选中某些复选框,将触发该功能检查文本区域并检查其内容).

到目前为止我可以找到的代码here.

代码也可以在下面找到:

// main function for checking the validation of answer 
function Validation() {
  if(!ValidateForm()) {
    document.getElementById("errorBox").innerHTML = "Please check that you correctly answered the question";
    return false;
  } else {
    document.getElementById("errorBox").innerHTML = "";
    return true					
  }
}

// will check the checkBox to see if checked,// the "console.log" is there just because of prevIoUs problems,don't mind it
function ValidateForm() {
  var k = document.getElementsByName('Knowledge');
							
  for (var l = 0; l<k.length; l++) {
    if (k[l].checked) {
      console.log(k[l])
      return true;										
    }
  }
}

// this was supposed to be the code to do the following:
//  if the checkBox is checked,it would check for textarea
//  if the textarea is there,check if it has any content
//    if not,return false ---> sends message from the main function
var k = document.getElementsByName('Knowledge');
						
for(var i = 0; i<k.length; i++) {
  if (k[6].checked) {
								
  }					
}
<form id="frmForm" name="frmForm" action="#" method="post" onsubmit="return Validation()">
  <div class="row" style="margin-top: 20px;">
    <div class="col-sm-12">
      <div class="form-group">
        <p>
        <b>3. This is a question,Lorem ipsum dolor sit amet?</b>
        </p>
        <p style="margin-left: 16px;">
          (please choose one or more answers to continue)
        </p>
        <div style="margin-left: 35px;">
          <input type="checkBox" id="Knowledge1" name="Knowledge" value="physical" >
            <label for="Knowledge1" style="font-weight:normal">answer 1<br>
          <input type="checkBox" id="Knowledge2" name="Knowledge" value="music" >
            <label for="Knowledge2" style="font-weight:normal">answer 2<br>
          <input type="checkBox" id="Knowledge3" name="Knowledge" value="nature" >
            <label for="Knowledge3" style="font-weight:normal">answer 3</label><br>
          <input type="checkBox" id="Knowledge4" name="Knowledge" value="society" >
            <label for="Knowledge4" style="font-weight:normal">answer 4</label><br>
          <input type="checkBox" id="Knowledge5" name="Knowledge" value="other" >
            <label for="Knowledge5" style="font-weight:normal">answer 5 + explain
          <input type="text" placeholder=" . . ." border=""/></label><br>
        </div>
      </div>
    </div>
  </div>

  <div class="row" style="margin-top: 50px">
    <div class="col-sm-3 col-sm-offset-3">
      <div class="form-group">
        <button type="submit" id="Submit" name="Submit" class="btn btn-default">! ANSWER !</button>
      </div>
    </div>
  </div>
					
  <div id="errorBox" style="margin-bottom:50px; color: red"></div>
      
</form>     
  
最佳答案
如果要使其保持通用,则将data attribute添加到需要其他文本的复选框,并进行验证以检查数据属性

<input type="checkBox" id="Knowledge5" name="Knowledge" value="other" data-explain="Knowledge5text">
<input id="Knowledge5text" type="text" placeholder="..." border=""/>

.

if (checkBoxElement.dataset.explain) {
  console.log('answer requires an explanation');
  var textFieldElement = document.getElementById(k[i].dataset.explain);
  if (!textFieldElement .value) {
    console.log('no answer found:',textFieldElement .value);
    return false;
  }
}

这是完整的示例.旁注:避免使用除循环变量以外的任何其他字符,这会使理解代码更加困难

// main function for checking the validation of answer 
function Validation() {
  if(!ValidateForm()) {
    document.getElementById("errorBox").innerHTML = "Please check that you correctly answered the question";
    return false;
  } else {
    document.getElementById("errorBox").innerHTML = "";
    return true					
  }
}

// will check the checkBox to see if checked,don't mind it
function ValidateForm() {
  var k = document.getElementsByName('Knowledge');

  for (var i = 0; i < k.length; i++) {
    if (k[i].checked) {
      if (k[i].dataset.explain) {
        console.log('answer requires an explanation');
        var textField = document.getElementById(k[i].dataset.explain);
        if (!textField.value) {
          console.log('no answer found:',textField.value);
          return false;
        }
      }
      return true;										
    }
  }
}
<form id="frmForm" name="frmForm" action="#" method="post" onsubmit="return Validation()">
  <div class="row" style="margin-top: 20px;">
    <div class="col-sm-12">
      <div class="form-group">
        <p>
        <b>3. This is a question,Lorem ipsum dolor sit amet?</b>
        </p>
        <p style="margin-left: 16px;">
          (please choose one or more answers to continue)
        </p>
        <div style="margin-left: 35px;">
          <input type="checkBox" id="Knowledge1" name="Knowledge" value="physical" >
            <label for="Knowledge1" style="font-weight:normal">answer 1<br>
          <input type="checkBox" id="Knowledge2" name="Knowledge" value="music" >
            <label for="Knowledge2" style="font-weight:normal">answer 2<br>
          <input type="checkBox" id="Knowledge3" name="Knowledge" value="nature" >
            <label for="Knowledge3" style="font-weight:normal">answer 3</label><br>
          <input type="checkBox" id="Knowledge4" name="Knowledge" value="society" >
            <label for="Knowledge4" style="font-weight:normal">answer 4</label><br>
          <input type="checkBox" id="Knowledge5" name="Knowledge" value="other" data-explain="Knowledge5text">
            <label for="Knowledge5" style="font-weight:normal">answer 5 + explain
          <input id="Knowledge5text" type="text" placeholder=" . . ." border=""/></label><br>
        </div>
      </div>
    </div>
  </div>

  <div class="row" style="margin-top: 50px">
    <div class="col-sm-3 col-sm-offset-3">
      <div class="form-group">
        <button type="submit" id="Submit" name="Submit" class="btn btn-default">! ANSWER !</button>
      </div>
    </div>
  </div>
					
  <div id="errorBox" style="margin-bottom:50px; color: red"></div>
      
</form>
原文链接:https://www.f2er.com/html/530421.html

猜你在找的HTML相关文章