0
我在html表單上有兩個單獨的按鈕，分別驗證輸入和發送表單。我想將這些按鈕合併在一起，以便電子郵件只有在表單被正確驗證時纔會生成。以下列出一些我的代碼和任何解決方案或想法，將不勝感激：Javascript，僅當表單驗證正確時才發送電子郵件
// JavaScript Document
function ValidateForm() {
\t //Sets variables for testing the inputs by obtaining the values entered into the field
\t var firstName = document.getElementById('txtFirstName').value;
\t var lastName = document.getElementById('txtLastName').value;
\t var DOB = document.getElementById('txtDob').value;
\t var pattern =/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;
\t //This pattern acts as a template for the DOB field to follow
\t var email = document.getElementById('txtEmail').value;
\t var atpos = email.indexOf('@');
\t var dotpos = email.lastIndexOf('.');
\t //These variables check for the placement of the @ and . inside the email input
\t var feedback = document.getElementById('txtFeedback').value;
\t var invalidForm = 0;
\t if (firstName == "") {
\t \t document.getElementById('txtFirstName').className = "errorStyle";
\t \t document.getElementById('errFirstName').innerHTML = \t "Must Enter a Valid First Name"; \t
\t \t invalidForm=1;
\t }
\t else if (firstName.length >15) {
\t \t document.getElementById('txtFirstName').className = "errorStyle";
\t \t document.getElementById('errFirstName').innerHTML = "Must be Less than 15 Characters";
\t \t invalidForm=1; \t
\t }
\t else if (isNaN(firstName) == false){ //checks whether the input is a umber or not
\t \t document.getElementById('txtFirstName').className = "errorStyle";
\t \t document.getElementById('errFirstName').innerHTML = "Letters only Please";
\t \t invalidForm=1;
\t }
\t else if (firstName.length <3) {
\t \t document.getElementById('txtFirstName').className = "errorStyle";
\t \t document.getElementById('errFirstName').innerHTML = "Must be More than 3 Characters";
\t \t invalidForm=1; \t
\t }
\t else {
\t \t document.getElementById('txtFirstName').className = "defaultStyle";
\t \t document.getElementById('errFirstName').innerHTML = ""; \t
\t }
\t
\t if (lastName == "") {
\t \t document.getElementById('txtLastName').className = "errorStyle";
\t \t document.getElementById('errLastName').innerHTML = "Must Enter a Valid Surname";
\t \t invalidForm=1; \t
\t } \t
\t else if (lastName.length >15) {
\t \t document.getElementById('txtLastName').className = "errorStyle";
\t \t document.getElementById('errLastName').innerHTML = "Must be Less than 15 Characters";
\t \t invalidForm=1;
\t } \t
\t else if (isNaN(lastName) == false){
\t \t document.getElementById('txtFirstName').className = "errorStyle";
\t \t document.getElementById('errFirstName').innerHTML = "Letters only Please";
\t \t invalidForm=1;
\t }
\t else if (lastName.length <3) {
\t \t document.getElementById('txtLastName').className = "errorStyle";
\t \t document.getElementById('errLastName').innerHTML = "Must be More than 3 Characters";
\t \t invalidForm=1; \t
\t } \t
\t else {
\t \t document.getElementById('txtLastName').className = "defaultStyle";
\t \t document.getElementById('errLastName').innerHTML = ""; \t
\t }
\t
\t if (DOB == null || DOB == "" || !pattern.test(DOB)) {
\t //tests whether DOB field is empty, blank, or doesn't fir the template set as seen above in the variables
\t \t document.getElementById('txtDob').className = "errorStyle";
\t \t document.getElementById('errDob').innerHTML = "Must Enter a valid Date of Birth (DD/MM/YYYY)";
\t \t invalidForm=1;
\t }
\t else {
\t \t document.getElementById('txtDob').className = "defaultStyle";
\t \t document.getElementById('errDob').innerHTML =""; \t
\t }
\t
\t if (email =="") {
\t \t document.getElementById('txtEmail').className = "errorStyle";
\t \t document.getElementById('errEmail').innerHTML = "Must Enter an Email";
\t \t invalidForm=1; \t
\t }
\t else if (atpos<1 || dotpos<atpos || dotpos+2 == email.length) {
\t \t document.getElementById('txtEmail').className ="errorStyle";
\t \t document.getElementById('errEmail').innerHTML ="Must Enter a Valid Email";
\t \t invalidForm=1;
\t }
\t else {
\t \t document.getElementById('txtEmail').className ="defaultStyle";
\t \t document.getElementById('errEmail').innerHTML = "";
\t }
\t
\t if (feedback == "") {
\t \t document.getElementById('txtFeedback').className = "errorStyle";
\t \t document.getElementById('errFeedback').innerHTML = "Must Enter Some Feedback";
\t \t invalidForm=1; \t
\t }
\t else if (feedback.length > 1000) {
\t \t document.getElementById('txtFeedback').className = "errorStyle";
\t \t document.getElementById('errFeedback').innerHTML = "Must Enter Some Feedback that does not exceed 200 characters";
\t \t invalidForm=1;
\t }
\t else {
\t \t document.getElementById('txtFeedback').className ="defaultStyle";
\t \t document.getElementById('errFeedback').innerHTML = "";
\t }
\t \t
\t if (invalidForm ==0) {
\t \t alert("Your Information that has been entered is valid and ready to send, simply click the Submit button to do so.");
\t }
\t
}<form id="myForm" action="MAILTO:[email protected]; [email protected]?Subject=Belfast%20Met%20Sights%20and%20Sounds%20Feedback" method="post" enctype="text/plain">
\t <fieldset style="width:85%; margin:auto;">
<legend>Your Details</legend>
<img src="../Images/Submit-Query.gif" width="30%" alt="Submit Your Images" style="display:block; float:right; padding-right:20px;"/>
\t \t <p class="myText">Title:
<select name="Title " id="txtTitle">
<option value=" Mr">Mr</option>
<option value=" Mrs">Mrs</option>
<option value=" Ms">Ms</option>
<option value=" Miss">Miss</option>
<option value=" Dr">Dr</option>
<option value=" Prof">Prof</option>
</select>
<span class="errSpan" id="errTitle"></span>
</p>
\t \t \t <p class="myText">First Name:
<input name="First Name " type="text" id="txtFirstName" />
<span class="errSpan" id="errFirstName"></span>
</p>
\t \t \t
\t \t \t <p class="myText">Last Name:
<input name="Last Name " type="text" id="txtLastName" />
<span class="errSpan" id="errLastName"></span>
</p>
\t \t \t
\t <p class="myText">Gender:
<select name="Gender " id="txtGender">
<option value=" Male">Male</option>
<option value=" Female">Female</option>
</select>
</p>
\t
\t \t \t <p class="myText">DOB:
<input name="DOB "type="text" id="txtDob" />
<span class="errSpan" id="errDob"></span>
</p>
\t \t \t
\t \t \t <p class="myText">Email Address:
<input name="Email Address " type="text" id="txtEmail" />
<span class="errSpan" id="errEmail"></span>
</p>
</fieldset>
\t <br />
<fieldset style="width:85%; margin:auto;">
<legend class="text">Your Feedback</legend>
\t <p class="myText">Feedback Type:
<select name="Feedback Type " id="txtFeedbackType">
<option value=" General Feedback">General Feedback</option>
<option value=" Query">Query</option>
<option value=" Suggestion">Suggestion</option>
<option value=" Other(Please Specify Below)">Other (Please Specify Below)</option>
</select>
<span class="errSpan" id="errFeedbackType"></span>
</p>
\t
\t <p class="myText">Feedback:
<textarea class="myText" name="Feedback" cols="30" rows="5" id="txtFeedback"></textarea>
<span class="errSpan" id="errFeedback"></span>
\t </p>
</fieldset>
\t <br />
<input onclick="ValidateForm();" type="button" value="Check Information" />
<input type="submit" value="Send Feedback" />
<input type="reset" value="Reset Fields"/>
\t \t \t </form>
禁用郵件發送按鈕。如果表單有效，那麼只能啓用它 –
並且一定要在後端驗證。 Javascript驗證很容易繞過 –