jquery 表单验证插件 Opera 和 Firefox 问题？答案

【问题标题】：jquery form validation plugin Opera and Firefox Problem?jquery 表单验证插件 Opera 和 Firefox 问题？
【发布时间】：2010-12-29 00:43:47
【问题描述】：

当我尝试使用 jQuery 验证器插件验证我的表单时，它会在 Mozilla Firefox 和 Opera 中写入两次错误文本，并且不会删除它们的值（“此字段是必需的。”）当我编写合适的输入字段的值。为什么它写“此字段是必需的”。两次报错，除了IE以外的浏览器都不能用？

$(document).ready(function() {
        $("#courseForm").submit(function(event) {
            //$("#courseForm").validate();
            if($("#courseForm").valid()){
            var nameOfCourse = $.trim($("#course_name").val());
            var codeOfCourse = $.trim($("#course_code").val());
            var duration = $.trim($("#course_hour").val());
            var courseYear = $("#course_year").val();
            if ($("#is_elective").is(':checked')) {
                var elective = 1;
            } else {
                var elective = 0;
            }
            if ($("#is_service").is(':checked')) {
                var service = 1;
            } else {
                var service = 0;
            }
            var typeOfClassroom = $("#clasroom_type").val();
            var groupCount = $("#group_count").val();
            $.ajax({
                type:'POST',
                url: 'defineCourse.action',
                data: { pageAction:"defineCourse" , nameOfCourse: nameOfCourse, codeOfCourse: codeOfCourse, duration: duration, courseYear: courseYear, elective: elective, service: service, typeOfClassroom: typeOfClassroom, groupCount: groupCount },
                success: function(data) {
                    if (data == null || data == '') {
                        alert('Successfull!');
                    } else {
                        alert(data);
                    }
                },
                error: function(data) {
                    alert('Something wrong!');
                }
            });
            }
            event.preventDefault();
        });
    });

对于 IE，它可以正常工作，让我们接受我没有输入一些必需的值。它显示错误消息，如果我写输入字段，它会立即删除该文本，但在其他浏览器中它不能。

【问题讨论】：

请不要使用jQuery进行验证，并假设所有发送到服务器的数据都是有效的。这对于防止愚蠢的客户端请求非常有用，但对于黑客来说却无济于事。它很容易通过。也有类似的服务器逻辑。或者只是用户服务器逻辑而不是 jQuery 验证

标签： jquery jquery-plugins jquery-validate cross-browser

【解决方案1】：

如果您使用的是this jQuery 验证插件，那么您完全不了解该插件的工作原理！查看演示示例以了解如何使用它，最简单的设置是：

$(function() {
   $("#myForm").validate();
});

不需要$("#myForm").submit(...etc)，因为插件会处理这个问题！

编辑：
好的，根据您的更新，这里是我的 cmets：
首先，您现在添加到问题中的所有代码都可以放在submitHandler 方法中。

其次，您真的需要在发送数据之前“准备”数据吗？您只需使用可用的插件validation methods 并将pageAction 置于隐藏输入中，您的submitHandler 将如下所示：

$("#courseForm").validate({
 rules: { // All the plug-in built-in validation methods fro your form inputs go here (e.g. required...etc)
    // ...
 },
 messages: {
   //  ...
 },
 submitHandler: function(form) {
  $.ajax({
   type:'POST',
   url: 'defineCourse.action',
   data: $(form).serialize(),
   success: function(data) {
    if (data == null || data == '') {
     alert('Successfull!');
    } else {
     alert(data);
    }
   },
   error: function(data) {
    alert('Something wrong!');
   }
  });
 }
});

这样可以确保表单输入具有正确的 name 字段，这是接收表单提交的页面所期望的 (pageAction, nameOfCourse, duration....etc)。并且所有其他验证（trim..etc）都应该在服务器端完成。

否则，如果您想继续按照自己的方式做，那么代码将是：

$("#courseForm").validate({
 rules: { // All the plug-in built-in validation methods fro your form inputs go here (e.g. required...etc)
    // ...
 },
 messages: {
   //  ...
 },
 submitHandler: function(form) {
  var nameOfCourse = $.trim($("#course_name").val());
  var codeOfCourse = $.trim($("#course_code").val());
  var duration = $.trim($("#course_hour").val());
  var courseYear = $("#course_year").val();
  var elective = 0;
  var service = 0;
  if ($("#is_elective").is(':checked')) {
   elective = 1;
  }
  if ($("#is_service").is(':checked')) {
   service = 1;
  }
  var typeOfClassroom = $("#clasroom_type").val();
  var groupCount = $("#group_count").val();
  $.ajax({
   type:'POST',
   url: 'defineCourse.action',
   data: { pageAction:"defineCourse" , nameOfCourse: nameOfCourse, codeOfCourse: codeOfCourse, duration: duration, courseYear: courseYear, elective: elective, service: service, typeOfClassroom: typeOfClassroom, groupCount: groupCount },
   success: function(data) {
    if (data == null || data == '') {
     alert('Successfull!');
    } else {
     alert(data);
    }
   },
   error: function(data) {
    alert('Something wrong!');
   }
  });
 }
});

【讨论】：

嗨 ifaour，我知道它处理提交功能，但我在进行其他一些验证并执行 $.ajax 发布后发布数据。我不使用提交表单，这就是我处理提交并阻止默认设置的原因。
还有其他好的验证插件吗？因为我不明白为什么在我在 Firefox 或 Opera 上为该表单的输入字段输入正确值后它不刷新错误消息并自动删除错误消息。
至于你的第二条评论，这个插件是最好的之一。对于您的第一条评论，您仍然可以在插件范围内进行所有验证！例如，如果您想进行更多验证（而不是表单输入！！）然后在 submitHandler 方法中使用它，您也可以在那里进行 ajax 提交，请检查 demo。如果您解释您要做什么并发布更多代码，它将对我们有更多帮助！
我还应该定义规则和消息部分吗？我没有定义它，也没有在 Firefox 的 Opera 上使用 IE bu。可能会报错，有必要吗？
没有，没有必要，但如果你不打算使用它们，那就认真了..为什么要首先使用插件？！你也可以发布你的html代码吗？我很肯定该页面已损坏并且 IE 行为很奇怪！

【解决方案2】：

我遇到了同样的问题，基本上我的问题与我在实际输入字段中的一些附加 JavaScript 有关，这些 JavaScript 阻止用户输入除数字以外的任何内容......一旦我删除了这些，一切都开始工作......

希望它可以帮助其他可能遇到相同问题的人:) 干杯

【讨论】：