我正在使用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">
...
...
我希望有人可以帮助我。我已经尝试了几种变体,但遗憾的是没有任何成功。
答案 0 :(得分:1)
我注意到远程验证器不起作用(即使在示例中),所以 这有助于使用HTML5(我希望):
enableByHtml5: function($field) {
return $field.attr('data-bv-remote-url');
},
将以上代码添加到validator / remote.js
中