Проблемы с alert в плагине jquery Validation

215

26 июля 2017, 20:24

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

(function() { 
  $("form[name='registration']").validate({ 
    invalidHandler: function(event, validator) { 
      $(".portfolio-error").css('display','block'); 
        $(".portfolio-error").css('color','#d85030'); 
        $(".portfolio-error").text("Неккоректный почтовый адрес."); 
      }, 
      errorPlacement: function(error, element) {return true}, 
        rules: { 
          getportfolio:{ 
            required:true, 
            email:true 
          }  
      }, 
      submitHandler: function() { 
      // $(".portfolio-error").css('display','block'); 
      // $(".portfolio-error").css('color','#659f13'); 
      // $(".portfolio-error").text("С вами свяжутся в ближайшее время"); 
        $("form[name='registration']").submit(function() { //Change 
          var th = $(this); 
          $.ajax({ 
            type: "GET", 
            url: "mail.php", //Change 
            data: th.serialize() 
          }).done(function() { 
            alert("Thank you!"); 
            setTimeout(function() { 
              // Done Functions 
              th.trigger("reset"); 
            }, 1000); 
          }); 
          alert('bad'); 
          return false; 
        }); 
      } 
  }); 
});

 #portfolio-cont > .uk-modal-dialog{ 
    background:transparent; 
  } 
  .container-portfolio{ 
    width:600px; 
    margin:0 auto; 
    border-top-left-radius:10px; 
    border-top-right-radius:10px; 
  } 
  .portfolio-header { 
    background: linear-gradient(to top, #EDF4B8, #DFE793); 
    border-top-left-radius:10px; 
    border-top-right-radius:10px; 
    color:#45434b; 
    font-size:30px; 
    padding:20px 0; 
    padding-left:20px; 
    box-shadow: 0px 0.25px 0px 0px #CED19F, 
                0px 0.5px 0px 0px #C7C99C, 
                0px 0.75px 0px 0px #CACCA5, 
                0px 1px 0px 0px #D9DBBA, 
                0px 1.25px 0px 0px #E8E9CE 
                ; 
    margin-bottom:1.25px; 
  } 
  .portfolio-header span{ 
    display:inline-block; 
    margin-left:25px; 
    font-size:20px; 
  } 
   
#getportfolio-error{ 
    display:block; 
    color:red; 
} 
.portfolio-error{ 
    color: #d85030; 
    text-shadow: 0 1px 0 #fff; 
    display:none; 
 
} 
.close-portfolio{ 
      float: right; 
    margin-right: 20px; 
    margin-top: 4px; 
} 
.close-portfolio:after{ 
  font-size:15px; 
} 
.container-body{ 
  background-color:white; 
  padding:20px; 
} 
.container-body input{ 
      width: 275px; 
    height: 10px; 
    background:#F5F5F5; 
    box-shadow: inset 0px 0px 10px 16px rgba(245,245,245,1); 
    padding:10px; 
    border:1px solid #D4D4D4; 
} 
.container-body button{ 
height: 30px; 
    width: 100px; 
    background:#71B9EB; 
    border-radius:2px; 
    border:1px solid #4377ab; 
    transition:0.2s ease; 
    color:black; 
 
    font-weight:700; 
} 
.container-body button:hover{ 
  box-shadow: inset 0px 0px 1px 1px #4684cb;}

<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,500,700"> 
	<meta charset="UTF-8"> 
	<title>teDocument</title> 
	<link rel="stylesheet" type="text/css" href="assets/css/uikit.min.css"> 
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
  <link rel="stylesheet" type="text/css" href="assets/css/uikit.min.css"> 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
        <div class="container-portfolio"> 
  <div class="portfolio-header"> 
    <i class="fa fa-envelope" aria-hidden="true"></i><span>Запрос на портфолио</span> 
    <a href="" class="uk-modal-close uk-close uk-close-alt close-portfolio" ></a> 
  </div> 
  <div class="container-body"> 
    <p>Отправте нам адрес вашей электронной почты для получения детального портфолио. Введеные Ваши данные будет видны только нам и будут использованы только ради отправки Вам наших работ.</p> 
   
  <form action="" name="registration"> 
    <input type="text" name="getportfolio" placeholder="Введите Ваш электронный адрес"> 
    <button type="submit">Отправить</button> 
  </form> 
  <hr> 
  <div class="portfolio-error"></div> 
  </div> 
  </div> 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
  <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>

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

Все вопросы

Подробнее о сайте site-vizitka-kiev.org.ua

ТОП-10

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

Парс через Html Agility Pack

Требуется спарсить города(сайт и xPath указаны в коде), но парсятся пустые строки(есть только outerhtml = " option value="spb> < /option" " - для питера, но нужен...

221

Динамическая перезагрузка плюсовых dll

Добрый деньЕсть приложение на C# в которое в процессе работы загружаются managed и unmanaged dll'ки

245

Перегрузка оператора ++

Здравствуйте, есть класс к которому нельзя прибавить больше 1 значения, в классе идет индексация эллементов, и прочии действия)

203

Отображение файлов архива

ЗдравствуйтеМожете помочь? Пользователь открывает выбранный архив и как сделать отображение списка файлов архива в wpf c#?

212