Question

想知道，有没有办法在preventDefault和验证表单字段后使表单执行默认操作。

$('#form').submit(function (e) { 
   e.preventDefault();
   var isValid = true;
   var name   = $('#name').val();

   if (empty(name)) {
     isValid = false;
   }

   $(this).submit() // This will cause a stack overflow :)

});

完成表单验证后，我想正常进行，

我想过在提交按钮上使用onClick，但是用户可以通过点击我想要允许的回车键来触发提交。我想这样做的原因是服务器可以执行重定向等操作。

Answer 1

您可以在函数末尾使用preventDefault，而不是使用return true。

如果您想阻止提交，可以return false。

以下是使用您的代码的示例。如果您尝试使用空字段提交表单，则不会提交。如果您填写该字段，它将：

$("#form").submit(function() {
  var name = $("#name").val();

  if (!name) {
    $(".form-group").addClass("has-danger");
    alert("Field is blank. Submit will be prevented.");
    return false; // no submission
  }

  alert("Field is filled. The form will submit.");
  return true; // form submits
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form id='form'>
  <div class="form-group">
    <label class="form-control-label" for="name">Name</label>
    <input type="text" class="form-control" id="name">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

CodePen Demo

Answer 2

我正在给你写一个小例子。

$(document).ready(function(){
    $("#control_form").on("keyup", function(event){
        post_control();
    });
});
var post_control = function(){
    var user_name = $("#user_name").val();
  
    if ( user_name==null || user_name=="" || user_name.length < 4 )
        $('.error').html("Username can not be less than 4 characters!");
		
    else
    {
        $('.error').empty();
        $('#control_form').removeAttr('onsubmit');
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="users_form">
    <form name="form" id="control_form" action="post_form" method="post" onsubmit="return false;">
        <label>User Name:</label>
        <input type="text" id="user_name" name="user_name">
        <input type="submit" value="Save">
    </form>
    <div class="error"></div>  
</div>

Answer 3

检查它是否有效。我测试了它。

$(document).ready(function(){

$('#form1').submit(function (e) { 

  if($('#name').val() == ''){
     alert('Name is empty');
     return false;
  }

  $(this).submit();
});

});

Jquery：在表单提交验证然后允许默认操作继续

3 个答案: