Form validation and AJAX form submit using jQuery and CodeIgniter

Question

I am using following code for inserting comments:

<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>

following is my jQuery code for submitting page without page refresh. It's working correctly but I need to add validation which is not working and it's not showing any errors either:

<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>

I am using following jQuery validation plugin:

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

Answer 1

If you could host your php end on something public and not localhost your problem could be simulated with jsFiddle , I would explore something like

$.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);

        });

and perhaps use jQuery.parseJSON(response) if your response is coming in JSON encoded. Seeing the result of this AJAX call will point you most likely in the right direction for the next step.

Answer 2

codeigniter has a form validation class. there is a good tutorial here:http://codeigniter.com/user_guide/libraries/form_validation.html i suggest you look over that. just remember, for a form to validate every field must pass validation and be present in the form validation rules.

• looking at your code, your button id='button' type 'reset' that seems odd. just have a add comment then use your javascript/ajax handler to form the post data and send to your site.

• its not a bad idea to send the data objects for your ajax post as a data object, using javascript object notation. eg var data = {'email':$('#email').val(),'name':$('#name').val()} etc. your string looked like it was formatted as a GET string, not a POST.