Помощь с checkbox и required

<Evgenij> · 28.02.2016

Помощь с checkbox и required

Народ помогите плиз!

Есть checkbox и есть поле ввода, необходимо, чтобы встроенная проверка (с помощью тега required) браузером осуществлялась только если выбран checkbox.

Готовых решений в гугле не нашел, а сделать самостоятельно не могу - в javascript полный чайник.

Нужно что-то такое onchange = 'функцияВклВыклRequired(Имя_поля);'

Как можно включать/выключать такую проверку?

kosyak · 28.02.2016

ты на правильном пути. просто погугли как добавлять атрибут в dom элемент

Mr. Q · 28.02.2016

На onchange вызываешь метод ToggleValidation().
А в теле метода сеттишь или убираешь аттрибут "required".

<Evgenij> · 28.02.2016

Всем спасибо за советы, вроде бы получилось:

Код:

function onOfRequired()
  {
    if(id_чекбокс.checked)
      {
        id_поля.required='on';
      }
      else
        {
          id_поля.required = '';
        }
  }
</script>

onchange='onOfRequired()'

Вроде бы работает, но может кто-то более "правильное" решение подскажет?

PS еще раз повторюсь, с javascript совсем не дружу, поэтом по возможности писать код вместе с советами

ieronymus · 28.02.2016

Ну вообще то required это булевский атрибут, поэтому правильнее было бы так

Код:

function onOfRequired()
  {
    if(id_чекбокс.checked)
      {
        id_поля.required = [B]true[/B];
      }
      else
        {
          id_поля.required = [B]false[/B];
        }
  }

Либо по старинке

Код:

element.setAttribute("required", "");
element.removeAttribute("required");

<Evgenij> · 28.02.2016

ieronymus, согласен, остановился на первом варианте он короче))

А кто подскажет, почему если просто вызвать функцию, скрипт не срабатывает?
при таком вызове onchange='onOfRequired()' - работает
а если просто onOfRequired(); - функция вызывается, а код не срабатывает
Такое ощущение, скрипт не может получить состояние чекбокса, изменил код на:

Код:

function onOfRequired()
  {
    if (document.getElementById('id_чекбокс').checked)
      {
        id_поля.required = true;
      }
      else
        {
          id_поля.required = false;
        }
  }

ситуация не поменялась...

*Момент важный, поскольку при первой загрузке страницы необходимо проверить состояние чекбокса, и в зависимости от ситуации вкл/выкл required.

ieronymus · 28.02.2016

Потому что функция у тебя - это обработчик события onchange. Нет события - функция не вызывается. Почитай про асинхронность в JavaScript.
Чтобы функция вызывалась при загрузке тоже, можешь засунуть вызов функции в обработчик события window.onload, например.

<Evgenij> · 28.02.2016

Может я чего-то не понимаю, но разве функцию нельзя вызвать
вот так:

Код:

<script>
 onOfRequired();
</script>

С кодом ниже, при загрузке страницы, сообщение "Функция вызвана" появляется, следовательно, функция вызывается, разве не так?

Код:

<script>
function onOfRequired()
  {
    alert('Функция вызвана');
    if (document.getElementById('id_чекбокс').checked) //сдается мне, здесь что-то не совсем так, как надо
      {
        id_поля.required=true;
      }
      else
        {
          id_поля.required=false;
        }
  }
onOfRequired(); //Вызываем функцию
</script>

С window.onload та же ситуация

ieronymus · 28.02.2016

Скрипт где подключается? Внутри тега head? Или где-то в конце body? Для наглядности можешь поставить свой alert внутрь условного оператора.
Кстати, а не проще сразу в верстке забить значения по умолчанию? А потом уже скриптом динамически менять эти атрибуты.

<Evgenij> · 29.02.2016

Скрипт подключается внутри <body></body>, вставлял между <head></head>, перед/после стилей, ситуация не меняется: при вызове функции через onchange, onclick и т.д. все работает, при простом вызове функции - не срабатывает условие if.

Значение required по умолчанию устанавливать не вариант, поскольку при отключенном javascript у пользователя поле будет всегда обязательным для проверки, а это не гуд...

В общем пока решил проблему тем, что навесил на кнопку 'submit' onclick='onOfRequired()', чтобы перед отправкой проверялась ситуация с чекбоксом и полем.

Как еще можно указать на нужный элемент кроме этого:

Код:

document.getElementById('id_чекбокс')

?

kosyak · 29.02.2016

<Evgenij> сказав(ла):
при отключенном javascript

Выкиньте старье в котором прочитали такие требования. Сейчас выключенный джаваскрипт проблема и ответственность пользователя на все 100%. В Edge вообще без знания административных интрументов вы его не отлючите, в браузере нет такой опции.

ieronymus · 29.02.2016

<Evgenij> сказав(ла):
Скрипт подключается внутри <body></body>, вставлял между <head></head>, перед/после стилей, ситуация не меняется: при вызове функции через onchange, onclick и т.д. все работает, при простом вызове функции - не срабатывает условие if.

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

<Evgenij> · 01.03.2016

ieronymus сказав(ла):
Правильно, потому что, скрипты парсятся последовательно вместе со всем остальным содержимым страницы и выполняются синхронно. И если в момент выполнения функции браузер еще не загрузил весь документ полностью, то нужного элемента может просто не существовать. Поэтому условие и не срабатывает.
А onchange, onclick это обработчики событий, они всегда начинают выполняться только после полной загрузки страницы.

Спасибо, действительно в этом дело было.