javascript - 提交按钮无法处理 javascript 以进行验证

Question

有人知道为什么我的提交按钮不会调用 javascript 来验证表单中是否填充了某些字段吗？

为了更好地了解我提供了网站链接:http://www.flyingcowproduction.com/pls然后单击顶部菜单中的“预订”按钮。

表格:

<form method="post" action="process.php">
                <div class="grid_6">
                    <div class="element">
                        <label>Name*</label>
                        <input type="text" name="name" class="text" style="width:427px;" />
                    </div>
                </div>
                <div class="clear"></div>
                <div class="grid_3">
                    <div class="element">
                        <label>Email*</label>
                        <input type="text" name="email" class="text" style="width:200px;" />
                    </div>
                </div>
                <div class="grid_3">
                    <div class="element">
                        <label>Phone</label>
                        <input type="text" name="phone" class="text" style="width:200px;" />
                    </div>
                </div>
                <div class="clear"></div>
                <div class="grid_3">
                    <div class="element">
                        <label>Address*</label>
                        <input type="text" name="address" class="text" style="width:200px;" />
                    </div>
                </div>
                <div class="grid_2">
                    <div class="element">
                        <label>City*</label>
                        <input type="text" name="city" class="text" style="width:119px;" />
                    </div>
                </div>
                <div class="grid_1">
                    <div class="element">
                        <label>Zip*</label>
                        <input type="text" name="zipcode" class="text" style="width:55px;" />
                    </div>
                </div>
                <div class="clear"></div>
                <div class="grid_6">
                    <div class="element">
                        <label>Where do you want to go?*</label>
                        <input type="text" name="service" class="text" style="width:427px;" />
                    </div>
                </div>
                <div class="clear"></div>
                <div class="grid_3">
                    <div class="element">
                        <label>Date and time of service*</label>
                        <input type="text" name="datetime" class="text" style="width:200px;" />
                    </div>
                </div>
                <div class="grid_2">
                    <div class="element">
                        <label>Passengers (max)</label>
                        <input type="text" name="passingers" class="text" style="width:75px;" />
                    </div>
                </div>
                <div class="grid_1">
                    &nbsp;
                </div>
                <div class="clear"></div>
                <div class="grid_6">
                    <div class="element">
                        <label>Comment</label>
                        <textarea name="comment" class="text textarea" style="width:427px;" rows="4"  /></textarea>
                    </div>
                </div>
                <div class="clear"></div>
                <div class="grid_6">
                    <div class="element">
                        <input type="submit" id="submit" value="MAKE RESERVATION" />
                        <p>&nbsp;</p>
                    </div>
                </div>
            </form>


<script type="text/javascript">

$(文档).ready(函数() {

//if submit button is clicked
$('#submit').click(function () {        

    //Get the data from all the fields
    var name = $('input[name=name]');
    var email = $('input[name=email]');
    var phone = $('input[name=phone]');
    var address = $('input[name=address]');
    var city = $('input[name=city]');
    var zipcode = $('input[name=zipcode]');
    var service = $('input[name=service]');
    var datetime = $('input[name=datetime]');
    var passingers = $('input[name=passingers]');
    var comment = $('textarea[name=comment]');

    //Simple validation to make sure user entered something
    //If error found, add hightlight class to the text field
    if (name.val()=='') {
        name.addClass('hightlight');
        return false;
    } else name.removeClass('hightlight');

    if (email.val()=='') {
        email.addClass('hightlight');
        return false;
    } else email.removeClass('hightlight');

    if (address.val()=='') {
        address.addClass('hightlight');
        return false;
    } else address.removeClass('hightlight');

    if (city.val()=='') {
        city.addClass('hightlight');
        return false;
    } else city.removeClass('hightlight');

    if (zipcode.val()=='') {
        zipcode.addClass('hightlight');
        return false;
    } else zipcode.removeClass('hightlight');

    if (service.val()=='') {
        service.addClass('hightlight');
        return false;
    } else service.removeClass('hightlight');

    if (datetime.val()=='') {
        datetime.addClass('hightlight');
        return false;
    } else datetime.removeClass('hightlight');

    //organize the data properly
    var data = 'name=' + name.val() + '&email=' + email.val() + '&phone=' + phone.val() + '&address=' + address.val() + '&city=' + city.val() + '&zipcode=' + zipcode.val() + '&service=' + service.val() + '&datetime=' + datetime.val() + '&passingers=' + passingers.val() + '&comment='  + encodeURIComponent(comment.val());

    //disabled all the text fields
    $('.text').attr('disabled','true');

    //show the loading sign
    $('.loading').show();

    //start the ajax
    $.ajax({
        //this is the php file that processes the data and send mail
        url: "process.php", 

        //GET method is used
        type: "GET",

        //pass the data         
        data: data,     

        //Do not cache the page
        cache: false,

        //success
        success: function (html) {              
            //if process.php returned 1/true (send mail success)
            if (html==1) {                  
                //hide the form
                $('.form').fadeOut('slow');                 

                //show the success message
                $('.done').fadeIn('slow');

            //if process.php returned 0/false (send mail failed)
            } else alert('Sorry, unexpected error. Please try again later.');               
        }       
    });

    //cancel the submit button default behaviours
    return false;
}); 

});

非常非常感谢

Answer 1

你应该写:

$('form').submit(function () {
    //Get the data from all the fields
    var name = $('input[name=name]');
    ...