JavaScript - Проверка выбора радио кнопки

Question

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

Я нашел функцию, которая делает это здесь: Radio button validation in javascript

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

Я попытался сделать полную противоположность тому, как тесты ответов для аргументов, так как ответ использует var formValid = false;, и я использую valid = true;.

Я прокомментировал функцию проверки переключателя функции и вернул ее аргументам по умолчанию (и очистил плохое использование фигурных скобок ответа).

function checkForm() { 
    var valid = true; 
    var radios = document.getElementsByName("smoking"); 

    if (!retext.test(document.myform.textfield.value)) { 
      document.myform.textfield.style.border = "3.5px solid red"; 
      document.getElementById("text").innerHTML = "Invalid text."; 
      document.getElementById("text").style.display = "block"; 
      valid = false; 
    } 

    if (!re.test(document.myform.email.value)) { 
     document.myform.email.style.border = "3.5px solid red"; 
     document.getElementById("emailwarn").innerHTML = "Invalid email."; 
     document.getElementById("emailwarn").style.display = "block"; 
     valid = false; 
    } 

    if (!retel.test(document.myform.tel.value)) { 
     document.myform.tel.style.border = "3.5px solid red"; 
     document.getElementById("telwarn").innerHTML = "Invalid telephone number."; 
     document.getElementById("telwarn").style.display = "block"; 
     valid = false; 
    } 

    /*var i = 0; 
    while (!valid && i < radios.length) { 
     if (radios[i].checked) { 
      valid = true; 
     } 
     i++; 
    } 

    if (!valid) { 
     document.getElementById("radiowarn").innerHTML = "Please select one."; 
     document.getElementById("radiowarn").style.display = "block"; 
    }*/ 

    return valid; 
} 

---

<form name="myform" method="POST" action="http://manutd.com" onsubmit="return checkForm()"> 
    <fieldset> 
     <legend>Hi</legend> 
     <label>Random text: </label> 
     <input type="text" name="textfield"> 
     <div id="text"></div> 
     <label>Email: </label> 
     <input type="email" name="email"> 
     <div id="emailwarn"></div> 
     <label>Tel: </label> 
     <input type="tel" name="tel" maxlength="11"> 
     <div id="telwarn"></div> 
     <label>Smoking: </label> 
     <input type="radio" name="smoking" value="1"> 
     <label>Non-smoking: </label> 
     <input type="radio" name="smoking" value="2"> 
     <div id="radiowarn"></div> 
     <input type="submit" value="Submit Form"> 
     <input type="reset" value="Reset Form"> 
    </fieldset> 
</form> 

Answer 1

$(document).ready(function() { 
    $('.smoking').on('change', function() { 
     var radiosSmoking = document.getElementsByName('smoking'); 
     if (radiosSmoking[0].checked) { 
      console.log('smoking checked') 
     } else if (radiosSmoking[1].checked) { 
      console.log('no smoking checked') 
     } 
    }); 
}); 

Fiddle Reference

Другого вариант:

var radiosSmoking = document.getElementsByName('smoking'); 
    if (!(radiosSmoking[0].checked || radiosSmoking[1].checked)) { 
     valid = false; 
    } 

Надеется, что это помогает.

Answer 2

Попробуйте эту функцию:

function isRadioChecked(form, name) { 
    var radios = form.elements[name]; 
for (i=0, radios.length;i++) { 
    if (radios[i].checked == true) { 
     return true; 
    } 
} 
    return false; 
} 

Answer 3

Попробуйте это,

Обновите радио проверочный код кнопки ниже в порядке ...

var radios = document.getElementsByName("smoking"); 
     var i = 0 
     while (i < radios.length) { 
      if (radios[i].checked) { 
       return true; 
      } 
      else 
      { return false; } 
      i++; 
     } 

Answer 4

Попробуйте

Пожалуйста, включите Jquery 1.7.2 в файл

Javascript

function checkForm() { 
    var valid = false; 
    var radios = document.getElementsByName("smoking"); 

    var i = 0; 
    while (!valid && i < radios.length) { 
     if (radios[i].checked) { 
      valid = true; 
     } 
     i++; 
    } 

    if (!valid) { 
     document.getElementById("radiowarn").innerHTML = "Please select one."; 
     document.getElementById("radiowarn").style.display = "block"; 
    } 

    return valid; 
} 

Working Fiddle