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');
    }
});

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

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

并且一样。

这是一个很好的方法，使用表单只是为了输入字段验证还是有更好的方法，为什么这不起作用？

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

采用当前的方法：

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: