避免刷新页面,并且必填字段不起作用

我想提交禁用刷新的表单,并且希望ajax执行POST请求以避免刷新页面。

在这里,我得到了类似的结构,但是我所需的标签不起作用

<form id="test">
     <input type="text" name="title" required/>
</form>

<button id="submitForm">Save</button>

然后我像这样制作javascript:

$('#submitForm').click(function(e){
     e.preventDefault();
     $("#test").submit();
     console.log('success');
});

为什么我的表单刷新而不验证必填字段?

评论
  • 大人、恕罪
    大人、恕罪 回复

    您正在绕过免费获得的所有东西。

    这是怎么

    1. 使用提交事件
    2. 将提交按钮移到表单
    $('#test').on("submit", function(e) {
      e.preventDefault();
      // $.post(url.....)
      console.log('success');
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <form id="test">
      <input type="text" name="title" required/>
      <button type="submit">Save</button>
    </form>
    1. 或在标签上使用form =“ test”
    $('#test').on("submit", function(e) {
      e.preventDefault();
      // $.post(url.....)
      console.log('success');
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <form id="test">
      <input type="text" name="title" required/>
    </form>
    <button type="submit" form="test">Save</button>

    如果您打算动态添加表单,则需要委托

    1. 或在标签上使用form =“ test”
    $("#container").on("submit", ".dynForm", function(e) {
      e.preventDefault();
      // $.post(url.....)
      console.log('success', this.id);
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="container">
      <form id="test1" class="dynForm">
        <input type="text" name="title" required/>
      </form>
      <form id="test2" class="dynForm">
        <input type="text" name="title" required/>
      </form>
      <form id="test3" class="dynForm">
        <input type="text" name="title" required/>
      </form>
    </div>
    
    
    <button type="submit" form="test1">Save 1</button>
    <button type="submit" form="test2">Save 2</button>
    <button type="submit" form="test3">Save 3</button>