javascript - 使用 bootstrapvalidator AJAX submitHandler 不起作用

Question

我正在使用来自 https://github.com/nghuuphuoc/bootstrapvalidator 的 Bootstrap 验证

我遇到 submitHandler 不起作用的问题。提交表单时，不会创建条目，并且表单将以完全不正确的格式加载到相同的 DIV 元素中。 有人可以帮助我或说出我的错在哪里吗？

HTML 代码:

<!-- 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 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>

以下 PHP 代码位于文件顶部

    // 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">
...
...

我希望有人能帮助我。我已经尝试了几种变体，但遗憾的是没有任何成功。

Answer 1

我注意到 remote 验证器不起作用(即使在示例中)，所以 这在使用 HTML5 时有所帮助(我希望):

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

将以上代码添加到 validator/remote.js