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.