mardi 21 juin 2016

Form validation returns false, yet multi-part form still advances

I have a multi-part form that begins with a zip code check to verify that the applicant is in my service area. When a zip code is submitted it runs through the check and does the zip validation properly, as far as I can tell, but will move on to the next part of the form regardless of whether it validates to true or false.

<SCRIPT type="text/javascript">
    $(document).ready(function()
    {  
        $("#add_zip").change(function() 
        {  
            var add_zip = $("#add_zip").val();
            var msgbox = $("#result-msg");

            if(add_zip.length > 4)
            {
                $("#result-msg").html('Checking availability...');

                $.ajax({  
                    type: "POST",  
                    url: "zipcheck.php",  
                    data: {add_zip : add_zip}, 
                    beforeSend: function() { 
                        $("#product_id").html('<option> Loading ...</option>'); 
                    },
                    success: function(msg){  
                        if(msg == 'OK')
                        { 
                            $("#add_zip").removeClass("invalid");
                            $("#enroll_county").prop('disabled', false);
                            msgbox.html('You are in our service area.');
                        }  
                        else {  
                            $("#add_zip").addClass("invalid");
                            $("#enroll_county").prop('disabled', true);
                            msgbox.html(msg);
                        }  
                    } 
                }); 
            }
            else {
                $("#add_zip").addClass("red");
                $("#enroll_county").prop('disabled', true);
                $("#result-msg").html('<span id="status">Please Enter atleast 5 digits</span>');
            }
        return false;
        });
    });
</SCRIPT>
<form action="" method="POST" class="form-validate" > 
    <h2>Online Enrollment  <span class="step_dcl">(Step 1 of 6)</span></h2>
    <p class="form_area">
        <label id="add_zip-lbl" class="hasTip required" title="" for="add_zip"><span class="star_req">*</span>Please enter your zip code</label>
        <input type="text" name="add_zip" id="add_zip" value="<?=$this->enroll_form['add_zip'] ?>" class="inputbox required">
        <span id="result-msg"></span>                            
    </p>          
    <input type="submit" name="enroll_county" id="enroll_county" class="enroll_btn" value="ENROLL ONLINE">
</form>

I have also tried adding onsubmit="return false; "to the submit button on the last line, but it still moves me to the next part of the form.

Also, msgbox.html(msg); displays on the page for an instant before the next form part loads when they aren't in my service area, and that it functions perfectly if I click off of the text box or click tab rather than clicking enter after entering the zip.

Any help would be greatly appreciated :)

Aucun commentaire:

Enregistrer un commentaire