我正在尝试完成以下任务:
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的新手,我一直在寻找永远无处不在,但我无法找到解决这个问题的方法。有什么帮助吗?
答案 0 :(得分:1)
我认为使用.dialog()
的内置按钮可以简化您的问题。
我在jsfiddle发布了一个工作示例,因此您可以尝试一下,如果您需要,请告诉我。我从表单中删除了提交按钮,并使用.dialog()
的“按钮”属性创建了一个仅在电子邮件有效时才有效的提交按钮。还添加了属性以使对话框模态化并在启动时隐藏我还添加了对$('#emailPost2').validate();
的调用,该调用挂钩了表单验证。
答案 1 :(得分:0)
如果您使用实时点击次数可能会有所帮助:
$(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;
}
答案 2 :(得分:0)
如果你已经拥有模态,为什么不使用Ajax?你可以抓住发送它们的字段,然后将模态的内容更改为响应。