Nita Nita - 4 months ago 13
jQuery Question

jQuery validation - something is preventing form from submission

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

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>