Проверка формы электронной почты AJAX в загруженном div AJAX?

Я создал довольно простой сайт, который загружает весь его контент через jquery .load() функции, когда вы нажимаете на навигационные ссылки, и это прекрасно работает. Теперь я хочу загрузить контактную форму электронной почты с проверкой в ​​стиле AJAX, которая предупреждает пользователя о недопустимых полях ввода перед запуском отправки php.

Другими словами, пользователь нажимает навигационную ссылку для "связаться со мной", и форма загружается в раздел содержимого. Если пользователь вводит неверное имя или адрес электронной почты и нажимает кнопку Отправить, рядом с этими полями ввода появятся соответствующие сообщения об ошибках. Мне все равно, что происходит после того, как форма прошла, будь то всплывающее окно или страница перенаправления.

Я пытался понять это в течение нескольких недель, и я готов сдаться. Форма загружается нормально, но я не могу понять базовую конструкцию для получения загруженной AJAX-формы для ответа пользователю без перезагрузки страницы и очистки их полей. Я даже заставил часть отправки формы php работать именно так, как я хочу, но заставить клиентские сценарии работать с функциями php на стороне сервера кажется трудным.

Это вообще возможно? Как я должен идти об этом? Каковы основные концепции и инструменты для чего-то подобного?

Источник

2 ответа

Решение

Я получил форму для работы с помощью плагина проверки jquery! Спасибо Правину за предложение. Это отличный инструмент.

Основная проблема заключалась в том, что я действительно не оборачивался.load(). Как только я использовал функцию обратного вызова.load (), проверка прошла нормально. Я создал внешний файл javascript с именем contact.js, который содержит правила подключаемого модуля проверки и submitHandler, вложенные в функцию contactPageScript(). Я вызвал contactPageScript() с обратным вызовом.load () и вуаля:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/contact.js"></script>

<script>
  $(document).ready(function(){
    $("div#menu ul li a").click(function() {
      var whichPage = $(this).attr('href');
      $('div#page_content').load(($(this).attr('href') + ' #contentB'), function(){
                    if (whichPage == 'contact.html') {
                        contactPageScript();
                    }}
      );
    });
  });
</script>
</head>

Скрипт валидации, конечно, также отлично работал, вложенный в функцию обратного вызова, а не как внешний.js, но он был слишком длинным для моих вкусов. И были некоторые мелкие детали, которые нужно проработать в отношении правил валидации. Вот фрагмент кода проверки, который я использовал только для справки:

$(document).ready(function() {
  $('#mailform').validate( { 
    rules: {
      fullname: {
        required: true,
        minlength:2
      },
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      fullname: 'Please enter a valid name',
      email: 'Please enter a valid email address'
    },
    submitHandler: function(form) {
       $.post('php/submitForm.php', $('#mailform').serialize(), function() { DO STUFF });
    }
  });
});

Сначала я не мог заставить скрипт плагина работать во время отладки. Остерегайтесь лишних запятых после правил! Также имейте в виду, что некоторые уроки copypasta содержат скрытые недопустимые символы внутри них! Вы никогда не узнаете! Я должен был переписать весь код вручную, чтобы получить его для проверки!

Позже я добавил вложенные операторы if/else в обратном вызове для вызова функций для всех других страниц сайта, для которых требовался jquery/javascript. Сначала я попытался использовать переключатель вместо вложенного if/elses, но это было не идеально. Это помогает прочитать руководство!

Приветствия.

Источник

В чем твоя проблема? Почему вы не можете использовать простой плагин валидатора jQuery?

Некоторые примеры:

  1. Плагины / проверки / Validate
  2. Плагин jQuery: проверка
  3. Плагины / Validation
Источник
Другие вопросы по тегам