我很愚蠢，不知道为什么这不起作用，看起来很简单。我有一个表单，并尝试使用onSubmit =“ return validateForm（）”对其进行验证，但是，如果您提交的表单中没有填写任何必填字段，这将导致它向自身提交“ false”。
Javascript：
function validateForm(){
var errorFlag = true;
var fields = $("input.required");
var currFlag = true;
var i;
for(i=0; i < fields.length; i++){
var myName = $(fields[i]).attr("name");
if(myName == "payment_method"){
if($('input[name=payment_method]:checked').val().trim() == "credit card"){
var ad1 = $("#address").val().trim();
var adC = $("#city").val().trim();
var adS = $("#state").val().trim();
var adZ = $("#zip").val().trim();
if(ad1 == "" || adC == "" || adS == "" || adZ == ""){
$("#address-error").addClass("showError");
errorFlag = false;
}
}else{
$("#address-error").removeClass("showError");
}
}else{
currFlag = checkField($(fields[i]));
if(!currFlag){
errorFlag = false;
}
}
}
return errorFlag;
}
function checkField(target){
var myType = $(target).attr("type");
var myValue = $(target).val().trim();
var myName = $(target).attr("name");
var errorFlag = true;
if((myType == "text" || myType == "number") && (myValue == "" || myValue == " ")){
$("#"+myName+"-error").addClass("showError");
errorFlag = false;
}else if(myType == "email" && !validateEmail(myValue)){
$("#"+myName+"-error").addClass("showError");
errorFlag = false;
}else{
$("#"+myName+"-error").removeClass("showError");
errorFlag = true;
}
return errorFlag;
}
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
该表单主要由文本框组成，但是有一组单选按钮，如果击中validateForm（）中的第一个if语句，这意味着用户选择了信用卡，那么一切都很好，并且该表单识别出返回false 。但是，如果他们提交的表单中没有任何标记，那么它将刷新页面，就像提交一样。
即使我只是输入“ return false;”它仍然没有阻止它。太奇怪了。
表单的html如下。
<form class="span6" name="bookingForm" action="" onSubmit="return validateForm()" method="post">
<section class="grid12">
<h4 class="span12">Contact Information</h4>
<div id="first-name-error" class="error span12"><i class="fas fa-exclamation-circle"></i> Oops it looks like you may have forgotten to fill this out</div>
<label class="span12" for="first-name">First Name (required)
<input class="required" type="text" id="first-name" name="first-name">
</label>
<div id="last-name-error" class="error span12"><i class="fas fa-exclamation-circle"></i> Oops it looks like you may have forgotten to fill this out</div>
<label class="span12" for="last-name">Last Name (required)
<input class="required" type="text" id="last-name" name="last-name">
</label>
<div id="email-error" class="error span12"><i class="fas fa-exclamation-circle"></i> The email entered is invalid</div>
<label class="span12" for="email">Email (required)
<input class="required" type="email" id="email" name="email">
</label>
<label class="span12" for="phone">Phone Number (required for credit card payment)
<input type="text" id="phone" name="phone">
</label>
</section>
<section class="grid12">
<h4 class="span12">Booking Details</h4>
<div id="arrivalPicker-error" class="error span12"><i class="fas fa-exclamation-circle"></i> We need to know when you would like to stay</div>
<label class="span6" for="arrivalPicker">Arrival (required)
<input class="dateInput required" id="arrivalPicker" type="text" name="arrivalPicker">
</label>
<label class="span6" for="departPicker">Depart (required)
<input class="dateInput required" id="departPicker" type="text" name="departPicker">
</label>
<label class="span6" for="adults">Number of Adults (required)
<input class="required" type="number" id="adults" name="adults" value="1" min="1">
</label>
<label class="span6" for="children">Number of Children (required)
<input type="number" id="children" name="children" min="0" value="0">
</label>
<span class="span12"><em>Our condo can hold a maximum occupancy of 6 persons. You may add 1 extra person but will be charged $30/night from the resort</em></span>
</section>
<section class="grid12">
<h4 class="span12">Preferred Payment Method</h4>
<p class="span12">We understand the importance of your information. If choosing "Credit Card by Phone", be assured we do not write down any of your credit card information or keep it for ourselves. We enter it right into the secured Las Palomas reservation system. If you still have doubts then please feel free to use the more secure bank to bank transfer method.</p>
<fieldset class="span12">
<div id="payment-error" class="error span12"><i class="fas fa-exclamation-circle"></i> We need to know how you would like to pay</div>
<legend>Choose Your Method</legend>
<ul>
<li>
<label for="payment_method">
<input class="required" type="radio" id="creditCard" name="payment_method" value="credit card">
Credit Card by Phone
</label>
</li>
<li>
<label for="bankTransfer">
<input type="radio" id="bankTransfer" name="payment_method" value="bank transfer">
Bank Transfer
</label>
</li>
</ul>
</fieldset>
<div id="address-error" class="error span12"><i class="fas fa-exclamation-circle"></i> We need your address for credit card transactions</div>
<label class="span12" for="address">If you chose "Credit Card by Phone" please include your Address below
<input type="text" id="address" name="address">
</label>
<label class="span4" for="city">City
<input type="text" id="city" name="city">
</label>
<label class="span4" for="state">State
<input type="text" id="state" name="state">
</label>
<label class="span4" for="zip">Zip Code
<input type="text" id="zip" name="zip">
</label>
</section>
<section class="grid12">
<h4 class="span12">Optional Items</h4>
<label class="span12" for="hear">How Did You Hear About Us?
<input type="text" id="hear" name="hear">
</label>
<label class="span12" for="comments">Any Comments or Questions?
<textarea id="comments" name="comments"></textarea>
</label>
</section>
<hr />
<section class="grid12">
<label class="span12">
<input type="checkbox" name="newsletter" value="Yes"> I would like to <strong>sign-up</strong> for your <strong>newsletter</strong><br>(we will only save your name and email address into a secure database for our future newsletter email list, we will NEVER share your contact information)
</label>
<div id="first-name-error" class="error span12"><i class="fas fa-exclamation-circle"></i> We need to have your consent to store your contact information for our newsletter (and only our newsletter)</div>
<label class="span12">
<input type="checkbox" name="gdpr" value="I agree"> I consent to having this website store my name and email address in order to add me to their online Newsletter list.<br><br>
</label>
<div class="g-recaptcha span12" data-sitekey="6LcW_C0UAAAAAOS1pFLC-A0QhnTvZW8Xi9Yi88z9"></div>
<input type="submit" value="Submit Your Inquiry" class="continue">
</section>
</form>
我承认我已经有一段时间没有编码了，所以也许我在表单设置中犯了一个简单的错误。
答案 0 :(得分：0)
您需要在功能中防止默认默认表单提交：
function validateForm(event) {
event.preventDefault();
您的事件侦听器应如下所示：
<form onsubmit="validateForm(e)">