Застрял в цикле с несколькими операторами if - PullRequest
0 голосов
/ 15 февраля 2019

Прошу прощения, если заголовок установлен неправильно, поскольку у меня нет фактической подсказки, что его вызывает, но мой цикл всегда будет приводить к ложному утверждению.

Прямо в точку, вот код , как указано ниже, если кто-то предпочитает проверить это в Codepen ..

function Validation() {
	if(!ValidateForm()) {
		document.getElementById("errorBox").innerHTML = "Please double check, that you have answered all the questions and try again."
		return false;
	} else {
		document.getElementById("errorBox").innerHTML = ""
		alert("Thank you for your cooperation");						
	}
}
function ValidateForm() {
	var a = document.getElementsByName('Activity');
	var v = document.getElementsByName('Volunteers');
	//var e = document.getElementsByName('Name');
							
	for (var i = 0; i<a.length; i++) {
		if (a[i].type == 'checkbox') {
			if (a[i].checked) {
        
        for (var j = 0; j<v.length; j++) {
		      if (v[j].type == 'checkbox') {
			      if (v[j].checked) {
              alert("it werks!!")
              return true;
            }
          }
        }
        return true;
      } else {
       return false;
      }
    }
  }
}
<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>1. Which of the volunteer jobs did you like the most in the year 2018?</b>
					</p>
					<p style="margin-left: 16px;">
					(You can choose one or more options as your answer)
					</p>
					<div style="margin-left: 35px;">
					  <input type="checkbox" id="Activity1" name="Activity" value="supplies" > 1<br>
						<input type="checkbox" id="Activity2" name="Activity" value="food" > 2<br>
						<input type="checkbox" id="Activity3" name="Activity" value="plastic" > 3<br>
						<input type="checkbox" id="Activity4" name="Activity" value="clean" > 4<br>
						<input type="checkbox" id="Activity5" name="Activity" value="painting" > 5<br>
						<input type="checkbox" id="Activity6" name="Activity" value="zmps" > 6<br>
						<input type="checkbox" id="Activity7" name="Activity" value="sumica" > 7<br>
						<input type="checkbox" id="Activity8" name="Activity" value="blood" > 8<br>
						<input type="checkbox" id="Activity9" name="Activity" value="volunteer" > 9<br>
					</div>
				</div>
			</div>
		</div>
    <div class="row" style="margin-top: 20px;">
		  <div class="col-sm-12">
			  <div class="form-group">
				  <p>
					<b>2. How much time are you prepared to spend as volunteer?</b>
					</p>
					<p style="margin-left: 16px;">
					(You can only choose one option as your answer)
					</p>
					<div style="margin-left: 35px;">
					  <input type="radio" id="Volunteers1" name="Volunteers" value="oneWeek" > 1<br>
						<input type="radio" id="Volunteers2" name="Volunteers" value="fiveWeek" > 2<br>
						<input type="radio" id="Volunteers3" name="Volunteers" value="oneMonth" > 3<br>
						<input type="radio" id="Volunteers4" name="Volunteers" value="fivemonth" > 4<br>
						<input type="radio" id="Volunteers5" name="Volunteers" value="halfYear" > 5<br>
						<input type="radio" id="Volunteers6" name="Volunteers" value="twoYear" > 6<br>
						<input type="radio" id="Volunteers7" name="Volunteers" value="other" > 
						<input type="text" placeholder="other" /><br>
					</div>
				</div>
			</div>
		</div>
  <button style="margin-top:30px;"type="submit" id="Submit" name="Submit">Send me away</button>
    <div id="errorBox" style="margin-bottom:50px; color: red"></div>
</form>

Я пытаюсь создать функцию, которая будет проверять форму.Данный код, конечно, просто демо, так как моя форма более обширна.Код должен был проверять ответ, и если проверено, проверять следующий и т. Д. Я пытался поставить, если утверждения разделены, но это только вызвало то, что после первой проверки кода код отправит сообщениекак если бы вся форма была заполнена.

И пока мы находимся, что если у формы есть вопрос с ответом о чекбоксе, говоря «другой» (напишите свой ответ), как бы я сделал код, который сначала проверитЕсли флажок был установлен, а затем проверить, были ли введены данные?

Я буду очень признателен за любую помощь по второй части вопроса, а также за обнаружение ошибки и исправление меня в первой части :)

