Я чувствую себя глупо, не зная, почему это не работает, кажется достаточно простым.У меня есть форма, и я пытаюсь проверить ее с помощью 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());
}
Форма в основном состоит из текстовых полей, но есть набор переключателей, и если первый оператор if в validateForm () нажал, то есть пользователь выбрал кредитную картутогда все в порядке, и форма признает возвращение ложным.Но если они просто отправляют форму с абсолютно ничем не отмеченным, то она просто обновляет страницу, как будто она отправляет.
даже если я просто поставлю «вернуть ложь»;это все еще не останавливает это.Это просто очень странно.
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>
Я признаю, что некоторое время не кодировал, так что, возможно, я допустил простую ошибку в настройке формы.