woocommerce order as guest not working

I am developing an ecommerce site with woo commerce, for my site i needed to include the register function on the same page on checkout. I did that but problem is if I put the register form, without registering I can not complete the order, i couldn't see any error info so cant figure it out what went wrong. here is my code:

<?php do_action('woocommerce_after_order_notes', $checkout); ?>
<?php if(!is_user_logged_in()) {?>
<input type="button" class="btn small red" name="button_address_continue"     value="<?php _e('Order As Guest', THB_THEME_NAME); ?>" />
<a id="register_form" class="btn red small" href="#">Register</a>

<div class="form-register" style="display: none;">
<form name="custom-register-checkout" class="custom-register-checkout" id="custom-register-checkout">
    <div class="registration-form woocommerce">
        <h2>Register</h2>
        <p class="form-row form-row-wide woocommerce-validated">
            <label for="reg_username">Username <span class="required">*</span></label>
            <input type="text" required="" class="input-text" name="username" id="reg_username" value="">
        </p>

        <p class="form-row form-row-wide">
            <label for="reg_password">Password <span class="required">*</span></label>
            <input type="password" required="" class="input-text" name="password" id="reg_password">
        </p>
        <!-- Spam Trap -->
        <div style="left: -999em; position: absolute;"><label for="trap">Anti-spam</label><input type="text" name="email_2" id="trap" tabindex="-1"></div>
        <p class="form-row">
            <input type="hidden" id="_wpnonce" name="_wpnonce" value="5f32d51264">
            <input type="hidden" name="_wp_http_referer" value="/checkout/">
            <input type="submit" id="custom-form-login" name="register" value="Register">
        </p>
    </div>
</form><!-- END .custom-register-checkout -->

and the jquery part

jQuery(document).ready(function($){
    $("#register_form").click(function() {
        $(".form-register").css("display","block");
        $("#order_review").css("display","none");
        return false;
    });
    var checkoutregister = $("#custom-register-checkout");
    checkoutregister.validate({
        rules: {
            username: {
                required: true
            },
            /*email: {
                required: true
            },*/
            password: {
                required: true
            }
        },
        messages: {
            username: "Please enter username",
            //email: "Please enter a email",
            password: "Please enter password"
        }
    });
    $("#custom-form-login").click(function() {
        var data = {
            'action': 'pd_checkout_register',
            'username': $("#reg_username").val(),
            //'email': $("#reg_email").val(),
            'password': $("#reg_password").val()
        };
        // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
        jQuery.post('<?php echo admin_url( 'admin-ajax.php' ); ?>', data, function (response) {
            var res = JSON.parse(response);
            if (res.status == 'ok') {
                window.location.reload();
            } else {
                alert(res.message);
            }
        });
        return false;
    });
});

problem is if I remove this form

<form name="custom-register-checkout" class="custom-register-checkout" id="custom-register-checkout">
    <div class="registration-form woocommerce">
        <h2>Register</h2>
        <p class="form-row form-row-wide woocommerce-validated">
            <label for="reg_username">Username <span class="required">*</span></label>
            <input type="text" required="" class="input-text" name="username" id="reg_username" value="">
        </p>

        <p class="form-row form-row-wide">
            <label for="reg_password">Password <span class="required">*</span></label>
            <input type="password" required="" class="input-text" name="password" id="reg_password">
        </p>
        <!-- Spam Trap -->
        <div style="left: -999em; position: absolute;"><label for="trap">Anti-spam</label><input type="text" name="email_2" id="trap" tabindex="-1"></div>
        <p class="form-row">
            <input type="hidden" id="_wpnonce" name="_wpnonce" value="5f32d51264">
            <input type="hidden" name="_wp_http_referer" value="/checkout/">
            <input type="submit" id="custom-form-login" name="register" value="Register">
        </p>
    </div>
</form>

I can place order as guest but if this form exists, I can not complete the order. Please help

via Chebli Mohamed