我在html表单上有两个单独的按钮，用于验证输入，然后分别发送表单。我想将这些按钮合并在一起，这样只有在正确验证表单时才会生成电子邮件。我已在下面提供了我的代码，我们将非常感谢任何解决方案或想法：
// JavaScript Document
function ValidateForm() {
//Sets variables for testing the inputs by obtaining the values entered into the field
var firstName = document.getElementById('txtFirstName').value;
var lastName = document.getElementById('txtLastName').value;
var DOB = document.getElementById('txtDob').value;
var pattern =/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;
//This pattern acts as a template for the DOB field to follow
var email = document.getElementById('txtEmail').value;
var atpos = email.indexOf('@');
var dotpos = email.lastIndexOf('.');
//These variables check for the placement of the @ and . inside the email input
var feedback = document.getElementById('txtFeedback').value;
var invalidForm = 0;
if (firstName == "") {
document.getElementById('txtFirstName').className = "errorStyle";
document.getElementById('errFirstName').innerHTML = "Must Enter a Valid First Name";
invalidForm=1;
}
else if (firstName.length >15) {
document.getElementById('txtFirstName').className = "errorStyle";
document.getElementById('errFirstName').innerHTML = "Must be Less than 15 Characters";
invalidForm=1;
}
else if (isNaN(firstName) == false){ //checks whether the input is a umber or not
document.getElementById('txtFirstName').className = "errorStyle";
document.getElementById('errFirstName').innerHTML = "Letters only Please";
invalidForm=1;
}
else if (firstName.length <3) {
document.getElementById('txtFirstName').className = "errorStyle";
document.getElementById('errFirstName').innerHTML = "Must be More than 3 Characters";
invalidForm=1;
}
else {
document.getElementById('txtFirstName').className = "defaultStyle";
document.getElementById('errFirstName').innerHTML = "";
}
if (lastName == "") {
document.getElementById('txtLastName').className = "errorStyle";
document.getElementById('errLastName').innerHTML = "Must Enter a Valid Surname";
invalidForm=1;
}
else if (lastName.length >15) {
document.getElementById('txtLastName').className = "errorStyle";
document.getElementById('errLastName').innerHTML = "Must be Less than 15 Characters";
invalidForm=1;
}
else if (isNaN(lastName) == false){
document.getElementById('txtFirstName').className = "errorStyle";
document.getElementById('errFirstName').innerHTML = "Letters only Please";
invalidForm=1;
}
else if (lastName.length <3) {
document.getElementById('txtLastName').className = "errorStyle";
document.getElementById('errLastName').innerHTML = "Must be More than 3 Characters";
invalidForm=1;
}
else {
document.getElementById('txtLastName').className = "defaultStyle";
document.getElementById('errLastName').innerHTML = "";
}
if (DOB == null || DOB == "" || !pattern.test(DOB)) {
//tests whether DOB field is empty, blank, or doesn't fir the template set as seen above in the variables
document.getElementById('txtDob').className = "errorStyle";
document.getElementById('errDob').innerHTML = "Must Enter a valid Date of Birth (DD/MM/YYYY)";
invalidForm=1;
}
else {
document.getElementById('txtDob').className = "defaultStyle";
document.getElementById('errDob').innerHTML ="";
}
if (email =="") {
document.getElementById('txtEmail').className = "errorStyle";
document.getElementById('errEmail').innerHTML = "Must Enter an Email";
invalidForm=1;
}
else if (atpos<1 || dotpos<atpos || dotpos+2 == email.length) {
document.getElementById('txtEmail').className ="errorStyle";
document.getElementById('errEmail').innerHTML ="Must Enter a Valid Email";
invalidForm=1;
}
else {
document.getElementById('txtEmail').className ="defaultStyle";
document.getElementById('errEmail').innerHTML = "";
}
if (feedback == "") {
document.getElementById('txtFeedback').className = "errorStyle";
document.getElementById('errFeedback').innerHTML = "Must Enter Some Feedback";
invalidForm=1;
}
else if (feedback.length > 1000) {
document.getElementById('txtFeedback').className = "errorStyle";
document.getElementById('errFeedback').innerHTML = "Must Enter Some Feedback that does not exceed 200 characters";
invalidForm=1;
}
else {
document.getElementById('txtFeedback').className ="defaultStyle";
document.getElementById('errFeedback').innerHTML = "";
}
if (invalidForm ==0) {
alert("Your Information that has been entered is valid and ready to send, simply click the Submit button to do so.");
}
}<form id="myForm" action="MAILTO:dcrummey@belfastmet.ac.uk; pauldocherty@belfastmet.ac.uk?Subject=Belfast%20Met%20Sights%20and%20Sounds%20Feedback" method="post" enctype="text/plain">
<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;"/>
<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>
<p class="myText">First Name:
<input name="First Name " type="text" id="txtFirstName" />
<span class="errSpan" id="errFirstName"></span>
</p>
<p class="myText">Last Name:
<input name="Last Name " type="text" id="txtLastName" />
<span class="errSpan" id="errLastName"></span>
</p>
<p class="myText">Gender:
<select name="Gender " id="txtGender">
<option value=" Male">Male</option>
<option value=" Female">Female</option>
</select>
</p>
<p class="myText">DOB:
<input name="DOB "type="text" id="txtDob" />
<span class="errSpan" id="errDob"></span>
</p>
<p class="myText">Email Address:
<input name="Email Address " type="text" id="txtEmail" />
<span class="errSpan" id="errEmail"></span>
</p>
</fieldset>
<br />
<fieldset style="width:85%; margin:auto;">
<legend class="text">Your Feedback</legend>
<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>
<p class="myText">Feedback:
<textarea class="myText" name="Feedback" cols="30" rows="5" id="txtFeedback"></textarea>
<span class="errSpan" id="errFeedback"></span>
</p>
</fieldset>
<br />
<input onclick="ValidateForm();" type="button" value="Check Information" />
<input type="submit" value="Send Feedback" />
<input type="reset" value="Reset Fields"/>
</form>
答案 0 :(得分：0)
使用表单的onsumbit事件。如果验证确定，则返回true，否则返回false：
<form id="myForm" onsubmit="return ValidateForm()" ....
然后将功能更改为：
if (invalidForm ==0) {
alert("Your Information that has been entered is valid and ready to send.");
return true;
}
else {
return false;
}
以下是一个非常简化的示例：https://jsfiddle.net/83LLcq3u/1/