我怎么能得到表单验证工作时，使用"共享"按钮(而不是“submit”类型的输入元素)

How can I get Form Validation to work when using a "shared" button (instead of an input element of type "submit")?

本文关键字：quot submit 元素 输入 类型 共享 表单 怎么能 验证 工作 使用      更新时间：2023-09-26

我在我的HTML中有一些验证("required")，如下所示:

<input class="firstblockinput" type="text" id="travelername" title="Last Name, First Name, Middle Initial" required />

页面上有一个"共享"按钮:

<template name="postTravelWizard">
    {{> Template.dynamic template=getStepTemplate}}
    <!-- <button type="button" name="nextStep"  
id="nextStep">Next</button> -->
    <input type="submit" name="nextStep" id="nextStep" value="Submit">
</template>

这个按钮对于所有模板来说都是"不变的"(这些模板是动态交换的)。只要用下面的代码将一个模板替换为另一个模板，按钮就可以正常工作:

Template.postTravelWizard.events({
  'click #nextStep': function(e, t) {
     var step = Session.get('stepNum');
     step = (step) < 5 ? ++step : 1;
     Session.set('stepNum', step);
     if ($('#visitor').is(':checked')) {
       console.log('visitor is checked');
       var visaselection = $('select[name="selvisatype"]').val();
       console.log('visaselection is ' + visaselection);
  }
},

但是，表单验证没有触发，可能是因为这是一个按钮，而不是"submit"类型的输入。

但是如果我把它从按钮改为input type="submit"，也就是说从这里:

<button type="button" name="nextStep" id="nextStep">Next</button>

…: 

<input type="submit" name="nextStep" id="nextStep" value="Next">

. .事件处理程序:

Template.postTravelWizard.events({
//'click #nextStep': function(e, t) {
  'submit form': function(e) {
    e.preventDefault();
    //save something...
    var step = Session.get('stepNum');
    step = (step) < 5 ? ++step : 1;
    Session.set('stepNum', step);
    if ($('#visitor').is(':checked')) {
      console.log('visitor is checked');
      var visaselection = $('select[name="selvisatype"]').val();
      console.log('visaselection is ' + visaselection);
      // When this is working (the first two return "visaselection is undefined" and the last one returns simply
      // "visaselection is "), do something similar for ucemployee (input type=radio) and selectcampus (select element)
    }
},

…它不会换出模板。事实上，我在"'提交表单':function(e){"处理程序(在"e.p preventdefault();"行上)中设置的断点甚至没有达到…??

这是一个"第二十二条军规"的情况。

在这种情况下，我必须手动验证表单条目吗?

在Firefox中，在浏览器生成错误消息之前，至少需要一个提交操作。对于推理，例如，还没有填写必需的字段不是错误，只有在该状态下尝试提交表单才是错误。

可能是因为这是一个按钮，而不是"submit"类型的输入

是正确的。根据评论，如果任何表单元素验证失败，HTML5将阻止提交。因此，如果表单包含错误，为submit事件注册的修改后的事件处理程序永远不会被调用。因此，正如您所看到的，永远不会到达断点集。已经说过，我希望在按下提交按钮时显示错误-请告知详细信息，如果不是。

因此，要让#nextStop按钮为屏幕上的表单生成浏览器错误消息，它确实需要是一个提交按钮。(当然，它仍然可以有鼠标事件处理程序，如果要阻止表单提交，提交事件侦听器可以取消该操作)。

注意CSS验证伪类:invalid，:valid，:required可以为用户提供问题条目的早期预警。

相关文章：