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

【问题标题】：Jquery: On form submit validate then allow default operation to continueJquery：在表单提交验证然后允许默认操作继续
【发布时间】：2017-08-06 08:58:40
【问题描述】：

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

$('#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，但用户可以通过按回车键触发提交，我想允许这样做。我想这样做的原因是服务器可以执行重定向等操作。

【问题讨论】：

“在我完成表单验证后，我想照常进行” - 好吧，这就是你的答案......只是在最后阻止事件默认 - 或者不 - 之后您进行了验证检查...
尝试使用$('#form').on('submit',function(e){e.preventDefault();//validation $('#form').submit();})
你应该检查名称值，所以它应该是 $('#name').val()

标签： javascript jquery forms validation

【解决方案1】：

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

$(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>

【讨论】：

【解决方案2】：

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

如果想阻止提交，可以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

【讨论】：

【解决方案3】：

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

$(document).ready(function(){

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

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

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

});

【讨论】：