Как внедрить функцию в обработчик?

Question

[Darkness]

Не обязательно ответ, можно и псевдокод, просто в голове не могу связать их. Одну написал (валидация), а её в обработчик нужно засунуть ( не мой) и я впервые сталкиваюсь с аяксом, он просто не дает даже сделать if .. else .. Прошу подзатыльник и спасибо!
Код: https://codepen.io/AntonBrock/pen/daNWZR?editors=0010

$("#btn_ps").click(function(e) { 
		e.preventDefault();
            var form_data = $("#personalsale").serialize(); 
            $.ajax({
            type: "POST", 
            url: "/index.php?route=common/home/personal_form",
            data: form_data,
               success: function() {
                   $("#personal_sale_p").html('<span class="success_alert"><i class="fas fa-check-circle"></i> Вы успешно подписались на рассылку.</span>');
                     $('#personalsale').trigger( 'reset' );
               },
               error: function() {
               	    $("#personal_sale_p").html('<span class="success_alert"><i class="fas fa-times-circle"></i> Что-то пошло не так...</span>');
               }
            });
    }); 

// внедрить в обработчик >_<!
$(document).ready(function() {
	$("#email, #Email").blur(function() {
      if ($(this).val() != "") {
        var pattern = /^(?!.*@.*@.*$)(?!.*@.*\-\-.*\..*$)(?!.*@.*\-\..*$)(?!.*@.*\-$)(.*@.+(\..{1,11})?)$/;
  
        if ($(this).val() != "" && pattern.test($(this).val())) {
            
            $(this).tooltip('disable');
            $(this).removeClass("error_message");
            $(this).attr('title', '');
            $(this).attr('data-original-title', '');
          } else {
            $(this).tooltip('enable');
            $(this).attr('title', '');
            $(this).addClass("error_message");
            $(this).attr('data-original-title', 'Проверьте введённые данные');
        }
      }
    });
});

// keyUp for tooltip- hide
$(document).ready(function() {
$("#email").keyup(function() {
  if($(this).val() == "") {
      $(this).tooltip('hide');
}
});
});

Comments

[ThunderCat]

Что собственно вы хотите? Нифига не понятно. Четко опишите требуемый функционал.

[Darkness]

ThunderCat, мне нужно в первый код внедрить второй, после коммента. Чтобы при клике работал код после коммента точнее.

[ThunderCat]

Darkness, что-то такое:

$("#btn_ps").click(function(e) { 
    e.preventDefault();
_this = $("#email");
if (_this.val() != "") {
        var pattern = /^(?!.*@.*@.*$)(?!.*@.*\-\-.*\..*$)(?!.*@.*\-\..*$)(?!.*@.*\-$)(.*@.+(\..{1,11})?)$/;
  
        if (_this.val() != "" && pattern.test(_this.val())) {
            
            _this.tooltip('disable');
            _this.removeClass("error_message");
            _this.attr('title', '');
            _this.attr('data-original-title', '');
var form_data = $("#personalsale").serialize(); 
            $.ajax({
            type: "POST", 
            url: "/index.php?route=common/home/personal_form",
            data: form_data,
               success: function() {
                   $("#personal_sale_p").html('<span class="success_alert"><i class="fas fa-check-circle"></i> Вы успешно подписались на рассылку.</span>');
                     $('#personalsale').trigger( 'reset' );
               },
               error: function() {
               	    $("#personal_sale_p").html('<span class="success_alert"><i class="fas fa-times-circle"></i> Что-то пошло не так...</span>');
               }
            });
          } 
          else {
            _this.tooltip('enable');
            _this.attr('title', '');
            _this.addClass("error_message");
            _this.attr('data-original-title', 'Проверьте введённые данные');
        }
      }
            
    });

Answer 1

[coderisimo]

Все равно не понятно, что нужно ))). Вообще, здесь это самая распространненная проблема! ) Способность правильно и понятно сформулировать вопрос это первый шаг к получению ответа на него. Я иногда, когда пытался что-то здесь что-то спросить находил ответ сам в процессе написания вопроса! Вот, как бывает полезно сформулировтаь задачу правильно ))
Теперь по сути.
Что должна делать ф-ция в обработчкие? Я вижу , что на blur висит проверка. Какое отношение она имеет к резудьтату выполнения ajax запроса ?

Comments

[Darkness]

Окей, постараюсь еще раз сказать.

Мне нужно вторую функцию, где висит проверка внедрить до ajax запроса. Т.е. Вот ввели вы неверный email сразу показывает НЕверность введенных данных. И соответсвенно отправить форму нельзя, пустая она или неверано записан email.
А вот верно введешь, то никаких стилей не добавлять и отправка соотвественно разрешена.
Думаю, уже никак легче не смогу объяснить) Т.е. до ajax запроса должна висеть проверка, которая и даст либо success, либо error. Либо отпрвить форму, либо нет. Либо сразу показывает что неверно и отправить нельзя, либо верно и отправить можно)

[coderisimo]

Так ясно, но зачем тогда что-то вообще добавлять в ф-цию для отправки? Если данные некорректны , просто скрываем кнопку отправки и показываем ошибки. Если все ок, кнопка видна

либо :

$("#btn_ps").click(function(e) { 
    e.preventDefault();

//validateForm() - ф-ция, которая все проверят, показывает ошибку и возвращает 
// true / false  в зависимости от результата валидации.

if(!validateForm()) 
    return; // мы выходим из ф-ции,  никакой отправки не  будет! Хорошо бы показать сообщение юзеру


            var form_data = $("#personalsale").serialize(); 
            $.ajax({
            type: "POST", 
            url: "/index.php?route=common/home/personal_form",
            data: form_data,
               success: function() {
                   $("#personal_sale_p").html('<span class="success_alert"><i class="fas fa-check-circle"></i> Вы успешно подписались на рассылку.</span>');
                     $('#personalsale').trigger( 'reset' );
               },
               error: function() {
               	    $("#personal_sale_p").html('<span class="success_alert"><i class="fas fa-times-circle"></i> Что-то пошло не так...</span>');
               }
            });
    });

[Darkness]

Василий, К сожалению, до меня до сих пор не дошло, уже 4 час сижу и бьюсь, но все же не смог понять. Почему у меня сначала идет ajax , а после высвечивается ошибка об не правильной форме, но отправка уже была... даже блок схему могу скинуть)

[coderisimo]

Darkness, где-то что-то очень простое ))) .
ссылка на страницу со скриптом есть? можете в прочту кинуть )

[Darkness]

Василий, https://codepen.io/AntonBrock/pen/NogwMo?editors=0010
тут код, уже раз 100 измененный, но все тот же, попробуйте отправить форму)

[coderisimo]

Darkness,

ну и....

https://codepen.io/coderisimo-the-encoder/pen/omwaag

[Darkness]

Василий, Это действительно работает, но, если ввести верный email, а после удалить его и оставить поле пустым = отправка сработает)

[coderisimo]

Darkness, а сейчас ?
https://codepen.io/coderisimo-the-encoder/pen/omwaag

[Darkness]

Василий, теперь все отлично! Осталось в этом самому разобраться и понять где я копал не туда, огромное спасибо!

[coderisimo]

Darkness, там простой , очевидный код. Мы проверяем правильность имэйла и показываем или скрываем кнопку. Регулярка тоже другая. Удачи