Question

I have a form for which I used AJAX for submitting the form and jQuery for the validation. Both the scripts are working but the AJAX submits the form even though the validation throws an error.

The script I have used is here:

<script>
  $(document).ready(function(){
  $("#maxmarks").validate({
        rules: {
                max: {
              number: true,
            }
               },
        messages: {             
                max:  {
                number: "Please enter a valid number",
              }

            },

        });

     });
  </script>

<form id="maxmarks" action = "home.php" method="POST">

<input id="maxinput" class="required" name="max" value="5" size="3"/>
<input type="submit" value="submit"/>

</form>

<script type='text/javascript'>
$("#maxmarks").submit(function() { 
    $.ajax({
    url : 'update.php', 
    type : 'POST', 
    data : $("#maxmarks").serialize(),
    success : function(res) {
           $('#resultreturn').prepend(res);
    }
});
    return false;
 });
</script>   

Answer 1

You need to place the code you have in the submit() handler in the submitHandler parameter, like this:

$(document).ready(function(){
    $("#maxmarks").validate({
        rules: {
            max: {
                number: true,
            }
        },
        messages: {             
            max:  {
                number: "Please enter a valid number",
            }
        },
        submitHandler: function(form) {
            $.ajax({
                url : 'update.php', 
                type : 'POST', 
                data : $(form).serialize(),
                success : function(res) {
                    $('#resultreturn').prepend(res);
                }
            });
        }
    });
});