Jquery和Contact表单验证

时间:2011-07-15 14:34:25

标签: php jquery expressionengine

我正在尝试将验证规则添加到联系表单的电子邮件部分,以便该字段不是空白且是有效的电子邮件地址。

我怎样才能做到这一点?

我还想添加一个表单提交后发送给用户的自动回复?

$("#ContactForm").submit( function() {
    $.ajax({
        type: "POST",
        url: "{homepage}mailer/mailer.php",
        data: $(this).serialize(),
        success: function(data){
            $('#fancybox-content #quote_box #ContactForm').html('<div style="padding-top: 15px; text-align:center;">Message Sent! Thank you.</div>');
            setTimeout(function(){
                $.fancybox.close();
            },3500);
        }
    });
});

<form id="ContactForm" name="ContactForm" action="{homepage}mailer/mailer.php" method="post">
    <input type="hidden" name="_sendto" value="email@test.com">
    <input type="hidden" name="_subject" value="Quote Request">
    <label for="name">Name</label><input type="text" name="name"><br>
    <label for="title">Title</label><input type="text" name="title"><br>

    <label for="customer_segment">Customer segment</label><input type="text" id="customer_segment" name="customer_segment" value=""><br>
    <label for="company">Company</label><input type="text" name="company"><br>
    <label for="email">Email</label><input type="text" name="email"><br>
    <label for="phone">Phone</label><input type="text" name="phone"><br>
    <label for="city">City</label><input type="text" name="city"><br>
    <label for="state">State</label><input type="text" name="state"><br>
    <label for="country">Country</label><input type="text" name="country"><br>
    <label for="contact_interested_in">Product interested in</label><input type="text" name="prod_inquiry" value="{exp:cookie_plus:get name="" parse="inward"}{exp:channel:entries entry_id="{cookie}"}{title}{/exp:channel:entries}{/exp:cookie_plus:get}"><br>
    <label for="contact_preference">Contact preference</label>
    <input class="radio" type="radio" name="contact_preference" value="Phone"> <span class="label">Phone</span>
    <input class="radio" type="radio" name="contact_preference" value="Email"> <span class="label">Email</span><br>
    <input id="button" type="submit" value="Submit" />
</form>

请注意,我没有创建此代码并且不熟悉它,我们有一个开发公司创建我们的网站,我只是尝试扩展它以满足我们的需求我只需要一点方向。< / p>

4 个答案:

答案 0 :(得分:3)

看看http://unwrongest.com/projects/valid8/(还有大约500个其他'表单验证'插件)。这个是我最喜欢的,因为它非常纤薄和简单。

答案 1 :(得分:0)

使用if语句将$ .ajax调用括起来,该语句使用正则表达式检查电子邮件输入值。谷歌“正则表达式电子邮件javascript”,你会找到你想要的。

请注意,javascript中的验证表单不是很安全,因为具有一些编程知识的人可以检查页面的来源并通过直接发布到您的php脚本来绕过验证。最好在“mailer.php”中验证,将任何错误返回到$ .ajax success-callback,并使用javascript向用户显示错误消息。

答案 2 :(得分:0)

如果您尝试针对在Google上找到的正则表达式验证电子邮件地址,请务必小心。 AFAIK,没有单个正则表达式可以根据RFC 2822正确验证电子邮件地址。您将在那里找到的大多数将错误地拒绝有效的电子邮件地址或接受无效的电子邮件地址。我找到的最近的正则表达式是一页半长的打印出来。

编辑:

例如,所有这些都是有效的电子邮件地址,如果您要验证电子邮件地址,则应允许所有这些地址:

  1. Abc \ @def“@ example.com
  2. “Fred Bloggs”@ example.com
  3. “乔\吹” @ example.com
  4. “ABC DEF @” @ example.com
  5. customer/department=shipping@example.com
  6. $A12345@example.com
  7. !def!xyz%abc@example.com
  8. _somename@example.com

答案 3 :(得分:0)

由于您不熟悉第三方开发人员的工作,并且网站是使用ExpressionEngine 构建的,因此您可以考虑将自定义表单处理器替换为流行的Solspace Freeform Module:< / p>

  

自由格式可让您在自己的网站上创建简单灵活的表单   从您的用户那里收集信息。

     

您的表单的发布将在您的EE数据库中记录和组织   以及可选择邮寄给您提供的通知电子邮件。

     

您可以从提交者处接收附件并拥有这些附件   存储在您的数据库中,并作为管理员的附件邮寄回来   或提交用户。

在其众多功能中,Freeform提供服务器端表单验证,通知和确认电子邮件以及CAPTCHA集成 - 作为奖励,Freeform是免费的its features are well-documented

您甚至可以使用jQuery Validation Plugin和Freeform一起提供客户端数据验证,或者使用异步HTTP(Ajax)请求提交表单。

相关问题