带有自定义函数调用的 HTML 表单

Question

我正在开发通用 Windows 8.1 应用程序，并且有一个用于创建新联系人的页面。为了验证输入字段，我将它们放入表单中。我的表单操作不应该去服务它只需要验证字段并调用自定义函数。

HTML：

<form name="myform" onSubmit="JavaScript:OnSubmitForm()">
     <div>
         <label>
             First name<br />
             <input id="contactFirstName" class="win-textbox" type="text" name="firstName" required />
         </label>
     </div>
     <div>
         <label>
             Last name<br />
             <input id="contactLastName" class="win-textbox" type="text" name="lastName" />
         </label>
     </div>
     <input type="submit" value="Submit"/>
     <input type="button" value="Cancel"/>
</form>

JavaScript：

document.addEventListener('DOMContentLoaded', function() {
    function OnSubmitForm()
    {
        alert('click');
    }
});

我的警报永远不会在纯 HTML 项目中调用，也不会在 WinJS 应用程序中调用。我也尝试过：

  <form name="myform" onsubmit="return OnSubmitForm();">

和相同的。

仅使用表单进行输入字段验证是否是一个好方法，或者有更好的方法，为什么这不起作用？

Answer 1

内联event-binding期望函数位于下方global-scope，这就是不应该使用它的原因之一！

在您的示例中，OnSubmitForm位于处理程序的本地范围内DOMContentLoaded。最好的方法是使用addEventListener当前代码，OnSubmitForm将DOMContentLoaded.

document.getElementById('myform').addEventListener('submit', function(e) {
  e.preventDefault(); //to prevent form submission
  alert('click');
});

<form name="myform" id='myform'>
  <div>
    <label>
      First name
      <br />
      <input id="contactFirstName" class="win-textbox" type="text" name="firstName" required />
    </label>
  </div>
  <div>
    <label>
      Last name
      <br />
      <input id="contactLastName" class="win-textbox" type="text" name="lastName" />
    </label>
  </div>
  <input type="submit" value="Submit" />
  <input type="button" value="Cancel" />
</form>

采用当前方法：

function OnSubmitForm() {
  alert('click');
}

<form name="myform" onSubmit="JavaScript:OnSubmitForm()">
  <div>
    <label>
      First name
      <br />
      <input id="contactFirstName" class="win-textbox" type="text" name="firstName" required />
    </label>
  </div>
  <div>
    <label>
      Last name
      <br />
      <input id="contactLastName" class="win-textbox" type="text" name="lastName" />
    </label>
  </div>
  <input type="submit" value="Submit" />
  <input type="button" value="Cancel" />
</form>