使用bootstrapvalidator AJAX SubmitHandler不起作用 [英] Using bootstrapvalidator AJAX submitHandler does not work
本文介绍了使用bootstrapvalidator AJAX SubmitHandler不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 https://github.com/nghuuphuoc/bootstrapvalidator 中的Bootstrap验证
I´m using the Bootstrap validation from https://github.com/nghuuphuoc/bootstrapvalidator
我有一个问题，即SubmitHandler不起作用.提交表单后，不会创建该条目，并且表单将以完全不正确的格式加载到同一DIV元素中. 有人可以帮我或者说我到底在哪里吗?
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代码:
<!-- 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代码位于文件顶部
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.
推荐答案
我注意到远程验证程序不起作用(即使在示例中)，因此 这在使用HTML5时有所帮助(希望如此):
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');
},
将上面的代码添加到validator/remote.js
Add above code into validator/remote.js
这篇关于使用bootstrapvalidator AJAX SubmitHandler不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
