Question

当我尝试使用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，它工作正常，并接受我没有输入一些必需的值。它显示错误消息，如果我写入thar输入字段，它会立即删除该文本，但在其他浏览器中则不能。

Answer 1

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

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

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

编辑：
好的，所以基于你的更新，这里有我的评论：
首先，您现在添加到问题中的所有代码都可以使用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 ..等）应该在服务器端完成。

否则，如果你想按照你的方式继续这样做，那么代码就是：

$("#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!');
   }
  });
 }
});

Answer 2

我遇到了同样的问题，基本上我的做法与我在实际输入字段上的一些额外的JavaScript有关，这些JavaScript阻止用户输入除数字之外的任何东西......一旦我删除了所有内容就开始工作......

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

jquery表单验证插件Opera和Firefox有问题吗？

2 个答案: