Блог

Главная - Вопросы по программированию - Переключатель Проверки Формы

Переключатель Проверки Формы

#javascript #html

Вопрос:

Я хочу проверить свою форму в HTML с помощью JavaScript, в частности, чтобы проверить, нажимает ли пользователь один из переключателей. Часть моего кода выглядит следующим образом:

HTML:

 <fieldset>
            <legend>Your unit</legend>
                <label for="COS10011"><input type="radio" name="unit" id="COS10011">COS10011</label>
                <label for="COS60004"><input type="radio" name="unit" id="COS60004">COS60004</label>
                <label for="COS60007"><input type="radio" name="unit" id="COS60007">COS60007</label><BR>
                <p><label>Your Tutor: </label>
                    <select name="tutor" id="tutor">
                        <option value="tutor1" selected="selected">Tutor 1</option>
                        <option value="tutor2">Tutor 2</option>
                        <option value="tutor3">Tutor 3</option>
                    </select>
                </p>
        </fieldset>

язык JavaScript:

 function isUnitSelected(){
    var selected = false;
    var isCOS10011 = document.getElementById("COS10011").checked;
    var isCOS60004 = document.getElementById("COS60004").checked;
    var isCOS60007 = document.getElementById("COS60007").checked;
    
    if (isCOS10011 || isCOS60004 || isCOS60007)
        selected = true; //we haven't used {}. BE CAREFUL about adding extra lines
    else{
        selected = false;
        gErrorMsg = gErrorMsg   "Select a sex for your catn"
    }
    
    return selected;
}

Комментарии:

1. Сначала вы можете проверить одну из переключателей по умолчанию. Таким образом, вам не придется проверять, выбран ли какой-либо из них

2. Можете ли вы уточнить, в чем заключается проблема? Как используется ваш код, как он выходит из строя? Вот как проверить в событии отправки: jsfiddle.net/rm9s0pv4

3. @firatozcevahir а, понятно, могу я узнать, как это сделать?

4. Просто добавьте checked атрибут к одной из переключателей. Подобный этому: <input type="radio" name="unit" id="COS10011" checked>

5. @ChrisG отображаемый JavaScript не смог проверить, выбрана ли какая-либо из кнопок, как будто это ничего не делает с формой

Ответ №1:

Вы можете просто добавить required атрибут к одной из ваших переключателей в группе, это вызовет собственную проверку:

 <form action="#">
  <fieldset>
    <legend>Your unit</legend>
    <label for="COS10011"><input type="radio" name="unit" id="COS10011" required>COS10011</label>
    <label for="COS60004"><input type="radio" name="unit" id="COS60004">COS60004</label>
    <label for="COS60007"><input type="radio" name="unit" id="COS60007">COS60007</label>
    <br/>
    <p>
      <label>Your Tutor: </label>
      <select name="tutor" id="tutor">
        <option value="tutor1" selected="selected">Tutor 1</option>
        <option value="tutor2">Tutor 2</option>
        <option value="tutor3">Tutor 3</option>
      </select>
    </p>
  </fieldset>
  <button>submit</button>
</form>

Версия JS:

 function isUnitSelected() {
  const radios = document.querySelectorAll('input[name="unit"]');
  const selected = [...radios].some(radio => radio.checked);
  if (!selected) {
    let gErrorMsg = "Select a sex for your catn";
    console.log(gErrorMsg);
  }
  return selected;
} 
 <form action="#" onsubmit="return isUnitSelected()">
  <fieldset>
    <legend>Your unit</legend>
    <label for="COS10011"><input type="radio" name="unit" id="COS10011">COS10011</label>
    <label for="COS60004"><input type="radio" name="unit" id="COS60004">COS60004</label>
    <label for="COS60007"><input type="radio" name="unit" id="COS60007">COS60007</label>
    <br/>
    <p>
      <label>Your Tutor: </label>
      <select name="tutor" id="tutor">
        <option value="tutor1" selected="selected">Tutor 1</option>
        <option value="tutor2">Tutor 2</option>
        <option value="tutor3">Tutor 3</option>
      </select>
    </p>
  </fieldset>
  <button>submit</button>
</form>

Комментарии:

1. будет ли это означать, что все переключатели должны быть выбраны?

2. @cpw да, вы можете увидеть в приведенной выше демонстрации, если какое-либо радио выбрано из группы, то форма отправляется

3. это будет веб-проверка по умолчанию, верно? но мне нужна другая проверка, та, которая показывает всплывающее окно, если какая-либо часть формы не заполнена

4. в собственной проверке @cpw также есть крючки JavaScript, см. developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/…

5. @cpw проверьте второй фрагмент с помощью проверки custsom JS

Ответ №2:

Работай Потрясающе

 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<fieldset>
            <legend>Your unit</legend>
                <label for="COS10011"><input type="radio" name="unit" id="COS10011" class="radio" value="1">COS10011</label>
                <label for="COS60004"><input type="radio" name="unit" id="COS60004" class="radio" value="2">COS60004</label>
                <label for="COS60007"><input type="radio" name="unit" id="COS60007" class="radio"  value="3">COS60007</label><BR>
                <p><label>Your Tutor: </label>
                    <select name="tutor" id="tutor">
                        <option value="1" selected="selected">Tutor 1</option>
                        <option value="2">Tutor 2</option>
                        <option value="3">Tutor 3</option>
                    </select>
                </p>
        </fieldset>
</body>
<script>
    
    $(document).ready(function () {
       $('.radio').click(function () {
           selectElement('tutor', $(this).val());
       });
   });
   

  function selectElement(id, valueToSelect) {    
      let element = document.getElementById(id);
      element.value = valueToSelect;
    }

    
</script>
</html>

Ответ №3:

Вы можете использовать document.getElementsByName это для этого.

 function checkIt(){
     let unit=document.getElementsByName("unit");
   let selected = false;
   for (let i=0;i<unit.length;i  ){
        if (unit[i].checked){
        selected = true;
        break;
      }
   }
   if (!selected){
    gErrorMsg = gErrorMsg   "Select a sex for your catn";
    alert(gErrorMsg);
   }
   return selected;
} 
 <fieldset>
    <legend>Your unit</legend>
    <label for="COS10011"><input type="radio" name="unit" id="COS10011" >COS10011</label>
    <label for="COS60004"><input type="radio" name="unit" id="COS60004">COS60004</label>
    <label for="COS60007"><input type="radio" name="unit" id="COS60007">COS60007</label>
    <br/>
    <p>
      <label>Your Tutor: </label>
      <select name="tutor" id="tutor">
        <option value="tutor1" selected="selected">Tutor 1</option>
        <option value="tutor2">Tutor 2</option>
        <option value="tutor3">Tutor 3</option>
      </select>
    </p>
  </fieldset>
  <button onclick="checkIt()">Go</button>

Комментарии:

1. ах, я понимаю, но есть ли способ поместить все это в файл js, как оно есть в отдельном файле, вместо этого <кнопка onclick=»CheckIt()»>Перейти<кнопка onclick=»CheckIt()»></кнопка>

2. Я изменил checkIt функцию, чтобы удовлетворить ваши потребности, вы просто копируете ее содержимое в свою функцию «isUnitSelected», она должна работать.

3. и он должен показывать всплывающее сообщение, если выбрано не радио

4. Вы проверили возвращаемое значение?

5. Я обновил сценарий, он должен соответствовать вашим потребностям.

Метки: