具有自定義函數調用的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>

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>