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

Question

我正在开发 Universal 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>

Answer 2

你试过了吗parsley.js？

我创建这个 fiddle 是为了向您展示一个简单的示例。

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

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

HTML form with custom function call

html

javascript

forms

winjs