Using bootstrapvalidator AJAX submitHandler does not work

Question

I´m using the Bootstrap validation from https://github.com/nghuuphuoc/bootstrapvalidator

I have the problem that the submitHandler does not work. When the form is submitted the entry is not created and the form will be loaded in the same DIV element with completely incorrect formatting. Can someone help me or say where exactly my fault?

HTML-Code:

<!-- All page content -->
<div class="container">

    <!-- Registration-Form -->
    <div class="page-header">
        <h3>Registrierung eines Benutzerkontos</h3>
    </div>

    <div class="row">
        <div class="col-xs-7 col-sm-5 col-xs-offset-3">
            <div class="well">
                <div class="formular">
                    <form role="form" id="register-form" method="post" action="">
                        <input type="hidden" name="sum" value="<?php echo $sum ?>">
                        <div class="form-group">
                            <label class="control-label" for="username">Benutzername</label>
                            <div class="form-inline">
                                <input type="text" class="form-control" name="username" id="username">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="email">E-Mail Adresse</label>
                            <div class="form-inline">
                                <input type="email" class="form-control" name="email" id="email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="Password">Passwort</label>
                            <div class="form-inline">
                                <input type="password" class="form-control" name="password" id="password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="confirmPassword">Passwort wiederholen</label>
                            <div class="form-inline">
                                <input type="password" class="form-control" name="confirmPassword" id="confirmPassword">
                            </div>
                        </div>
                        <br>
                        <div class="form-group">
                            <label class="control-label" for="captcha"><strong>Sicherheitsabfrage</strong></label>
                            <div class="form-inline">
                                <input type="text" class="form-control sum" name="num1" id="num1" value="<?php echo $num1 ?>" readonly> +
                                <input type="text" class="form-control sum" name="num2" id="num2" value="<?php echo $num2 ?>" readonly> =
                                <input type="text" class="form-control captcha" name="captcha" id="captcha" maxlength="2">
                                <span id="spambot"></span>
                            </div>        
                        </div>
                        <div class="form-group">
                            <span class="help-block"><small>Info: Diese Eingabe dient zum Schutz vor Spambot.</small></span>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary" name="register">Registrieren</button>
                        </div>
                    </form>
                    <div id="info"></div>
                </div><!--/.formular -->
            </div><!--/.well -->
        </div>
    </div><!--/.row -->
    <!-- End Registration-Form -->

</div><!--/.container -->

Java-Script:

<script src="../components/jquery-1.10.2.min.js"></script>
<script src="../components/jquery.form.js"></script>
<script src="../dist/js/bootstrap.min.js"></script>
<script src="../dist/js/bootstrapValidator.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

    $('#register-form').bootstrapValidator({
        message: 'Die Eingabe ist nicht gültig',
        submitHandler: function(form) {
            $(form).ajaxSubmit( {
                target: '#info',
                success: function() {
                    $('#register-form').slideUp('fast');
                }
            });
        },
        fields: {
            username: {
                validators: {
                    notEmpty: {
                        message: 'Bitte geben Sie einen Namen ein!'
                    },
                    stringLength: {
                        min: 3,
                        max: 30,
                        message: 'Der Benutzername muss mindestens 3 und maximal 30 Zeichen enthalten!'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'Der Benutzername darf nur alphabetisch, Anzahl, Punkt und Unterstrich enthalten!'
                    },
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'Bitte geben Sie eine E-Mail Adresse ein!'
                    },
                    emailAddress: {
                        message: 'Das ist keine gültige E-Mail Adresse!'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'Bitte geben Sie ein Passwort ein!'
                    },
                    identical: {
                        field: 'confirmPassword',
                        message: 'Die Passwörter stimmen nicht überein!'
                    }
                }
            },
            confirmPassword: {
                validators: {
                    notEmpty: {
                        message: 'Bitte geben Sie ein Passwort ein!'
                    },
                    identical: {
                        field: 'password',
                        message: 'Die Passwörter stimmen nicht überein!'
                    }
                }
            },
            captcha: {
                validators: {
                    notEmpty: {
                        message: 'Bitte geben Sie ein Ergebnis ein!'
                    },
                    callback: {
                        message: 'Bitte geben Sie das richtige Ergebnis ein!',
                        callback: function(value) {
                            $result = ( parseInt($('#num1').val()) + parseInt($('#num2').val()) == parseInt($('#captcha').val()) ) ;
                            $('#spambot').fadeOut('fast');
                            return $result;
                        }
                    }
                }
            }
        }
    });
});

</script>

The following PHP-Code is on top of the file

    // When post "register"
if (isset($_POST['register'])) {

    // Clean up the input values
    foreach($_POST as $key => $value) {
        if(ini_get('magic_quotes_gpc'))
            $_POST[$key] = stripslashes($_POST[$key]);

        $_POST[$key] = htmlspecialchars(strip_tags($_POST[$key]));
    }

    // Define variables of the user input
    $username = $mysqli->real_escape_string($_POST['username']);
    $email = $mysqli->real_escape_string($_POST['email']);
    $password = $mysqli->real_escape_string($_POST['password']);

    // Email Validation
    function isValidEmail($email){  
        return filter_var(filter_var($email, FILTER_SANITIZE_EMAIL), FILTER_VALIDATE_EMAIL);
    }

    // Check user input values for errors
    $errors = array();

    if(strlen($username) < 3) {
        if(!$username) {
            $errors[] = "Bitte geben Sie einen Benutzernamen ein!";

        } else {

            $errors[] = "Der Benutzername muss mindestens 3 Zeichen enthalten!";
        }
    }

    if(!$email) {
        $errors[] = "Bitte geben Sie eine E-Mail Adresse ein!";

    } else if(!isValidEmail($email)) {

        $errors[] = "Das ist keine gültige E-Mail Adresse!";
    }

    if($_POST['password'] !== $_POST['confirmPassword']) {
        $errors[] = "Die Passwörter stimmen nicht überein!";
    }

    if($_POST['captcha'] !== $_POST['sum']) {
        $errors[] = "Bitte geben Sie das richtige Ergebnis ein!";
    }


    if($errors) {
        // Output errors and die with a failure message
        $errortext = "";
        foreach($errors as $error) {
            $errortext .= "<li>".$error."</li>";
        }

        die("<div class='text-danger'><strong>Es sind folgende Fehler aufgetreten:</strong><ul>". $errortext ."</ul></div>");

    } else

    // Create a secure password
    $random_salt = hash('sha512', uniqid(mt_rand(1, mt_getrandmax()), true));
    $password = hash('sha512', $password.$random_salt);


    // Create a new USER
    if ($insert_stmt = $mysqli->prepare("INSERT INTO members (username, email, password, salt) VALUES (?, ?, ?, ?)")) { 
        $insert_stmt->bind_param('ssss', $username, $email, $password, $random_salt); 
        $insert_stmt->execute();
        $insert_stmt->store_result();
    }

    die("<p class='text-success'>Die Registrierung war erfolgreich! Sie können sich jetzt <a href=\"../secure_login/login.php\">anmelden</a></p>");

    $insert_stmt->close();

} else {

?>

<!DOCTYPE html>
<html lang="de-DE">
...
...

I hope someone can help me. I've tried already several variants, but unfortunately without any success.

Answer 1

I have noticed that remote validator is not functional (even in the example), so this helped when using HTML5 (I hope):

    enableByHtml5: function($field) {
      return $field.attr('data-bv-remote-url');
    },

Add above code into validator/remote.js