Question

所以当我省略以下jQuery确认提醒时，我有一个html5必需的输入字段工作正常...

<button name="submit" type="submit" value="draft" class="btn btn-primary btn-lg acal-confirm" title="Do not make available publically">Save draft</button>
<button name="submit" type="submit" value="publish" style="margin-left:10px;" class="btn btn-primary btn-lg acal-confirm" title="Save and publish the positions publically">Publish</button>
<button name="submit" type="submit" value="delete" style="margin-left:10px;" class="btn btn-primary btn-lg acal-confirm" title="Delete the positions for this day">Delete day</button>

...当我包含它时，确认警报会按预期显示，但如果输入字段为空，则不再触发html5验证。

它链接的html（包含在表单标签中）......

version

是什么导致这种情况发生？谢谢。

Answer 1

这是HTML5验证工作原理的一个非常简单的示例。它开箱即用。您只需要在必填字段上设置required属性，只有在所有表单都有效提交时才会提交表单。在下面的例子中，我使用了jQuery，但验证需要vanilla javascript，这是因为我编写$(this)[0]来获取DOM元素而不是jQuery对象。

//Listen the buttons (its type is not submit!)
$('input[type=button]').on('click', function(ev) {
  var action = $(this).val();
  if (confirm("Are you sure to perform "+action+"?")) {
    // force the submit since there is not a submit button
    $('#myForm').trigger('submit'); 
  }
  // we don't need an else, nor return false! We only submit if it's confirmed 
});

// Listen to the submit event, so when it's the form submitted we can know it
$('#myForm').on('submit', function(e) {
  // checkValidity() returns true if the form will be send, and false if not
  alert("Form will be submitted?: "+$(this)[0].checkValidity());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" id="myForm">
  Name: <input type="text" required><br>
  Email: <input type="email" required><br>
  <input type="button" value="First action">
  <input type="button" value="Second action">
  <input type="button" value="Third action">
</form>

一切都好！你不需要更多。管理验证有很多方法和属性，但有了这个，你就可以实现你想要的。想象一下你的代码：

<!-- FIRST CHANGE THE TYPE TO button -->
<button name="submit" type="button" value="draft" class="btn btn-primary btn-lg acal-confirm" title="Do not make available publically">Save draft</button>
<button name="submit" type="button" value="publish" style="margin-left:10px;" class="btn btn-primary btn-lg acal-confirm" title="Save and publish the positions publically">Publish</button>
<button name="submit" type="button" value="delete" style="margin-left:10px;" class="btn btn-primary btn-lg acal-confirm" title="Delete the positions for this day">Delete day</button>

和JS：

$(".acal-confirm").click(function(){

  if($(this).val() == 'delete'){
    if (confirm("Delete all positions for this day?")){
      $('form').attr('action', '/url/to/delete').trigger('submit');
    }
  }

  if($(this).val() == 'publish'){
    if (confirm("Publish all positions for this day?")){
      $('form').attr('action', '/url/to/publish').trigger('submit');
    }
  }

  if($(this).val() == 'draft'){
    if (confirm("Save all positions for this day as a draft?")){
      $('form').attr('action', '/url/to/save').trigger('submit');
    }
  }

});

告诉我这是否符合您的要求。请注意form.attr('action')版本，用于根据您单击的按钮确定需要执行的操作。有很多方法可以做到这一点，这个版本只是一个例子

包含jQuery时，HTML5验证无效

1 个答案: