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

HTML form with custom function call

本文关键字：HTML 表单 函数调用 自定义      更新时间：2023-09-26

我正在开发通用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();">

和一样的。

仅

将表单用于输入字段验证是否是一种好方法，或者有更好的方法，为什么这不起作用？

内

联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>

你试过欧芹吗.js？

我创建这个小提琴是为了向您展示一个简单的例子。

<form name="myform">
 <div>
     <label>
         First name<br />
         <input id="contactFirstName" data-parsley-required-message="First name required" class="win-textbox" type="text" name="firstName" required data-parsley-trigger="change focusout" data-parsley-pattern="/^[a-zA-Z]*$/"/>
     </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"/>


<script src="http://parsleyjs.org/dist/parsley.js"></script>
<script>
    window.ParsleyConfig = {
        errorsWrapper: '<div></div>',
        errorTemplate: '<div class="alert alert-danger parsley" role="alert"></div>',
        errorClass: 'has-error',
        successClass: 'has-success'
    };
</script>
相关文章：