提交按钮无法处理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">

$（document）.ready（function（）{

//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]');
    ...

Answer 2

在您的点击事件处理程序中，您可能希望阻止在代码运行之前提交表单的点击的默认操作。

$('#submit').click(function(e) {
    e.preventDefault();
    ...
});

然而，我会做Laurent所说的并在表格提交上绑定。

Answer 3

你的功能很好，如果你使用上面提供的html，就会被调用。但是你提供链接的网站显示了这个

<input type="submit" value="MAKE RESERVATION" id="FormId">

看到id =＆＃34; FormId＆＃34;它应该是＆＃34;提交＆＃34;

好的，请试试这个

1）确保备份 2）删除我们刚刚添加到index.html的验证功能 3）使用以下

替换index.html上的最后一个脚本块（从第358行开始）

<script type="text/javascript">
    $(document).ready(function () {     
    // Added by Prayas  (Start)
    function menuItemClick(section) {
        content1 = "loader.html " + section;
        toTheSky();
        $("#singleContentContainer").delay(400).fadeIn();
        $('#singleContentInside').load(content1);


          if(section=="#reservations")
            {
                    $('#submit').click(function(e) {
                    e.preventDefault();    

                    //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;
                });
    }


    }

    $("#services1").click(function() {
        menuItemClick("#services")
    });
    $("#services2").click(function() {
        menuItemClick("#services")
    });
    $("#rates1").click(function() {
        menuItemClick("#rates")
    });
    $("#rates2").click(function() {
        menuItemClick("#rates")
    });
    $("#reservations1").click(function() {
        menuItemClick("#reservations")
    });
    $("#reservations2").click(function() {
        menuItemClick("#reservations")
    });
    $("#fleet1").click(function() {
        menuItemClick("#fleets")        
    });
    $("#fleet2").click(function() {
        menuItemClick("#fleets")        
    });

    $("#closeContainer").click(function() {
        downToEarth();
        $("#singleContentContainer").fadeOut();
    });     
    // Added by Prayas  (End)
});

</script>

编辑2

1）删除刚刚添加的底部的Script块。 2）将来自loader.html的整个预留div复制到名为reservations.html的新文件中。 3）将原始验证功能放回到此区域中的＃34; reservations.html＆＃34;中。 4）将此脚本块放在index.html的末尾

<script type="text/javascript">
    $(document).ready(function () {     
    // Added by Prayas  (Start)
    function menuItemClick(section) {

    if(section=="#reservations")
    {
            content1 = "reservations.html;
    }
    else
    {
            content1 = "loader.html " + section;
        toTheSky();
        $("#singleContentContainer").delay(400).fadeIn();
        $('#singleContentInside').load(content1);
    }

    $("#services1").click(function() {
        menuItemClick("#services")
    });
    $("#services2").click(function() {
        menuItemClick("#services")
    });
    $("#rates1").click(function() {
        menuItemClick("#rates")
    });
    $("#rates2").click(function() {
        menuItemClick("#rates")
    });
    $("#reservations1").click(function() {
        menuItemClick("#reservations")
    });
    $("#reservations2").click(function() {
        menuItemClick("#reservations")
    });
    $("#fleet1").click(function() {
        menuItemClick("#fleets")        
    });
    $("#fleet2").click(function() {
        menuItemClick("#fleets")        
    });

    $("#closeContainer").click(function() {
        downToEarth();
        $("#singleContentContainer").fadeOut();
    });     
    // Added by Prayas  (End)
});

</script>

Answer 4

您必须在表单的提交事件中执行此操作。

首先给你的表单一个id，说“FormId”

$("#FormId").submit(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;
    });