Html.BeginForm using onSubmit to validate

Question

Am trying to submit a my form , however i have added some jquery for validation which works:

    $(function validateForm() {
    $("#newMonoReading").on('focusout', function () {
        var str = "";

        var initialMonoReading = $('#InitialMonoReading').val();
        var newMonoReading = $('#newMonoReading').val()
        if (~~newMonoReading < ~~initialMonoReading) {
            $('#MonoErrorMessage').text("New Mono Readings must be MORE than existing");
            $('#MonoErrorMessage').show();
            return false;


        } else {
            $('#MonoErrorMessage').hide();

        }
    });
});

But the problem is on the submit button

  <input type="submit" value="Submit" class="btn btn-primary">

If there is an error the submit button still works, i need it to show no error messages and then send, but i tried using the onsubmit for the form but its not working, it still submits even though the value is less and the error message is showing.

This is the html.BeginForm. i think the error may be here. am not really sure.

         <div class="modal-body">
        @using (Html.BeginForm("Save", "ReadingsEntry", FormMethod.Post, new { enctype = "multipart/form-data", onsubmit = "validateForm()" }))
        {

Any ideas

Answer 1

Is this a correct summary?

On submit you want to validate your form with your jQuery function. If validation is passed then you want the submit to be continued, otherwise you want the submit to be canceled.

If my summary isn't correct, then please clarify your question a bit more.

If I summed it up accurately, you can change your jQuery function to:

$(function validateForm(event) {
  event = event || window.event || event.srcElement;
  var initialMonoReading = $('#InitialMonoReading').val();
  var newMonoReading = $('#newMonoReading').val()
  if (~~newMonoReading < ~~initialMonoReading) {
    $('#MonoErrorMessage').text("New Mono Readings must be MORE than existing");
    $('#MonoErrorMessage').show();
    event.preventDefault();
  }
  else {
    $('#MonoErrorMessage').hide();
  }
});

And while creating markup, use following line:

@using (Html.BeginForm("Save", "ReadingsEntry", FormMethod.Post, new { enctype = "multipart/form-data", onsubmit = "validateForm(event)" }))