javascript - 表单 onSubmit 似乎没有读取返回状态

问题描述

我觉得很愚蠢，不知道为什么这不起作用，似乎很简单。我有一个表单并尝试使用 onSubmit="return validateForm()" 对其进行验证，但是如果您提交它时没有填写任何需要填写的字段，这将导致它提交给自己的“错误”。

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>

我承认我有一段时间没有编码了，所以也许我在表单设置中犯了一些简单的错误。

标签： javascriptformsvalidation

javascript - 表单 onSubmit 似乎没有读取返回状态

问题描述

解决方案

推荐阅读