Question

我创建了一个非常简单的站点，当您单击导航链接时，它会通过jquery .load()函数加载其所有内容，并且效果很好。我现在想要的是加载一个带有AJAX风格验证的电子邮件联系表单，该表单在运行php提交之前提醒用户有关无效输入字段的信息。

换句话说，用户单击“与我联系”的导航链接，并将表单加载到内容div中。如果用户输入无效的名称或电子邮件并点击提交，则这些输入字段旁会显示相应的错误消息。我不太关心表单经过后会发生什么，无论是弹出窗口还是重定向页面。

我一直试图解决这个问题几个星期，我已经准备好放弃了。表单加载正常，但我无法弄清楚获取AJAX加载表单的基本结构，以响应用户而无需重新加载页面并清除其字段。我甚至让php表单提交部分完全按照我的意愿工作，但让客户端脚本与服务器端php函数一起工作似乎很艰难。

这甚至可能吗？我该怎么办呢？这样的基本概念和工具是什么？

Answer 1

你有什么问题？为什么不能使用简单的jQuery验证器插件？

一些例子：

Answer 2

我使用jquery验证插件让我的表单工作！感谢Praveen的建议。这是一个很棒的工具。

潜在的问题是我真的没有把头包裹在.load（）之外。一旦我使用了.load（）回调函数，验证运行正常。我创建了一个名为contact.js的外部javascript文件，其中包含验证插件规则和嵌套在contactPageScript（）函数中的submitHandler。我用.load（）回调调用contactPageScript（），然后瞧瞧：

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

验证脚本当然也可以很好地嵌套在回调函数中而不是作为外部.js，但它对我的口味来说太冗长了。关于验证规则，还有一些小细节需要解决。以下是我用于参考的验证代码块：

$(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 });
    }
  });
});

起初，我无法在调试过程中使插件脚本正常工作。在规则之后要小心额外的逗号！并且还要注意一些copypasta教程中包含隐藏的无效字符！你永远不会知道！我不得不手动重写整个代码以使其验证！

我后来在回调中添加了嵌套的if / else语句，以调用网站上需要jquery / javascript的所有其他页面的函数。起初我尝试使用开关而不是嵌套的if / elses，但它并不理想。阅读手册很有帮助！

干杯。

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

2 个答案:

你有什么问题？为什么不能使用简单的jQuery验证器插件？