Валидация формы по нажатию на кнопку

403

14 февраля 2017, 20:11

Добрый день.

Вопрос довольно нубский, но прошу помочь, так как JS только начал осваивать, а jQuery вообще еще не вникал.

Есть страница, с готовой валидацией инпутов (радио) на выбраны они или нет. Если ответы не выбраны - кнопка по умолчанию disabled и текст Please, give answers to all questions. Если выбраны - идем дальше.

Но валидация работает в общем по странице.

Надо как то ее переделать, что бы при нажатии на кнопку submit запускалась проверка валидности. Если все ок - запускаем action="http://google.com", если нет - показываем сообщение из span.warning-text. Ну и никакого disabled на кнопке не использовать уже.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<!-- RADIO SELECTION VALIDATION SCRIPT--> 
<script type="text/javascript"> 
  var a01 = $('input[name=answer-1]'); 
  var a02 = $('input[name=answer-2]'); 
  var a03 = $('input[name=answer-3]'); 
  var a04 = $('input[name=answer-4]'); 
  var a05 = $('input[name=answer-5]'); 
   
  validate(); 
   
  $("input[type='radio']").change(validate); 
   
  function validate() { 
    if ($(a01).is(':checked') && $(a02).is(':checked') && $(a03).is(':checked')&& $(a04).is(':checked')&& $(a05).is(':checked')) { 
        $(".btn#submit").removeAttr("disabled", false); 
        $(".warning-result-text").css("opacity", '0'); 
    } else { 
        $(".btn#submit").attr("disabled", true); 
    } 
  } 
</script>

<form class="get-result-form" action="http://google.com"> 
  <span class="warning-text">Please, give answers to all questions</span> 
  <input class="btn btn-submit" id="submit" type="submit" value="Submit answers" disabled="true"> 
</form>

Answer 1

Валидацию проверять надо на php либо js клиентский язык и его обмануть проще отправляй данные на серв и проверяй там если все ок он перекинет дальше,если нет перекинет тебя на эту же страницу и сданными об ошибке.

Answer 2

В общем решил этот вопрос так:

$('.get-result-form').submit(function valForm() { 
        var a01 = $('input[name=answer-1]'); 
        var a02 = $('input[name=answer-2]'); 
        var a03 = $('input[name=answer-3]'); 
        var a04 = $('input[name=answer-4]'); 
        var a05 = $('input[name=answer-5]'); 
         
        validate(); 
         
        $("input[type='radio']").change(validate); 
         
        function validate() { 
        	if ($(a01).is(':checked') && $(a02).is(':checked') && $(a03).is(':checked')&& $(a04).is(':checked')&& $(a05).is(':checked')) { 
                   this.submit(); 
        	} else { 
              $(".warning-result-text").css("opacity", '1'); 
              event.preventDefault(); 
        	} 
        } 
      });

Создание Интернет магазина Ивано-Франковск

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

Все вопросы

ТОП-10

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

Как вставить фоновую картинку

Верстаю макетКак вставить фоновую картинку так, чтобы она была как положено на весь экран и не съезжала?

363

CSS

Псевдоэлемент по всей длине текста

Добрый деньЕсть заголовок, для которого нужно сделать заднюю черту, как показано на изображении

270

CSS

Как сверстать этот элемент

Подскажите, как бы вы сверстали элемент,рука со смартфоном,я новичок не могу понять лучше сделать его background'ом или img ?Если бэкграундом ,то к какому...

258

CSS

Bootstrap footer

Появился небольшой вопрос, связанный с версткой на bootstrap 3

311