jQuery - form validation

Question

I am trying to write my own form validation script with jQuery.

However, I can't seem to get it to work, It's probably something minor but I can't find the cause of the problem.

Also, I have only just started using jQuery an I am looking for a good syntax checker. Can anyone recommend one?

$(document).ready(function() {
  $('.error').toggle();
  });


//when the button is clicked

$(".button").click(function() {
        // validate and process form
        // first hide any error messages
    $('.error').hide();

      var name = $("input#name").val();
        if (name == "") {
      $("label#name_error").show();
      return false;
    }

          var name = $("input#email").val();
        if (name == "") {
      $("label#name_error").show();
      return false;
    }

          var name = $("input#subject").val();
        if (name == "") {
      $("label#name_error").show();
      return false;
    }

          var name = $("textarea#message").val();
        if (name == "") {
      $("label#name_error").show();
      return false;
    }

    var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;

        $.ajax({
      type: "POST",
      url: "bin/process.php",
      data: dataString,
      success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<h2>Contact Form Submitted!</h2>")
        .append("<p>We will be in touch soon.</p>")
        .hide()
        .fadeIn(1500, function() {
        $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
      }
     });
    return false;
    });
});

Answer 1

<script type="text/javascript">
$(document).ready(function() {      
 $("#MyForm").validate({
             rules: {

                 name: {required: true},
                 phone:{required: true},
                 email:{required: true}

                 },
                 messages: {

                  name: {required: "Please Enter  Name"},
                 phone:{required: "Please Enter Phone No"},
                 email:{required: "Please Enter Email "}

                 } ,
                 submitHandler: function(form) {
                        form.submit();
                 } 

            });
});

</script>

Answer 2

Make sure you include jQuery.validate.min.js or jquery.validate.unobtrusive.min.js (cant remember off top of my head) file(s) and then validate inside jQuery like this:

$('.button').click(function () {
if ($('form').valid()) {
    //do saving stuff
} else {
    //errors on form - let user correct them
}

});

As far as Syntax checker, not sure what platform your developing on but Im using Visual Studio 2010 and if you include the js files then VS2010 gives intellisense which highlights issues.