jQuery validation - something is preventing form from submission

Question

I have a form with jQuery validation (testing example). Everything is "ok" until there is no more validation errors, then something is preventing form from submission. To my eyes everything seem to be fine in the code, but doesn't work. Any ideas? Thx.

My code:

$(document).ready(function () {

    $("#submit").click(function (event) {

        event.preventDefault();            
        $("#dialog-input").html("");

        var input1 = $('#input1').val();
        var input2 = $('#input2').val();
        var input3 = $('#input3').val();

        var valid = true;

        if (input1 == ""){

            $('.in1').removeClass('valid').addClass('error');
            $("#dialog-input").append("<p>Empty Input 1</p>");

            valid = false;
        }
        else { $('.in1').removeClass('error').addClass('valid'); }

        if (input2 == "") {

            $('.in2').removeClass('valid').addClass('error');
            $("#dialog-input").append("<p>Empty Input 2</p>");

            valid = false;
        }
        else { $('.in2').removeClass('error').addClass('valid'); }

        if (input3 == "") {

            $('.in3').removeClass('valid').addClass('error');
            $("#dialog-input").append("<p>Empty Input 3</p>");

            valid = false;
        }
        else { $('.in3').removeClass('error').addClass('valid'); }

        if( !valid){ 

            $(function () {
                $("#dialog-input").dialog({
                    modal: true,
                    buttons: {
                        Ok: function () {
                            $(this).dialog("close");
                        }
                    }
                });
            });
        }
        else{ return valid; }
    });
});

Working jsfiddle: https://jsfiddle.net/nitadesign/rwe2ywrs/7/

jsfiddle is just a shorter version of entire script and form.

Answer 1

Simply remove event.preventDefault() and use jquery style event control by returning true or false for event propagation control?

I've update your fiddle : https://jsfiddle.net/alokrajiv/rwe2ywrs/12/

The SNIPPET IS BELOW, but form submit is protected by security policies in SO, so the snippet might not work here. But its right. Check in the fiddle for working!!

$(document).ready(function() {

  $("#submit").click(function(event) {

    $("#dialog-input").html("");

    var input1 = $('#input1').val();
    var input2 = $('#input2').val();
    var input3 = $('#input3').val();

    var valid = true;

    if (input1 == "") {

      $('.in1').removeClass('valid').addClass('error');
      $("#dialog-input").append("<p>Empty Input 1</p>");

      valid = false;
    } else {
      $('.in1').removeClass('error').addClass('valid');
    }

    if (input2 == "") {

      $('.in2').removeClass('valid').addClass('error');
      $("#dialog-input").append("<p>Empty Input 2</p>");

      valid = false;
    } else {
      $('.in2').removeClass('error').addClass('valid');
    }

    if (input3 == "") {

      $('.in3').removeClass('valid').addClass('error');
      $("#dialog-input").append("<p>Empty Input 3</p>");

      valid = false;
    } else {
      $('.in3').removeClass('error').addClass('valid');
    }

    if (!valid) {

      $(function() {
        $("#dialog-input").dialog({
          modal: true,
          buttons: {
            Ok: function() {
              $(this).dialog("close");
            }
          }
        });
      });
    }

    return valid;
  });
});

.val-noshow {
  display: none;
}
.error {
  border: 1px #F00 solid;
  color: #F00;
}
.valid {
  border: 1px #979 solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<form method='post' action='submit.php'>

  input 1:
  <input type="text" id="input1" name="input1" class="in1">
  <br>input 2:
  <input type="text" id="input2" name="input2" class="in2">
  <br>input 3:
  <input type="text" id="input3" name="input3" class="in3">
  <br>
  <input type="submit" value="Submit" id="submit" name="submit">
</form>

<div id="dialog-input" title="Error" class="val-noshow"></div>

Answer 2

You are preventing default, so it will not trigger the call to "submit.php".

Try to avoid <input type="submit" />, use<button> . It has lot of advantages. Please go through :

input type="submit" Vs button tag are they interchangeable?

Difference between <input type='button' /> and <input type='submit' />

After changing to to , on click validate the form and then call to submit.php manually.

Answer 3

The line event.preventDefault() is preventing form submission.

Add the line $('this').closest('form').submit() before return valid;