Validate a form before ajax post without jquery validation plugin

Question

I'm trying to write jquery validation, but I don't want to use a plugin

Here's my ajax I would like to know how to implement validation before posting.

    $('#insert_ticket').submit(function(e){
    var postData = $(this).serialize();
    alert(postData);

    $.ajax({
        type: 'POST',
        url: 'http://localhost/api/eric_api.php?q=insertseries',
        data: postData,
        success: function(response){
            $('#insert_ticket').find('.form_result').html(response);
        },
        error: function(){
            alert('error');
        }
    });
    e.preventDefault();
});

Ok now I've added a validation test

$('#insert_ticket').submit(function(e){
    var postData = $(this).serialize();
    $('.error').hide();
    if($('#user_error').length == ""){
    $('.error').show();
    return false;
}

    $.ajax({
        type: 'POST',
        url: 'http://localhost/api/eric_api.php?q=insertseries',
        data: postData,
        success: function(response){
            $('#insert_ticket').find('.form_result').html(response);
        },
        error: function(){
            alert('error');
        }
    });
    e.preventDefault();
});

My code doesn't work, but if I put it above it's sort of works as it hides the field unless the field is enpty. Yet if it is empty it still posts.

Here's my html code

<div class="wrapper">
        <h1>Ticketing System</h1>
        <div>
            <div id="ticket_form_wrapper">
                <form  id="insert_ticket" method="post" action="">
                    <p>
                        <label for="user">User</label>
                        <br />
                        <input type="user" name="user" id="user" class="post_fields" />
                        <div class="error" id="user_error">This is a required field</div>
                    </p>
                    <p>
                        <label for="email">Email</label>
                        <br />
                        <input type="email" name="email" id="email" class="post_fields" />
                        <div class="error" id="email_req_error">This is a required field</div>
                        <div class="error" id="email_invalid_error">This is not a valid email</div>
                    </p>
                    <p>
                        <label for="summary">Summary</label>
                        <br />
                        <input type="summary" name="summary" id="summary" class="post_fields" />
                        <div class="error" id="summary_error">This is a required field</div>
                    </p>
                    <p>
                        <label for="due_date">Due Date</label>
                        <br />
                        <input type="due_date" name="due_date" id="due_date" class="post_fields" />
                        <div class="error" id="invalid_date">This is not a valid Date</div>
                    </p>
                    <p>
                        <label for="problem_type">Problem Type</label>
                        <br />
                        <input type="problem_type" name="problem_type" id="problem_type" class="post_fields" />
                    </p>
                    <p>
                        <label for="status">Status</label>
                        <br />
                        <input type="status" name="status" id="status" class="post_fields" />
                    </p>
                    <p>
                        <input type="submit" id="submit" value="Submit" />
                        <input type="button" onclick="window.location='index.php'" value="Go to List"/>
                        <div class="form_result"> </div>
                    </p>
                </form>
            </div>

        </div>

Answer 1

Put your validation code in Ajax's beforeSend. i.e.

 $.ajax({
    type: 'POST',
    url: 'http://localhost/api/eric_api.php?q=insertseries',
    data: postData,
    beforeSend: function(xhr, options){
        // put your validation code here.
        // use xhr.abort(); if validation fails.
    },
    success: function(response){
        $('#insert_ticket').find('.form_result').html(response);
    },
    error: function(){
        alert('error');
    }
});

Further detail at jQuery.ajax()

Answer 2

You would do the validation at the line of alert(postData); If it doesn't validate, show an error message and return false there.