jquery form validation plugin Opera and Firefox Problem?

When I try to validate my form with jQuery validator plug-in it writes the error text two times at Mozilla Firefox and Opera and doesn't erase the value of them("This field is required.") when I write suitable values for input fields. Why it writes "This field is required." error message two times and doesn't work at browser except for 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").i开发者_开发百科s(':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();
        });
    });

For IE, it works fine and lets accept that I didn't enter some required values. It shows the error message and if I write thar input fields it removes that text immediately but at other browser it can't.

If you are using this jQuery validation plug-in then, you are totally not getting how the plug-in works! check the demo examples for how to use it, the simplest setup is:

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

no need for $("#myForm").submit(...etc) as the plug-in will take care of that!

EDIT:
Okay, so based on your update here are my comments:
First of all, All the code you added to your question now can go in the submitHandler method.

Secondly, do you really need to "prepare" your data before sending them? you can just use the plug-in validation methods available and put the pageAction in a hidden input and your submitHandler will look like:

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

This way make sure the form inputs have the correct name field expected by the page receiving the form submission (pageAction, nameOfCourse, duration....etc). And all the other validations (trim..etc) should be done server-side.

OTHERWISE, and if you want to keep doing it your way, then the code would be:

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

I had the same problem, basically mine had to do with some additional JavaScript that I had on the actual input fields that was preventing user to entering anything but numbers... as soon as I removed those everything start working...

Hope it helps other that may come across the same problem :) Cheers