CODEWITHSUNDEEP
javascripthtmlformswinjs
Milos
Milos

Reputation: 1838

HTML form with custom function call

I am developing Universal windows 8.1 app and I have a page for creating new contact. In purpose to validate input fields I put them in form. My form action not supposed to go to service it just need to validate fields and call custom function.

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

My alert is never calls in plain HTML project neither in WinJS app. I also tried with:

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

and the same.

Does it a good approach at all, to use form just for input fields validation or there is better way, and why this does not work ?

Upvotes: 2

Views: 8182

Answers (2)

Rayon
Rayon

Reputation: 36609

Inline event-binding expects functions to be under global-scope and that is one of the reason one should not use it!

In your example, OnSubmitForm is under the local scope of DOMContentLoaded handler. Best approach would be to use addEventListener and with the current code, place OnSubmitForm out of 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>

With current approach:

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>

Upvotes: 5

Haring10
Haring10

Reputation: 1557

Have you tried parsley.js?

I created this fiddle to show you a quick example.

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

Upvotes: 0

Related Questions