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.

u r using `event.preventDefault();` so, where r u submiting? — Iceman, Jul 27 '16 at 10:47
Your logic is wrong. You are preventing form to be submited by using `event.preventDefault();`. What you want is to return true if valid or false if not valid. https://jsfiddle.net/rwe2ywrs/11/ — A. Wolff, Jul 27 '16 at 10:47

Iceman · Accepted Answer · 2016-07-27T11:03:55.633

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>

@Nita cheers. gr8 that it helped. I'd suggest you close the other question u opened as well regarding the same. — Iceman, Jul 27 '16 at 11:13

score 1 · Answer 2 · edited May 23 '17 at 11:58

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.

score 0 · Answer 3 · answered Jul 27 '16 at 10:54

0

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

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

answered Jul 27 '16 at 10:54

LeDoc

935
2
12
24

jQuery validation - something is preventing form from submission

3 Answers3