jquery - 使用 Jquery 验证时无法提交表单

Question

我在使用 Jquery 验证时无法提交表单。 当我提交时，表单会再次重新加载，并且无法执行其他操作，如发送邮件、生成警报等，这些操作在另一个 php 页面中给出

这是我的代码:

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="form" id="contactform">
    <p class="requiredNote">
        <em>*</em> Denotes a required field.
    </p>
    <div class="form-row">
        <label for="name" class="three columns ">Name of Person: <em>*</em></label>
        <input type="text" name="contactname" id="contactname" value="" class="required seven columns" role="input" aria-required="true"  size="30"/>
    </div>
    <div class="form-row">
        <label class="three columns ">Name of Company <em>*</em></label>
        <input type="text" name="subject" id="subject" value="" class="required seven columns" role="input" aria-required="true" size="30"/>
    </div>
    <div class="form-row">
        <label for="message" class="three columns ">Address<em>*</em></label>
        <textarea rows="1" cols="" name="message" id="message" class="required seven columns " role="textbox" aria-required="true"></textarea>
    </div>
    <div class="form-row">
        <label for="phno1" class="three columns " >Phone no <em>*</em></label>
        <input type="tel" name="phno1" id="phno1" value="" class="required seven columns" role="textbox" aria-required="true"  size=""/>
    </div>
    <div class="form-row">
        <label for="phno2" class="three columns ">Mobile no <em>*</em></label>
        <input type="tel" name="phno2" id="phno2" value="" class="required seven columns" role="input" aria-required="true" size="33"/>
    </div>
    <div class="form-row">
        <label for="email" class="three columns ">Email: <em>*</em></label>
        <input name="email" type="text" class="required email seven columns" id="email" value="" size="50" aria-required="true" role="input" />
    </div>
        <div class="form-row">
        <label class="three columns " >Requirement Type:<em>*</em> </label>
        <select class="required  three columns" role="input" aria-required="true" name="reqsize" id="req">
            <option  value="">-------- select --------</option>
            <option  value="Commercial">Commercial</option>
            <option  value="Warehouse">Warehouse</option>
            <option  value="Land">Land</option>
            <option  value="BTS">BTS</option>
        </select>
    </div>
    <div class="form-row">
        <label  for="prefloc" class="three columns " >Preferred Location:<em>*</em></label>
        <select class="required three columns" role="input" aria-required="true" name="prefloc" id="prefloc">
            <option  value="">-------- select --------</option>
            <option value="All" >All</option>
            <option value="Alappuzha" >Alappuzha</option>
            <option value="Alleppey" >Alleppey</option>
            <option value="Aroor" >Aroor</option>
            <option value="Mannar" >Mannar</option>
            <option value="Cheranallur" >Cheranallur</option>
            <option value="Ernakulam" >Ernakulam</option>
            <option value="Aluva" >Aluva</option>
            <option value="Angamaly" >Angamaly</option>
            <option value="Chelavannor" >Chelavannor</option>
            <option value="Chittoor" >Chittoor</option>
            <option value="Chottanikkara" >Chottanikkara</option>
            <option value="Collectorate Kochi" >Collectorate Kochi</option>
            <option value="Eloor" >Eloor</option>
            <option value="Ernakulam City" >Ernakulam City</option>
            <option value="Banerji Road" >Banerji Road</option>
            <option value="Ernakulam North" >Ernakulam North</option>
            <option value="Ernakulam South" >Ernakulam South</option>
            <option value="MG Road" >MG Road</option>
            <option value="Rajaji Road" >Rajaji Road</option>
            <option value="Kundanoor" >Kundanoor</option>
            <option value="Kumaranasan road" >Kumaranasan road</option>
            <option value="Kochi" >Kochi</option>
            <option value="Edappally" >Edappally</option>
            <option value="Kakkanad" >Kakkanad</option>
            <option value="Kaloor" >Kaloor</option>
            <option value="Elamakkara" >Elamakkara</option>
            <option value="Vyttila" >Vyttila</option>
            <option value="Vennala" >Vennala</option>
            <option value="Vaduthala" >Vaduthala</option>
            <option value="Vallarpadam" >Vallarpadam</option>
            <option value="Chembumukku" >Chembumukku</option>
            <option value="Gandhi Nagar" >Gandhi Nagar</option>
            <option value="Irumpanam" >Irumpanam</option>
        </select>
    </div>
    <div class="form-row">
        <label  for="prefcity" class="three columns " >Preferred City:<em>*</em></label>
        <select class="required three columns" role="input" aria-required="true" name="prefcity" id="prefcity">
            <option  value="">-------- select --------</option>
            <option  value="Ernakulam">Ernakulam</option>
            <option   value="Kottayam ">Kottayam </option>
            <option   value="Kollam">Kollam</option>
            <option   value="Thrissur">Thrissur</option>
            <option value="Thiruvananthapuram">Thiruvananthapuram</option>
        </select>
    </div>
    <div class="form-row">
        <label for="size" class="three columns " >Sqft details</label>
        <input name="sqft" type="text" id="sqft" class="three columns"/>
    </div>
        <div class="form-row">
        <label for="floor" class="three columns "  >Preferred Floors: <em>*</em></label>
        <select class="required  three columns" role="input" aria-required="true" name="floor" id="preffloor">
            <option  value="">-------- select --------</option>
            <option  value="1">1</option>
            <option  value="2">2</option>
            <option  value="3">3</option>
            <option  value="4">4</option>
        </select>
    </div>
    <div class="form-row">
        <label  for="shell" class="three columns "  >Shell Type:<em>*</em></label>
        <select class="required three columns" role="input" aria-required="true" name="shell" id="shell">
            <option  value="">-------- select --------</option>
            <option  value="Bare">Bare</option>
            <option   value="Warm or Plug">Warm or Plug</option>
            <option   value="play">play</option>
        </select>
    </div>
    <div class="form-row">
        <label  for="car" class="three columns " >Required car parks:<em>*</em></label>
        <select  name="car" class="three columns" id="car">
            <option  value="">-------- select --------</option>
            <option  value="20">20</option>
            <option   value="30">30</option>
            <option   value="40">40</option>
            <option   value="50">50</option>
        </select>
    </div>
    <div class="form-row">
        <label for="" class="three columns ">Required power:<em>*</em> </label>
        <select  name="power" class="three columns" id="power">
            <option  value="">-------- select --------</option>
            <option  value="35 KVA">35 KVA</option>
            <option  value="45 KVA">45 KVA</option>
            <option  value="55 KVA">55 KVA</option>
            <option  value="65 KVA">65 KVA</option>
        </select>
    </div>
    <div class="form-row">
        <label for="" class="three columns ">Rental Range per sft:<em>*</em> </label>
        <select  name="sftrange" class="three columns" id="sftrange">
            <option  value="">-------- select --------</option>
            <option  value="1000 sft-1500 sft">1000 sft-1500 sft</option>
            <option  value="2000 sft-2500 sft">2000 sft-2500 sft</option>
            <option  value="3000 sft-3500 sft">3000 sft-3500 sft</option>
            <option  value="4000 sft-4500 sft">4000 sft-4500 sft</option>
        </select>
    </div>
    <div class="form-row">
        <label for="" class="three columns ">Expected Time frame to acquire the poperty:</label>
        <input type="text" name="expt" id="" value=""  size="" class="seven columns" />
    </div>
    <div class="form-row">
        <label for="sugg" class="three columns ">Specifications, if any:</label>
        <textarea name="sugg" cols="" rows="1" class="seven columns"></textarea>
    </div>
    <div class="form-row">
        <label  for=" " class="three columns">Captcha:<em>*</em></label>
        <img src="php_captcha.php" border="0"  />
        <input name="captcha_value" type="text" id="captcha_value"  placeholder="Enter Captcha"/>
    </div>
    <div style="position:relative" class="form-row" >
        <p style="position:absolute;left:22%;top:4%">
            <input type="image" value="Send Message" name="submitButton" id="submitButton" src="assets/img/submit_btn.png" title="Click here to submit your message!" />
        </p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
    </div>
