Не работает валидация формы на jquery

237
24 июля 2017, 12:46

Не работает валидация формы на jquery. Не могу понять почему. В js и jquery я новичок. Валидация нужна только на стороне клиента.

Мой код

$(document).ready(function() { 
  $function() { 
    var field = new Array('name', 'phone'); 
 
    $('form').submit(function() { 
      var error = 0; 
      $('form').find('input').each(function() { 
        for (var i = 0; i < field.length; i++) { 
          if ($(this).attr('name') == field[i]) { 
            if (!$(this).val()) { 
              $(this).css('border', 'red 1px solid'); 
              error = 1; 
            } else { 
              $(this).css('border', 'none'); 
            } 
          } 
        } 
      }) 
      if (error = 0) { 
        return true; 
      } else { 
        if (error = 1) var err_text = 'Not all fields are filled!'; 
        $('.messenger').html(err_text); 
        $('.messenger').fadeIn('slow'); 
        return false; 
      } 
    }) 
  } 
});
<div class="formBlcok"> 
  <h3>Trial Class</h3> 
  <form action="" method="POST"> 
    <p><input value="" name="name" placeholder="Enter your name" type="text"></p> 
    <p><input value="" name="phone" placeholder="Enter your phone" type="text"></p> 
    <select placeholder="blabla" name=" " id=" "> 
	  <option value=" ">Chose your class</option> 
	</select> 
  </form> 
  <div class="messenger"></div> 
  <button type="submit" name="submit" class="TryI ">Try it</button> 
</div>

Answer 1

Кнопка отправки формы и блок с сообщением ошибок нужно поместить в саму форму:

var field = new Array('name', 'phone'); 
 
$('form').submit(function() { 
  var error = 0; 
  $('form').find('input').each(function() { 
    for (var i = 0; i < field.length; i++) { 
      if ($(this).attr('name') == field[i]) { 
        if (!$(this).val()) { 
          $(this).css('border', 'red 1px solid'); 
          error = 1; 
        } else { 
          $(this).css('border', 'none'); 
        } 
      } 
    } 
  }); 
  if (error = 0) { 
    return true; 
  } else { 
    if (error = 1) var err_text = 'Not all fields are filled!'; 
    $('.messenger').html(err_text); 
    $('.messenger').fadeIn('slow'); 
    return false; 
  } 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="formBlcok"> 
  <h3>Trial Class</h3> 
  <form action="" method="POST"> 
    <p><input value="" name="name" placeholder="Enter your name" type="text"></p> 
    <p><input value="" name="phone" placeholder="Enter your phone" type="text"></p> 
    <select placeholder="blabla" name="sel" id="sel"> 
      <option value=" ">Chose your class</option> 
    </select> 
    <div class="messenger "></div> 
    <button type="submit " name="submit " class="TryIt ">Try it</button> 
  </form> 
</div>

На самом деле, не пойму, для чего вам цикл в цикле, поэтому код можно сократить до такого вида:

$('form').submit(function() {
  var error = 0;
  $(this).find('input').each(function() {
    if (!$(this).val()) {
      $(this).css('border', 'red 1px solid');
      error = 1;
    } else {
      $(this).css('border', 'none');
    }
  });
  if (error = 0) {
    return true;
  } else {
    if (error = 1) var err_text = 'Not all fields are filled!';
    $('.messenger').html(err_text);
    $('.messenger').fadeIn('slow');
    return false;
  }
});
READ ALSO
Как сделать так, чтобы фон сужался только справа и слева?

Как сделать так, чтобы фон сужался только справа и слева?

Всем привет! Есть вот такая секция на сайтеНадо чтобы при изменении размера экрана/браузера(то есть при адаптиве), фон сужался только слева...

211
Переключение overflow-y у модального окна и body

Переключение overflow-y у модального окна и body

Всем приветЕсть модальное окно, которое выезжает сверху

252
Как c Unity запросить значения из Android SharedPreference?

Как c Unity запросить значения из Android SharedPreference?

У меня в Unity проекте есть несколько объектов, мне нужно их включать и выключать через стандартный ListPreference, как я могу из C# скрипта запросить...

227