使用jQuery和CodeIgniter提交表单验证和AJAX表单

时间:2012-06-15 20:55:30

标签: jquery jquery-validate codeigniter-2

我使用以下代码插入评论:

<div id="2" class="789678">
    <div id="dynamic2">
        <span class="error" style="display:none">Please Enter Valid Data</span>
        <span class="success" style="display:none">Submitted Successfully</span>
        <form action="http://localhost/ci/index.php/#"
        method="post" accept-charset="utf-8" name="commentform" id="commentform">
            <div style="display:none">
                <input type="hidden" name="token" value="552e5dab8e50b8263c8b7ba548adaf5b">
            </div>
            <p>
                <label for="Name">Name</label>
                <br>
                <input type="text" name="name" value="" id="name" size="30" placeholder="Please Enter Name or Nick name"
                class="required">
            </p>
            <p>
                <label for="email">Email Address</label>
                <br>
                <input type="text" name="email" value="" id="email" size="30" placeholder="Enter Email Address"
                class="required">
            </p>
            <p>
                <label for="comment">comment</label>
                <br>
                <textarea name="content" cols="40" rows="5" id="content" col="180" placeholder="Post Your Comment"
                class="required"></textarea>
            </p>
            <input type="hidden" id="post_id" name="post_id" value="2">
            <input type="hidden" id="num" name="num" value="789678">
            <button name="button" type="reset" id="button" value="true">Add Comment</button>
        </form>
    </div>
    <input type="button" id="adcom" value="Add Comment" style="display: none; ">
</div>

以下是我的jQuery代码,用于在没有页面刷新的情况下提交页面。它工作正常,但我需要添加不起作用的验证,它也没有显示任何错误:

<script>
    $("#button").live("click", function (e) {
        e.preventDefault();
        $("#commentform").validate();
        var currentId = $(this).parent().parent().parent().attr('id');
        var num = $('#num').val();
        var email = $('#email').val();
        var post_id = $('#post_id').val();
        var name = $('#name').val();
        var content = $('#content').val();
        var token = $('input[name="token"]').val();
        var dataString = 'num=' + num + '&email=' + email + '&content_id=' + post_id + '&name=' + name + '&content=' + content + '&token=' + token;
        $.ajax({
            type: "POST",
            url: "http://localhost/ci/index.php/mobiles/mobile_insert_comment/",
            data: dataString,
            success: function (result) {
                $("#commentform").remove();
                //$("#dynamic"+currentId).text(' successfully submitted');
                $('.success').fadeIn(200).show();
                $('.error').fadeOut(200).hide();
            }
        });
        return false;
    });
</script>

我正在使用以下jQuery验证插件:

 <script type="text/javascript"
 src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

2 个答案:

答案 0 :(得分:1)

如果您可以在公共而非本地主机上托管您的php端,可以使用jsFiddle模拟您的问题,我会探索类似

的内容
$.ajax({

        type: "POST",

            url: "http://localhost/ci/index.php/mobiles/mobile_insert_comment/",

            data: dataString,

        success: function(result) {

            $("#commentform").remove();

            //$("#dynamic"+currentId).text(' successfully submitted');

            $('.success').fadeIn(200).show();

             $('.error').fadeOut(200).hide();

                            }

        }).done(function (response) {

            console.log(response);

        });
如果您的响应是以JSON编码的,那么

并且可能使用jQuery.parseJSON(响应)。看到这个AJAX调用的结果将指出你最有可能在下一步的正确方向。

答案 1 :(得分:0)

codeigniter有一个表单验证类。 这里有一个很好的教程:http://codeigniter.com/user_guide/libraries/form_validation.html 我建议你看一下。请记住,对于表单来验证每个字段必须通过验证并出现在表单验证规则中。

  • 查看你的代码,你的按钮id ='按钮'类型'重置'似乎很奇怪。只需添加评论然后使用您的javascript / ajax处理程序来形成发布数据并发送到您的网站。

  • 使用javascript对象表示法将ajax帖子的数据对象作为数据对象发送,这不是一个坏主意。例如var data = {'email':$('#email')。val(),'name':$('#name')。val()}等你的字符串看起来像格式化为GET字符串,而不是POST。