JQuery и Ajax представляет + модальный диалог

Question

Я пытаюсь выполнить следующую задачу:

1. Создание модального поля при щелчке по кнопке #emailJQButton (предположим, эта кнопка уже существует).

2. Проверьте входные данные из формы # emailPost2, чтобы убедиться, что они существуют и имеют правильный формат электронной почты.

3. Если ввод действителен, при нажатии # eb2 отправьте форму через Ajax (не нужно возвращать какие-либо данные, только отправьте) и закройте модальное окно.

Проблемы, с которыми я сталкиваюсь:

1. $("button, input:submit, input:button, a#jql, input:radio").button(); перестает работать, если я сделаю одно из них: $(document).ready(function() {...}); (кнопка () находится в обычном $(function() {...});)

2. Независимо от того, как я это пробую, я не могу заставить форму прекратить отправку и показать сообщение об ошибке, когда оно недействительно.

Вот плагин, который я использую: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Вот проверяемая форма:

<form action="php/emailPost.php" method="POST" class="inline" id="emailPost2">
<label name="error"></label>
<input type="text" value="Enter an Email" class="required email" name="emailAddress" style="display: inline-block;">
<input type="button" value="Email" id="eb2"/>
<input type="hidden" name="passedCoupID" value="1"/>
</form>

Вот весь мой код jQuery:

$(function() {
$("button, input:submit, input:button, a#jql, input:radio").button();

$('#emailJQButton').click(function() {
    $("#emailModal").dialog('open');
});

$('#eb1').click(function() {
    $('#emailPost').submit();
    $("#emailModal").dialog('close');
});

$('#eb2').click(function() {
    $('#emailPost2').submit();
    $("#emailModal").dialog('close');
});
});

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

Вот файл, который отправитель должен вызвать (emailPost.php)

<?php
$passedCoupID = $_REQUEST["passedCoupID"];
$emailAddress = $_REQUEST["emailAddress"];

//some database queries and an email function

echo "Sent.";
?>

Наконец, вот #emailModal:

<div id="emailModal">
<form action="php/emailPost.php" method="POST" class="inline" id="emailPost2">
<label name="error"></label>
<input type="text" value="Enter an Email" class="required email" name="emailAddress" style="display: inline-block;">
<input type="button" value="Email" id="eb2"/>
<input type="hidden" name="passedCoupID" value="1"/>
</form>
</div>

Я довольно новичок в jQuery, и я искал всегда и везде, но я не могу найти решение этой проблемы. Любая помощь?

Answer 1

Я думаю, что ваша проблема может быть упрощена с помощью встроенных кнопок для .dialog().

Я опубликовал рабочий пример на jsfiddle , чтобы вы могли попробовать его и дать мне знать, если это то, что вам нужно. Я удалил кнопку отправки из вашей формы и использовал свойство .dialog() кнопок для создания кнопки отправки, которая работает только тогда, когда электронное письмо действительно. Также добавлены свойства, чтобы сделать диалог модальным и скрытым при запуске. Я также добавил вызов $('#emailPost2').validate();, который подключает проверку формы.

Answer 2

Почему бы не использовать Ajax, если у вас уже есть модал? Вы можете просто захватить поля, отправить их, а затем изменить содержимое модала на ответ.

http://api.jquery.com/jQuery.ajax/

Answer 3

может помочь, если вы используете live для кликов:

$(function() {
$("button, input:submit, input:button, a#jql, input:radio").button();

$('#emailJQButton').live('click',function() {
    $("#emailModal").dialog('open');
});

$('#eb1').live('click',function() {
    $('#emailPost').submit();
    $("#emailModal").dialog('close');
});

$('#eb2').live('click',function() {
    $('#emailPost2').submit();
    $("#emailModal").dialog('close');
});
});

вместо элемента submit вы можете выполнять функции $ .post () или $ .get () с jquery, и вы можете использоватьвозвращаемые значения, чтобы увидеть, прошел ли пост успешно.

что-то вроде:

$('#emailPost').submit(function(){
        $.post('phpFILE.php',$(this).serialize(),function(data){
            console.log(data);
            //do something with return data
        })
   return false; //so normal submit does not occur
    })

и вот функция проверки адресов электронной почты в php: это не всегда лучшая идея для использованияjavascript из jquery для проверки bc может быть подделан.

function check_email_address($email) {
  // First, we check that there's one @ symbol,
  // and that the lengths are right.
  if (!ereg("^[^@]{1,64}@[^@]{1,255}$", $email)) {
    // Email invalid because wrong number of characters
    // in one section or wrong number of @ symbols.
    return false;
  }
  // Split it into sections to make life easier
  $email_array = explode("@", $email);
  $local_array = explode(".", $email_array[0]);
  for ($i = 0; $i < sizeof($local_array); $i++) {
    if(!ereg("^(([A-Za-z0-9!#$%&'*+/=?^_`{|}~-][A-Za-z0-9!#$%&'*+/=?^_`{|}~\.-]{0,63})|(\"[^(\\|\")]{0,62}\"))$",$local_array[$i])) {
      return false;
    }
  }
  // Check if domain is IP. If not,
  // it should be valid domain name
  if (!ereg("^\[?[0-9\.]+\]?$", $email_array[1])) {
    $domain_array = explode(".", $email_array[1]);
    if (sizeof($domain_array) < 2) {
        return false; // Not enough parts to domain
    }
    for ($i = 0; $i < sizeof($domain_array); $i++) {
      if(!ereg("^(([A-Za-z0-9][A-Za-z0-9-]{0,61}[A-Za-z0-9])|([A-Za-z0-9]+))$",$domain_array[$i])) {
        return false;
      }
    }
  }
  return true;
}