2

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

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

几周以来我一直在努力解决这个问题，我准备放弃了。表单加载正常，但我无法弄清楚获取 AJAX 加载表单以响应用户而不重新加载页面并清除其字段的基本结构。我什至让 php 表单提交部分完全按照我的意愿工作，但是让客户端脚本与服务器端 php 函数一起运行似乎很困难。

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

4

2 回答 2

1

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

一些例子：

  1. 插件/验证/验证
  2. jQuery 插件：验证
  3. 插件/验证
于 2012-11-24T13:46:25.613 回答
1

我让我的表单使用 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/else，但这并不理想。看说明书很有帮助！

干杯。

于 2012-12-17T15:02:52.573 回答