Валидация форм (радиокнопки)

Вопрос-ответ JavaScript
1

Добрый день! Помогите пжт настроить валидацию радиокнопок: если ни одна кнопка не активна - появляется сообщение об ошибке.
И второй вопрос: как настроить фокусировку на поле с ошибкой при попытке отправки формы (пробовали, не во всех браузерах срабатывает).

Введите ФИО:
Название:
Выберите размещение: free paid vip

Спасибо за помощь!

2

валидацию радиокнопок: если ни одна кнопка не активна - появляется сообщение об ошибке.

Через доступ к узлу кнопки и считывания ее value. У неактивной будет или null или какое другое falsy значение.

как настроить фокусировку на поле с ошибкой при попытке отправки формы

Метод .focus.

пробовали, не во всех браузерах срабатывает

Лучше всего для такого род задач использовать библиотеку или фреймверк. Из того что ты описывашь кажется что jquery самый подходящий вариант. В нее более лаконичный апи чем просто у dom и кроссбраузерная поддержка.

Чтобы можно было точно понять в чем именно загвоздка всегда прикладывай код вместе с вопросом.

4

Пользуйся вот этой кнопкой или вот такой разметкой (прямо как в markdown) чтобы код оставался кодом. Движок форума пытается интерпретировать html без подобной обертки, и не подсвечивает js

Screenshot 2024-02-02 at 08.49.59
Screenshot 2024-02-02 at 08.49.591156×712 63.7 KB

6

Спасибо!

7 
<form name='info' method='post' action='' novalidate>
<table>
<tr><td>Введите ФИО:</td><td><input type='text' name='author' style='width: 450px'><span id='authorErr' style='color:red'></span></td></tr>
<tr><td>Название:</td><td><input type='text' name='sitename' style='width: 450px'><span id='sitenameErr' style='color:red'></span></td></tr>
<tr><td>Варианты:</td><td style='padding: 2px 0 2px 0'> 
  <input id='r1' type='radio' onclick='clickRadio(this)' name='radio' value=1><span id='place'>free</span>
  <input id='r2' type='radio' onclick='clickRadio(this)' name='radio' value=2><span id='place'>paid</span>
  <input id='r3' type='radio' onclick='clickRadio(this)' name='radio' value=3><span id='place'>vip</span>
<span id='placeErr' style='color:red'></span>
</td></tr>
<tr><td><input type='submit' value='Опубликовать'></td><td></td></tr>
</table>
</form>    
 
<script> 
"use strict";
var formTag = document.forms.info;
var authorField = formTag.elements.author.addEventListener('blur', validateAuthor, false);
var sitenameField = formTag.elements.sitename.addEventListener('blur', validateSitename, false);
var placeField = document.getElementById('place').addEventListener('change', validatePlace, false);
 
function validateAuthor(eo) {
 eo = eo || window.event;
 var formTag = document.forms.info;
 var field = formTag.elements.author;
 var fieldValue = field.value.toString().trim();
 var fieldError = document.getElementById('authorErr');
 if (validateText(fieldValue) === false) {
  fieldError.innerHTML = 'Повторите попытку!';
  field.focus();   // не срабатывает переход на другое поле в Хроме в случае ошибки (фокусировка на ошибке)
  eo.preventDefault();
  return;  
 }
 else {
    fieldError.innerHTML = '';
    return true;
  }
}
 
function validateSitename(eo) {
  eo = eo || window.event;
  var formTag = document.forms.info;
  var field = formTag.elements.sitename;
  var fieldValue = field.value.toString().trim();
  var fieldError = document.getElementById('sitenameErr');
  if (validateText(fieldValue) === false) {
    fieldError.innerHTML = 'Повторите попытку!';   
    return false;   
   }
   else {
    fieldError.innerHTML = '';
    return true;
   }
}
 
function validateText(a) {
  while (Boolean(a) === false || a == "") return false;
  return true;
}
 
function validatePlace(eo) {
  eo = eo || window.event; 
  var formTag = document.forms.info;
  var field = document.getElementById('place');
  var fieldError = document.getElementById('placeErr');  
 
   if (!document.getElementById('r1').checked&&!document.getElementById('r2').checked&&!document.getElementById('r3').checked) {
    fieldError.innerHTML = 'Выберите вариант!';    
     return false;
    }
      else {
      fieldError.innerHTML = '';     
      return true;
    }
}
 
function clickRadio(el) {
  var siblings = document.querySelectorAll("input[type='radio'][name='" + el.name + "']");
  for (var i = 0; i < siblings.length; i++) {
    if (siblings[i] != el)
      siblings[i].oldChecked = false;
  }
  if (el.oldChecked)
    el.checked = false;
  el.oldChecked = el.checked;
}
 
formTag.addEventListener('submit', SubmitForm, false);
 
function SubmitForm(eo) {
  eo = eo || window.event;
 
  validateAuthor(eo);
  validateSitename(eo);
  validatePlace(eo);
   
   if ( !eo ) {
   field.focus();  // фокусировка на ошибке не срабатывает в случае отправки формы
   eo.preventDefault();
  }
}
 
</script>
8

Конкретно в этой строке проблема в том что (!eo) проверяет наличие значения в переменной eo. А в ней значение всегда будет. Код просто не заходит внутрь блока if.

Подобные вещи решаются чисто “механически” по алгоритму:

  1. Я ожидаю увидеть изменение поведения на странице (в твоем случае неотправку формы)
  2. Я нахожу кусок кода который отвечает за ожидаемое поведение (это блок условия что я подсветил)
  3. Я запускаю debugger до того места где запускается ожидаемое поведение (в твоем случае это прямо перед if) и прохожу пошагово, проверяя почему не выполняются (или выполняются не так как я ожидаю) строки кода.
    3.1 Еще есть вариант расставлять console.log - и, и сравнивать через низ ожидаемые значения переменных и фактические. Я чаще обмазываюсь console.log-ами чем лезу в debugger. Но это дело вкуса и привычки. Ты ищи удобный для себя способ. Оба работают.

Я это все сделал в уме, потому что уже натренировался за 10+ лет.

9

Понятно, спасибо за помощь!

1 лайк