РЕДАКТИРОВАТЬ :: Протестировал код, используя console.log и только после того, как были выбраны все флажки в первом вопросе и радио во втором вопросе, форма была помечена как правильно отвеченный.

Другой вывод, по-видимому, по какой-то причине, только для некоторых ответов в первом вопросе, код будет думать, что они не былипроверено, в то время как для других (как первый ответ), код примет это и продолжит как форма правильно ответил.Любое объяснение этому?

Ответы [ 3 ]

0 голосов
/ 15 февраля 2019

Я проверил ваш код, и у него есть проблема с циклами, потому что вы проверяете

if (a[i].checked) {

и возвращаете false, если не проверено.Это проблема, она не будет проверять флажки для следующих действий, если первый флажок не установлен.

0 голосов
/ 15 февраля 2019

Итак, я просмотрел код и обнаружил, что проблема была в return false и return true,

Новый, работающий, правильно, код следующий:

function Validation() {
  if(!ValidateForm()) {
    document.getElementById("errorBox").innerHTML = "Please double check, that you have answered all the questions and try again."
      return false;
  } else {
    document.getElementById("errorBox").innerHTML = ""
    alert("Thank you for your cooperation");						
  }
}

function ValidateForm() {
  var a = document.getElementsByName('Activity');
  var v = document.getElementsByName('Volunteers');    							
  for (var i = 0; i<a.length; i++) {
    //console.log(a[i]);
    if (a[i].checked) {
      for (var j = 0; j<v.length; j++) {
        if (v[j].checked) {
          console.log(a[i],",",v[j])
          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>1. Which of the volunteer jobs did you like the most in the year 2018?</b>
	    </p>
	    <p style="margin-left: 16px;">
        (You can choose one or more options as your answer)
	    </p>
	      <div style="margin-left: 35px;">
	        <input type="checkbox" id="Activity1" name="Activity" value="supplies" > 1<br>
	        <input type="checkbox" id="Activity2" name="Activity" value="food" > 2<br>
	        <input type="checkbox" id="Activity3" name="Activity" value="plastic" > 3<br>
	        <input type="checkbox" id="Activity4" name="Activity" value="clean" > 4<br>
	        <input type="checkbox" id="Activity5" name="Activity" value="painting" > 5<br>
	        <input type="checkbox" id="Activity6" name="Activity" value="zmps"> 6<br>
	        <input type="checkbox" id="Activity7" name="Activity" value="sumica"> 7<br>
	        <input type="checkbox" id="Activity8" name="Activity" value="blood"> 8<br>
	        <input type="checkbox" id="Activity9" name="Activity" value="volunteer"> 9<br>
	      </div>
      </div>
    </div>   
  </div>   
  <div class="row" style="margin-top: 20px;">
    <div class="col-sm-12">
      <div class="form-group">
        <p>
        <b>2. How much time are you prepared to spend as volunteer?</b>
        </p>
        <p style="margin-left: 16px;">
          (You can only choose one option as your answer)
        </p>
        <div style="margin-left: 35px;">
          <input type="radio" id="Volunteers1" name="Volunteers" value="oneWeek" > 1<br>
          <input type="radio" id="Volunteers2" name="Volunteers" value="fiveWeek" > 2<br>
          <input type="radio" id="Volunteers3" name="Volunteers" value="oneMonth" > 3<br>
          <input type="radio" id="Volunteers4" name="Volunteers" value="fivemonth" > 4<br>
          <input type="radio" id="Volunteers5" name="Volunteers" value="halfYear" > 5<br>
          <input type="radio" id="Volunteers6" name="Volunteers" value="twoYear" > 6<br>
          <input type="radio" id="Volunteers7" name="Volunteers" value="other" > 
          <input type="text" placeholder="other" /><br>
        </div>
      </div>
    </div>
  </div>
  <button style="margin-top:30px;"type="submit" id="Submit" name="Submit">Send me away</button>
  <div id="errorBox" style="margin-bottom:50px; color: red"></div>
</form>
0 голосов
/ 15 февраля 2019

Так что, если я вижу это правильно, тогда «Добровольцы», если типа «радио», но в коде вы проверяете «флажок».Думаю, это должно привести к выходу из второго цикла всегда.

Для быстрой отладки я также предлагаю поместить несколько операторов console.log, чтобы вы могли видеть в консоли браузера, как далеко продвигается ваш код ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...