2011-07-15 41 views
1

我想将验证规则添加到联系人窗体的电子邮件部分,以便该字段不是空白并且是有效的电子邮件地址。Jquery和联系表单验证

我该如何做到这一点?

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

$("#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 protected]"> 
    <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> 

请注意,我没有创建这个代码不是很熟悉的话,我们有一个开发公司建立我们的网站,我只是试图扩大它来满足我们的需求,我只需要一点点的方向。

+0

使用Jquery验证插件http://docs.jquery.com/Plugins/Validation#List_of_built-in_Validation_methods。然后在你的成功创建一个div并添加一个成功的短语tit titan – Brad

回答

3

看看http://unwrongest.com/projects/valid8/(大约有500个“表单验证”插件)。这只是我最喜欢的,因为它非常苗条和简单。

+1

这是另一个好的:http://docs.jquery.com/Plugins/validation –

0

用if语句括起您的$ .ajax调用,该语句用正则表达式检查电子邮件输入值。谷歌“正则表达式电子邮件JavaScript”,你会发现你所寻求的。

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

0

如果您尝试根据您在谷歌上找到的正则表达式验证电子邮件地址,请小心。 AFAIK,没有一个正则表达式可以根据RFC 2822正确验证电子邮件地址。大部分你会发现那里会不正确地拒绝有效的电子邮件地址或接受无效的电子邮件地址。 最接近我找到的正则表达式是一页半长打印出来的。

编辑:

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

  1. 美国广播公司\ @ DEF“@ example.com
  2. ”弗雷德布罗格斯“ @ example.com
  3. "Joe\Blow"@example.com
  4. "[email protected]"@example.com
  5. customer/[email protected]
  6. [email protected]
  7. !def!xyz%[email protected]
  8. _somename @例子。COM
+0

嗯,我不确定在jQuery发布5年之前发布的文章已经有效了。有很多进步和规格的变化。电子邮件只能包含有限数量的不同字符,所以它是可能的。 – Steven

+0

这不是一篇文章,它是一个标准,与JavaScript或jQuery完全无关,而是定义了什么使得有效的电子邮件地址。 –

0

既然你不熟悉的第三方开发者的工作,该网站是建立与ExpressionEngine,你可能会考虑与流行Solspace Freeform Module更换自定义表单处理器:

自由形式允许您在您的网站上创建简单而灵活的表格,以便从您的用户收集信息到 。

张贴到您的表格被记录和组织在您的EE数据库中作为 以及可选地邮寄到您提供的通知电子邮件。

您可以接收从递交附件,并有存储在数据库中,以及邮寄回了作为附件发送到管理员 或提交用户使用这些附件 。

在它的许多功能,自由形式提供服务器端表单验证,通知和确认电子邮件和CAPTCHA集成 - 作为奖金,自由形式是免费的,its features are well-documented

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