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

如果您使用实时点击次数可能会有所帮助：

$(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元素，您可以使用jquery执行$ .post（）或$ .get（）函数，并且可以使用返回值来查看帖子是否成功完成。

类似的东西：

$('#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中的电子邮件地址的功能：使用jquery的javascript进行验证并不总是最好的想法，它可以被篡改。

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;
}

Answer 3

如果你已经拥有模态，为什么不使用Ajax？你可以抓住发送它们的字段，然后将模态的内容更改为响应。

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

jQuery和Ajax提交+模态对话框

3 个答案: