HTML-Formular mit benutzerdefinierten Funktionsaufruf

Question

Ich entwickle Universal Windows 8.1 App und ich habe eine Seite zum Erstellen neuer Kontakte. Zwecks Validierung von Eingabefeldern stelle ich sie in Form. Meine Formularaktion, die nicht zum Dienst gehen soll, muss nur Felder validieren und benutzerdefinierte Funktionen aufrufen.

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

Meine Warnung ist ruft nie in einfachem HTML-Projekt weder in WinJS App. Ich habe auch versucht mit:

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

und das gleiche.

Ist es überhaupt ein guter Ansatz, Formular nur für die Validierung von Eingabefeldern zu verwenden oder gibt es einen besseren Weg, und warum das nicht funktioniert?

Answer 1

Inline event-binding erwartet Funktionen unter global-scope und das ist einer der Gründe, warum man es nicht benutzen sollte!

In Ihrem Beispiel befindet sich OnSubmitForm im lokalen Bereich von DOMContentLoaded Handler. Der beste Ansatz wäre,zu verwenden und mit dem aktuellen Code OnSubmitForm aus DOMContentLoaded zu platzieren.

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>

derzeitige Ansatz mit:

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

Haben Sie versucht parsley.js?

Ich habe diese fiddle erstellt, um Ihnen ein schnelles Beispiel zu zeigen.

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