making form field required with ajax submission

Question

I require certain fields be filled when the form is submitted, but i'm having trouble working it in.

user_name and comment both are required. How do I enforce these fields to be filled before the form is submitted?

$( document ).on( 'submit', '#default_add_comment_form', function( event ){
        event.preventDefault();

        var $this = $(this);
        $this.css('opacity','0.5');

        data = {
            action: "inline_comments_add_comment",
            post_id: $('#inline_comments_ajax_handle').attr( 'data-post_id' ),
            user_name: $('#inline_comments_user_name').val(),
            user_email: $('#inline_comments_user_email').val(),
            user_url: $('#inline_comments_user_url').val(),
            comment: $( '#comment' ).val(),
            security: $('#inline_comments_nonce').val(),
            para_id: current_para_id
        };

        $.ajax({
            data: data,
            global: false,
            success: function( msg ){
                inline_comments_ajax_load_template({
                    "target_div": "#inline_comments_ajax_target",
                    "template": $( '#inline_comments_ajax_handle' ).attr( 'data-template' ),
                    "post_id": $( '#inline_comments_ajax_handle' ).attr( 'data-post_id' ),
                    "security": $( '#inline_comments_nonce' ).val()
                }, false );

                $('textarea').val('');
                $this.css('opacity','1');

                // CK - increment the comment count
                var comment_count_holder = $('p[data-para-id="' + current_para_id + '"] > span > a');
                var comment_count_holder_li = $('li[data-para-id="' + current_para_id + '"] > span > a');

                var vert = $('p[data-para-id="' + current_para_id + '"] > span > a .vert');
                var hort = $('p[data-para-id="' + current_para_id + '"] > span > a .hort');

                var vert_li = $('li[data-para-id="' + current_para_id + '"] > span > a .vert');
                var hort_li = $('li[data-para-id="' + current_para_id + '"] > span > a .hort');

                var comment_count = parseInt( comment_count_holder.text() );
                var comment_count_li = parseInt( comment_count_holder_li.text() );


                comment_count_holder.text( comment_count + 1 );                
                comment_count_holder.removeClass('numb');
                comment_count_holder.remove('vert, hort');

                comment_count_holder_li.text( comment_count_li + 1 );                
                comment_count_holder_li.removeClass('numb');
                comment_count_holder_li.remove('vert, hort');
            }
        });

    });

Answer 1

Before sending the ajax request, do your validation

$(document).on('submit', '#default_add_comment_form', function (event) {
    event.preventDefault();

    //do your validation here
    var username = $('#inline_comments_user_name').val().trim();
    if (!username) {
        alert('please enter username');
        $('#inline_comments_user_name').focus();
        return;
    }
    var email = $('#inline_comments_user_email').val().trim();
    if (!email) {
        alert('please enter email');
        $('#inline_comments_user_email').focus();
        return;
    }

    var $this = $(this);
    $this.css('opacity', '0.5');

    data = {
        action: "inline_comments_add_comment",
        post_id: $('#inline_comments_ajax_handle').attr('data-post_id'),
        user_name: username,
        user_email: email,
        user_url: $('#inline_comments_user_url').val(),
        comment: $('#comment').val(),
        security: $('#inline_comments_nonce').val(),
        para_id: current_para_id
    };

    $.ajax({
        data: data,
        global: false,
        success: function (msg) {
            inline_comments_ajax_load_template({
                "target_div": "#inline_comments_ajax_target",
                    "template": $('#inline_comments_ajax_handle').attr('data-template'),
                    "post_id": $('#inline_comments_ajax_handle').attr('data-post_id'),
                    "security": $('#inline_comments_nonce').val()
            }, false);

            $('textarea').val('');
            $this.css('opacity', '1');

            // CK - increment the comment count
            var comment_count_holder = $('p[data-para-id="' + current_para_id + '"] > span > a');
            var comment_count_holder_li = $('li[data-para-id="' + current_para_id + '"] > span > a');

            var vert = $('p[data-para-id="' + current_para_id + '"] > span > a .vert');
            var hort = $('p[data-para-id="' + current_para_id + '"] > span > a .hort');

            var vert_li = $('li[data-para-id="' + current_para_id + '"] > span > a .vert');
            var hort_li = $('li[data-para-id="' + current_para_id + '"] > span > a .hort');

            var comment_count = parseInt(comment_count_holder.text());
            var comment_count_li = parseInt(comment_count_holder_li.text());


            comment_count_holder.text(comment_count + 1);
            comment_count_holder.removeClass('numb');
            comment_count_holder.remove('vert, hort');

            comment_count_holder_li.text(comment_count_li + 1);
            comment_count_holder_li.removeClass('numb');
            comment_count_holder_li.remove('vert, hort');
        }
    });

});