jQuery验证 - 有些东西阻止了表单的提交

时间:2016-07-27 10:41:48

标签: jquery html forms validation

我有一个带有jQuery验证的表单(测试示例)。一切都是好的"直到没有更多验证错误,然后某些东西阻止了提交表单。在我看来,代码中的一切似乎都很好,但是不起作用。有任何想法吗?谢谢。

我的代码:

$(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; }
    });
});

工作jsfiddle:https://jsfiddle.net/nitadesign/rwe2ywrs/7/

jsfiddle只是整个脚本和表单的缩写版本。

3 个答案:

答案 0 :(得分:1)

只需删除event.preventDefault()并使用jquery样式事件控件返回truefalse进行事件传播控制?

我已经更新了你的小提琴:https://jsfiddle.net/alokrajiv/rwe2ywrs/12/

SNIPPET如下,但表单提交受SO中的安全策略保护,因此该代码段可能不起作用。但它的权利。检查小提琴是否工作!!

&#13;
&#13;
$(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;
  });
});
&#13;
.val-noshow {
  display: none;
}
.error {
  border: 1px #F00 solid;
  color: #F00;
}
.valid {
  border: 1px #979 solid;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您正在阻止默认,因此它不会触发对&#34; submit.php&#34;的调用。

尽量避免<input type="submit" />,请使用<button>。它有很多优点。 请仔细阅读:

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

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

更改为to后,单击验证表单,然后手动调用submit.php。

答案 2 :(得分:0)

event.preventDefault()行阻止了表单提交。

$('this').closest('form').submit()

之前添加第return valid;