doufei0933 2012-11-24 13:37
浏览 61
已采纳

AJAX加载div中的AJAX电子邮件表单验证？

I've created a pretty straight-forward site which loads all of its content via jquery .load() functions when you click the navigation links, and it works great. What I want now is to load in an email contact form with AJAX-style validation that alert the user about invalid input fields prior to running the php submission.

In other words, user clicks navigation link for "contact me" and a form is loaded into the content div. If the user enters an invalid name or email and hits submit, appropriate error messages will appear next to those input fields. I don't really care what happens after form goes through, whether it be a popup window or redirect page.

I've been trying to figure this out for weeks and I'm ready to give up. The form loads fine, but I can't figure out the basic construct for getting an AJAX loaded form to respond to the user without reloading the page and clearing their fields. I even got the php form submission part working exactly how I want, but getting client-side scripts to function with server-side php functions just seems arduous.

Is this even possible? How should I go about this? What are the basic concepts and tools for something like this?

  • 写回答

2条回答 默认 最新

  • douliwang6896 2012-12-17 15:02
    关注

    I got my form to work using the jquery validation plugin! Thanks to Praveen for suggesting it. It's a great tool.

    The underlying issue was that I really wasn't wrapping my head around .load(). Once I utilized the .load() callback function, the validation ran fine. I created an external javascript file called contact.js which contains the validation plugin rules and submitHandler nested within contactPageScript() function. I called contactPageScript() with the .load() callback and voila:

    <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/contact.js"></script>

<script>
  $(document).ready(function(){
    $("div#menu ul li a").click(function() {
      var whichPage = $(this).attr('href');
      $('div#page_content').load(($(this).attr('href') + ' #contentB'), function(){
                    if (whichPage == 'contact.html') {
                        contactPageScript();
                    }}
      );
    });
  });
</script>
</head>

    The validation script of course also worked fine nested within the callback function rather than as an external .js, but it was too lengthy for my tastes. And there were some small details to be worked out regarding the validation rules. Here's the chunk of validation code I used just for reference:

    $(document).ready(function() {
  $('#mailform').validate( { 
    rules: {
      fullname: {
        required: true,
        minlength:2
      },
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      fullname: 'Please enter a valid name',
      email: 'Please enter a valid email address'
    },
    submitHandler: function(form) {
       $.post('php/submitForm.php', $('#mailform').serialize(), function() { DO STUFF });
    }
  });
});

    At first I couldn't get the plugin script to work during debugging. Beware of extra commas after the rules! And also be advised that some copypasta tutorials contain hidden invalid characters within them! You'd never know! I had to rewrite the whole code by hand to get it to validate!

    I later added nested if/else statements within the callback to call functions for all the other pages on the site which required jquery/javascript. At first I tried using a switch instead of nested if/elses, but it was not ideal. It helps to read the manual!

    Cheers.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题：最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面，并且报了如下错误，尝试过换显卡驱动，但是好像不行
  • ¥15 没有证书，nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)（相关搜索：51单片机|单片机|测试代码）
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了，如何解决？(操作系统-ubuntu)