</form>

验证1.js:

$(document).ready(function() {

var jVal = {
    'contactname' : function() {

        $('body').append('<div id="contactInfo" class="info"></div>');

        var contactInfo = $('#contactInfo');
        var ele = $('#contactname');
        var pos = ele.offset();

        contactInfo.css({
            top : pos.top - 3,
            left : pos.left + ele.width() + 15
        });

        if (ele.val().length < 6) {
            jVal.errors = true;
            contactInfo.removeClass('correct').addClass('error').html('&larr; at least 6 characters').show();
            ele.removeClass('normal').addClass('wrong');
        } else {
            contactInfo.removeClass('error').addClass('correct').html('&radic;').show();
            ele.removeClass('wrong').addClass('normal');
        }
    },

    'subject' : function() {

        $('body').append('<div id="subjectInfo" class="info"></div>');

        var subjectInfo = $('#subjectInfo');
        var ele = $('#subject');
        var pos = ele.offset();

        subjectInfo.css({
            top : pos.top - 3,
            left : pos.left + ele.width() + 15
        });

        if (ele.val().length < 4) {
            jVal.errors = true;
            subjectInfo.removeClass('correct').addClass('error').html('&larr; at least 4 characters').show();
            ele.removeClass('normal').addClass('wrong');
        } else {
            subjectInfo.removeClass('error').addClass('correct').html('&radic;').show();
            ele.removeClass('wrong').addClass('normal');
        }
    },
    'message' : function() {

        $('body').append('<div id="nameInfo" class="info"></div>');

        var nameInfo = $('#nameInfo');
        var ele = $('#message');
        var pos = ele.offset();

        nameInfo.css({
            top : pos.top - 3,
            left : pos.left + ele.width() + 15
        });

        if (ele.val().length < 25) {
            jVal.errors = true;
            nameInfo.removeClass('correct').addClass('error').html('&larr; at least 25 characters').show();
            ele.removeClass('normal').addClass('wrong');
        } else {
            nameInfo.removeClass('error').addClass('correct').html('&radic;').show();
            ele.removeClass('wrong').addClass('normal');
        }
    },

    'phno1' : function() {

        $('body').append('<div id="phnInfo" class="info"></div>');

        var phnInfo = $('#phnInfo');
        var ele = $('#phno1');
        var pos = ele.offset();

        phnInfo.css({
            top : pos.top - 3,
            left : pos.left + ele.width() + 15
        });

        var patt = /^[0-9-+]+$/i;

        if (!patt.test(ele.val())) {

            jVal.errors = true;
            phnInfo.removeClass('correct').addClass('error').html('&larr; type phone no. in correct format').show();
            ele.removeClass('normal').addClass('wrong');

        }
        if (ele.val().length < 10 || ele.val().length > 12) {
            jVal.errors = true;
            phnInfo.removeClass('correct').addClass('error').html('&larr; type phone no. in correct format').show();
            ele.removeClass('normal').addClass('wrong');
        } else {
            phnInfo.removeClass('error').addClass('correct').html('&radic;').show();
            ele.removeClass('wrong').addClass('normal');
        }
    },
    'phno2' : function() {

        $('body').append('<div id="birthInfo" class="info"></div>');

        var birthInfo = $('#birthInfo');
        var ele = $('#phno2');
        var pos = ele.offset();

        birthInfo.css({
            top : pos.top - 3,
            left : pos.left + ele.width() + 15
        });

        var patt = /^[0-9-+]+$/i;

        if (!patt.test(ele.val())) {

            jVal.errors = true;
            birthInfo.removeClass('correct').addClass('error').html('&larr; type phone no. in correct format').show();
            ele.removeClass('normal').addClass('wrong');

        }
        if (ele.val().length < 10 || ele.val().length > 12) {
            jVal.errors = true;
            birthInfo.removeClass('correct').addClass('error').html('&larr; type phone no. in correct format').show();
            ele.removeClass('normal').addClass('wrong');
        } else {
            birthInfo.removeClass('error').addClass('correct').html('&radic;').show();
            ele.removeClass('wrong').addClass('normal');
        }
    },
    'email' : function() {

        $('body').append('<div id="emailInfo" class="info"></div>');

        var emailInfo = $('#emailInfo');
        var ele = $('#email');
        var pos = ele.offset();

        emailInfo.css({
            top : pos.top - 3,
            left : pos.left + ele.width() + 15
        });

        var patt = /^.+@.+[.].{2,}$/i;

        if (!patt.test(ele.val())) {
            jVal.errors = true;
            emailInfo.removeClass('correct').addClass('error').html('&larr; give me a valid email adress, ok?').show();
            ele.removeClass('normal').addClass('wrong');
        } else {
            emailInfo.removeClass('error').addClass('correct').html('&radic;').show();
            ele.removeClass('wrong').addClass('normal');
        }
    },
    'req' : function() {

        $('body').append('<div id="genderInfo" class="info"></div>');

        var genderInfo = $('#genderInfo');
        var ele = $('#req');
        var pos = ele.offset();

        genderInfo.css({
            top : pos.top + 1,
            left : pos.left + ele.width() + 25
        });

        if (ele.length == 0 || $(ele).val() == "") {
            jVal.errors = true;
            genderInfo.removeClass('correct').addClass('error').html('&larr; please select your choice').show();
            ele.removeClass('normal').addClass('wrong');
        } else {
            genderInfo.removeClass('error').addClass('correct').html('&radic;').show();
            ele.removeClass('wrong').addClass('normal');
        }
    },
    'prefloc' : function() {

        $('body').append('<div id="preflocInfo" class="info"></div>');

        var preflocInfo = $('#preflocInfo');

        var ele = $('#prefloc');
        var pos = ele.offset();

        preflocInfo.css({
            top : pos.top + 1,
            left : pos.left + ele.width() + 25
        });
        //if($('select[name="prefloc"]:selected').length === 0)
        if (ele.length == 0 || $(ele).val() == "") {
            jVal.errors = true;
            preflocInfo.removeClass('correct').addClass('error').html('&larr; please select your choice').show();
            ele.removeClass('normal').addClass('wrong');
        } else {
            preflocInfo.removeClass('error').addClass('correct').html('&radic;').show();
            ele.removeClass('wrong').addClass('normal');
        }
    },
    'prefcity' : function() {

        $('body').append('<div id="prefcityInfo" class="info"></div>');

        var prefcityInfo = $('#prefcityInfo');

        var ele = $('#prefcity');
        var pos = ele.offset();

        prefcityInfo.css({
            top : pos.top + 1,
            left : pos.left + ele.width() + 25
        });
        //if($('select[name="prefcity"]:selected').length === 0)
        if (ele.length == 0 || $(ele).val() == "") {
            jVal.errors = true;
            prefcityInfo.removeClass('correct').addClass('error').html('&larr; please select your choice').show();
            ele.removeClass('normal').addClass('wrong');
        } else {
            prefcityInfo.removeClass('error').addClass('correct').html('&radic;').show();
            ele.removeClass('wrong').addClass('normal');
        }
    },
    'preffloor' : function() {

        $('body').append('<div id="preffloorInfo" class="info"></div>');

        var preffloorInfo = $('#preffloorInfo');

        var ele = $('#preffloor');
        var pos = ele.offset();

        preffloorInfo.css({
            top : pos.top + 1,
            left : pos.left + ele.width() + 25
        });
        //if($('select[name="preffloor"]:selected').length === 0)
        if (ele.length == 0 || $(ele).val() == "") {
            jVal.errors = true;
            preffloorInfo.removeClass('correct').addClass('error').html('&larr; please select your choice').show();
            ele.removeClass('normal').addClass('wrong');
        } else {
            preffloorInfo.removeClass('error').addClass('correct').html('&radic;').show();
            ele.removeClass('wrong').addClass('normal');
        }
    },

    'shell' : function() {

        $('body').append('<div id="shellInfo" class="info"></div>');

        var shellInfo = $('#shellInfo');

        var ele = $('#shell');
        var pos = ele.offset();

        shellInfo.css({
            top : pos.top + 1,
            left : pos.left + ele.width() + 25
        });
        //if($('select[name="shell"]:selected').length === 0)
        if (ele.length == 0 || $(ele).val() == "") {
            jVal.errors = true;
            shellInfo.removeClass('correct').addClass('error').html('&larr; please select your choice').show();
            ele.removeClass('normal').addClass('wrong');
        } else {
            shellInfo.removeClass('error').addClass('correct').html('&radic;').show();
            ele.removeClass('wrong').addClass('normal');
        }
    },

    'car' : function() {

        $('body').append('<div id="carInfo" class="info"></div>');

        var carInfo = $('#carInfo');

        var ele = $('#car');
        var pos = ele.offset();

        carInfo.css({
            top : pos.top + 1,
            left : pos.left + ele.width() + 25
        });
        //if($('select[name="car"]:selected').length === 0)
        if (ele.length == 0 || $(ele).val() == "") {
            jVal.errors = true;
            carInfo.removeClass('correct').addClass('error').html('&larr; please select your choice').show();
            ele.removeClass('normal').addClass('wrong');
        } else {
            carInfo.removeClass('error').addClass('correct').html('&radic;').show();
            ele.removeClass('wrong').addClass('normal');
        }
    },
    'power' : function() {

        $('body').append('<div id="powerInfo" class="info"></div>');

        var powerInfo = $('#powerInfo');

        var ele = $('#power');
        var pos = ele.offset();

        powerInfo.css({
            top : pos.top + 1,
            left : pos.left + ele.width() + 25
        });
        //if($('select[name="power"]:selected').length === 0)
        if (ele.length == 0 || $(ele).val() == "") {
            jVal.errors = true;
            powerInfo.removeClass('correct').addClass('error').html('&larr; please select your choice').show();
            ele.removeClass('normal').addClass('wrong');
        } else {
            powerInfo.removeClass('error').addClass('correct').html('&radic;').show();
            ele.removeClass('wrong').addClass('normal');
        }
    },
    'sftrange' : function() {

        $('body').append('<div id="sftrangeInfo" class="info"></div>');

        var sftrangeInfo = $('#sftrangeInfo');

        var ele = $('#sftrange');
        var pos = ele.offset();

        sftrangeInfo.css({
            top : pos.top + 1,
            left : pos.left + ele.width() + 25
        });
        //if($('select[name="sftrange"]:selected').length === 0)
        if (ele.length == 0 || $(ele).val() == "") {
            jVal.errors = true;
            sftrangeInfo.removeClass('correct').addClass('error').html('&larr; please select your choice').show();
            ele.removeClass('normal').addClass('wrong');
        } else {
            sftrangeInfo.removeClass('error').addClass('correct').html('&radic;').show();
            ele.removeClass('wrong').addClass('normal');
        }
    },
    'captcha_value' : function() {

        $('body').append('<div id="captchaInfo" class="info"></div>');

        var captchaInfo = $('#captchaInfo');
        var ele = $('#captcha_value');
        var pos = ele.offset();

        captchaInfo.css({
            top : pos.top + 1,
            left : pos.left + ele.width() + 15
        });

        if (ele.val().length < 6) {
            jVal.errors = true;
            captchaInfo.removeClass('correct').addClass('error').html('&larr; Please enter given captcha').show();
            ele.removeClass('normal').addClass('wrong');
        } else {
            captchaInfo.removeClass('error').addClass('correct').html('&radic;').show();
            ele.removeClass('wrong').addClass('normal');
        }
    },

    /*'sendIt' : function() {
        if (!jVal.errors) {
            $('#contactform').submit();
        }
    }*/
};

// ====================================================== //

$('#submitButton').click(function() {
    var obj = $.browser.webkit ? $('body') : $('html');
    obj.animate({
        scrollTop : $('#contactform').offset().top
    }, 750, function() {
        jVal.errors = false;
        jVal.contactname();
        jVal.subject();
        jVal.message();
        jVal.phno1();
        jVal.phno2();
        jVal.email();
        jVal.req();
        jVal.prefloc();
        jVal.prefcity();
        jVal.preffloor();
        jVal.shell();
        jVal.car();
        jVal.power();
        jVal.sftrange();
        jVal.captcha_value();
        jVal.sendIt();
    });
    return false;
});

$('#contactname').change(jVal.contactname);
$('#subject').change(jVal.subject);
$('#message').change(jVal.message);
$('#phno1').change(jVal.phno1);
$('#phno2').change(jVal.phno2);
$('#email').change(jVal.email);
$('input[name="req"]').change(jVal.req);
$('select[name="prefloc"]').change(jVal.prefloc);
$('select[name="prefcity"]').change(jVal.prefcity);
$('select[name="preffloor"]').change(jVal.preffloor);
$('select[name="shell"]').change(jVal.shell);
$('select[name="car"]').change(jVal.car);
$('select[name="power"]').change(jVal.power);
$('select[name="sftrange"]').change(jVal.sftrange);
$('#captcha_value').change(jVal.captcha_value);

});

Answer 1

您的 sendit 函数位于评论 block 内。这是你的问题吗？因为此刻表单没有被提交？

此外，如果您取消注释，请确保 jVal.errors 存在，因为我找不到它(或者我正在阅读它)。