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

});

非常感谢提前

score 3 · Accepted Answer

你应该写：

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

score 1 · Accepted Answer

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

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

但是，我会按照 Laurent 所说的去做，而是绑定在表单提交上。

score 1 · Accepted Answer

你的函数很好，如果有人使用上面提供的 html，就会被调用。但是您提供链接的网站显示了这一点

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

看到 id="FormId" 它应该是“提交”

好的，现在请试试这个

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）删除我们刚刚添加的底部的脚本块。2) 将整个预订 div 从 loader.html 复制到一个名为 reservations.html 的新文件中。3) 将这个 div 中的原始验证函数放回其在“reservations.html”中的位置。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>

score 0 · Accepted Answer

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

首先给你的表单一个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;
    });

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

4 回答 4

Related

Reference