表单未使用 javascript 中的必需属性通过按钮 ID 进行验证

Question

我正在尝试使用按钮的 'id' 属性单击按钮时使用必需属性验证表单。

如果我删除 'id' 属性，表单会验证，但使用 'id'，它不会验证。

以下是我试过的：

<form>
 <div class="form-group  text-center">
        <div class="col-sm-12 col-lg-6 col-md-12  m-auto">
            <input type="text" class="form-control input-lg" id="FirstName" placeholder="First Name" name="firstname" required  >
        </div>
    </div>

 <div class="form-group">
        <div class="col-sm-offset-2 col-lg-6 col-sm-12 col-md-12 m-auto">
            <button type="submit" class="btn-lg" id="btnSubmit">Submit</button>
        </div>
    </div>
 </form>

$(document).ready(function () {
     $('#btnSubmit').on("click", function (event) {

    event.preventDefault();
    if (validate()) {
        updateCustomerInfo();
    }
});
});

Answer 1

代替 click 处理程序在表单上附加 submit 处理程序。

$('#btnSubmit').closest("form").on("submit", function(event) {

  event.preventDefault();
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="form-group  text-center">
    <div class="col-sm-12 col-lg-6 col-md-12  m-auto">
      <input type="text" class="form-control input-lg" id="FirstName" placeholder="First Name" name="firstname" required>
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-lg-6 col-sm-12 col-md-12 m-auto">
      <button type="submit" class="btn-lg" id="btnSubmit">Submit</button>
    </div>
  </div>
</form>

Answer 2

您的事件处理函数 event.preventDefault(); 正在取消表单提交事件。如果您的提交按钮上没有 id，这不会被取消，因为没有调用事件处理函数。

表单未使用 javascript 中的必需属性通过按钮 ID 进行验证

Form not validating with button id using required attribute in javascript

html

javascript

jquery-form-validator