Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Валидация формы с помощь jQuery (https://javascript.ru/forum/jquery/46084-validaciya-formy-s-pomoshh-jquery.html)

Antistar 27.03.2014 17:27

Валидация формы с помощь jQuery
 
Необходимо проверить форму на корректность ввода с помощью jQuery и отправить данные через Аякс

CMS Wordpress
Вёрстка с использованием Bootstrap 3

подключил скрипты:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.9.0.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.validate.min.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.form.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/validator.js"></script>


код формы
<form id="inForm" name="inForm" action="<?php bloginfo('template_directory'); ?>/ajaxForm.php" method="post">
			<div class="form-group">
			 <label for="Name">Имя<em></em></label>
		     <input type="text" class="form-control" id="Name" name="Name" placeholder="Имя" value="">
			</div>
			<div class="form-group">
			 <label for="Phone">Телефон<em></em></label>
		     <input type="text" class="form-control" id="Phone" name="" placeholder="Телефон" value="">
			</div>
			<div class="form-group">
			 <label for="Email1">Email адрес<em></em></label>
			 <input type="text" class="form-control" id="Email1" placeholder="Email адрес" value="">
			</div>
			<button type="submit" id="submit" class="btn btn-default">Отправить</button>
		</form>


код валидатора validator.js
$(document).ready(function(){
  var options = { 
  	target: "#output",
    timeout: 3000
  };
  
  $("#inForm").validate({
  	submitHandler: function(form) {
  	  $(form).ajaxSubmit(options);
    },
    focusInvalid: false,
    focusCleanup: true,
    rules: {
      Name: {
      	required: true,
      	minlength: 2,
      	maxlength: 12
      },
	  Phone: {
      	required: true,
      	digits: true
      },
      Email1: {
      	required: true,
      	email: true
	  },
	},
    messages: {
      Name: {
        required: "Укажите свое имя, пожалуйста!",
        minlength: "Не менее 2 символов",
        maxlength: "Не более 12 символов"
      },
	  Phone: {
        required: "Укажите свой телефон!",
        digits: "Только цифры",
      },
      Email1: {
        required: "Нужно указать email адрес",
        email: "Email адрес должен быть корректным"
      },
    },
    errorPlacement: function(error, element) {
      var er = element.attr("name");
      error.appendTo( element.parent().find("label[@for='" + er + "']").find("em") );
    }
});
});


Ничего не работает, по теории в лейбле над инпутами должно выводиться сообщение о некорректном вводе, но не происходит ничего от слова "совсем". Подскажите нубику, где косяк:help:

рони 27.03.2014 17:35

Antistar,
41 строка попробуйте запятую убрать и 36 и 26

Antistar 27.03.2014 17:42

Цитата:

Сообщение от рони (Сообщение 304674)
Antistar,
41 строка попробуйте запятую убрать и 36 и 26

Не помогло.

рони 27.03.2014 17:51

Antistar,
@ это тоже нафиг!

рони 27.03.2014 17:55

и name пропишите в форме для телефона и адреса

Antistar 27.03.2014 18:03

Вы мой кумир и просветитель криворуких нубов) Работает))) Спасибо:thanks:


Часовой пояс GMT +3, время: 19:40.