Проверить input value и присвоить class

388

17 мая 2017, 08:16

Уважаемые знатоки, подскажите пожалуйста элементарщину:

Есть форма:

<form class="form" id="f_questions" onsubmit="return checkForm_questions(this)">

Есть инпуты (их несколько, но вот 1, в качестве примера):

<input type="text" name="name" id="name_questions" value="" placeholder="Ваше имя">

Есть псевдо-кнопка сабмита:

<input class="btn1" type="submit" value="Получить ответ">

Надо: проверить на пустоту все инпуты и если они не пустые, то присвоить кнопке класс (class="btn-answer").

(зы, прошу прощения, если флуд) =)

Answer 1

$('#f_questions').focusout(function(){ 
  var empty = true; 
  $(this).find('input').each(function() { 
    if ($(this).val() == '') { 
      empty = true; 
      return false; 
    } 
    empty = false; 
  }); 
   
  if(!empty) { 
    $('.btn1').addClass('btn-answer') 
  } else { 
    $('.btn1').removeClass('btn-answer') 
  } 
});

.btn-answer { 
  color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form class="form" id="f_questions" onsubmit="return checkForm_questions(this)"> 
  <input type="text" name="name1" id="name_questions1" value="" placeholder="Ваше имя"> 
  <input type="text" name="name2" id="name_questions2" value="" placeholder="Ваше имя"> 
  <input type="text" name="name3" id="name_questions3" value="" placeholder="Ваше имя"> 
  <input type="text" name="name4" id="name_questions4" value="" placeholder="Ваше имя"> 
  <input class="btn1" type="submit" value="Получить ответ"> 
</form>

Answer 2

Вот мое решение(нам не нужно проверять пустой value или нет, а просто сразу все берем пустые и их изменяем):

let inputs = document.querySelectorAll('input[value=""]');
for (let i = 0; i < inputs.length; i++) {
    inputs[i].className = 'btn-answer';
}

Answer 3

 function checkForm_questions(form){
    let i = form.querySelectorAll('input[type="text"]');
    if([].every.call(i, (i) => {
       return !!i.value;
    })) form.querySelector('input[type="submit"]').className = "btn-answer";
    return false;
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Лучший способ инжекта скрипта в Chrome Extension

Задача: из background-скрипта получить код в текстовом представлении и добавить его в окно браузера как можно быстрее и в то же время чтобы это...

350

javascript

Почему на изменения DOM не реагирует Google plus

Добрый день, хотел написать себе скрипт для Google plus, который должен был мне помогать с комментариями, под опубликованными анонсами в сообществе

265

javascript

Авторизация и сессии при помощи php + ajax

Пишу дипломную задачу и появился вопрос в связке php и ajaxЯ уже сделал БД, написал верстку логин-пейдж, скрипт php для проверки хешированных паролей

411

javascript

Как навесить событие на один из сабмитов в форме?

Есть форма с 2 сабмитами, необходимо отслеживать поле #field_1 и после запустить клик по кнопке #submit_1Накатал быстро на jQuery - но срабатывает, - подскажите...

243