Ajax没有发布一个值

I'm stuck with a problem when posting the data from the form with AJAX. Not all the values are inserted( email with "@" sign ). But if I send it separately it is inserted.

This is jQuery code :

$("#my_reservation_form").submit(function () {
    if($("#terms_checkbox").prop("checked")) {
        var data = $("#my_reservation_form").serialize();

        //alert(data); for testing

        $.ajax({
            type: "POST",
            data: data,
            url: "functions/reservation_form.php",
            dataType:"text",
            success: function () {
                console.log("ok");
            },
            error: function() {
                console.log("error");
            }
        });
    } else {
        alert('You have to accept terms');
    }
});

The PHP side :

$table_id = $_POST['id'];
$date = $_POST['date'];
$time = $_POST['time'];
$people = $_POST['people'];
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$tel = $_POST['tel'];
$email= $_POST['email'];

$query = "INSERT INTO reservation(table_id,fname,lname,tel,email,reservation_date,time,people) values ('$table_id','$fname','$lname','$tel','$email','$date','$time','$people')";
if ($result = $db->query($query)) {
    //echo "Reservation added";

} else {
    echo $db->error;
}
$db->close();

By the way I'm using jQuery validation plugin to validate the inputs.

Form :

            <input class="input_text" name="id" type="hidden" value="<?php echo $_POST['table_id'];?>">
            <input class="input_text" name="date" type="hidden"  value="<?php echo $_POST['date'];?>">
            <input class="input_text" name="time" type="hidden" value="<?php echo $_POST['time'];?>">
            <input class="input_text" name="people" type="hidden" value="<?php echo $_POST['people'];?>">
            <input class="input_text" name="fname" type="text" placeholder="Name">
            <input class="input_text" name="lname" type="text" placeholder="Surname">
            <input class="input_text" name="tel" type="text" placeholder="Tel">
            <input class="input_text" name="email" type="text" placeholder="Email">
            <div class="error"></div>

            <div id="terms">
                <input id="terms_checkbox" type="checkbox" name="terms" checked="checked"><label for="terms">Blah blah I agree</a>
            </div>
            <div id="terms_text">
                 <p><?php terms(); ?></p>
            </div>
            <button class="button_ui" id="button_reserve" type="submit" name="submit">Reserve</button>
        </form>

Problem is solved. Had to put everything into validate plugin submitHandler event.