我尝试使用javascript构建注册表单。这样整个注册过程就在一个站点上。在教程之后，该站点是在bootstrap和jquery的帮助下构建的。
我使用以下代码初始化我在侧面开头的脚本：
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/validation.min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<script type="text/javascript" src="js/register.js"></script>
</head>
表单看起来像这样：
<form class="register-form" method="post" id="register-form">
<h2 class="form-login-heading">Benutzer registrieren:</h2><hr />
<div id="errorregister"></div>
<div class="form-group"><input placeholder="Vorname" class="form-control" id="firstname" name="firstname"></div>
<div class="form-group"><input placeholder="Nachname" class="form-control" id="surname" name="surname"></div>
<div class="form-group"><input placeholder="E-mail" type="email" class="form-control" name="email" id="email" /></div>
<div class="form-group"><input placeholder="Passwort" class="form-control" id="password" type="password" name="password"></div>
<div class="form-group"><input placeholder="Passwort bestätigen" class="form-control" id="passwordvali" type="password" name="passwordvali"></div>
<hr />
<div class="form-group">
<button type="submit" class="btn btn-default" name="register_button" id="register_button">
<span class="glyphicon glyphicon-new-window"></span> Registrieren
</button>
</div>
</form>
Javascript-File看起来像这样：
$('document').ready(function() {
/* handling form validation */
$("#register-form").validate({
rules: {
firstname: {
required: true,
},
surname: {
required: true,
},
email: {
required: true,
email: true
},
password: {
required: true,
},
passwordvali: {
required: true,
},
},
messages: {
firstname:{
required: "Bitte geben Sie ihren Vornamen ein."
},
surname:{
required: "Bitte geben Sie ihr Nachnamen ein."
},
password:{
required: "Bitte geben Sie ihr Passwort ein."
},
passwordvali:{
required: "Bitte bestätigen Sie ihr Passwort."
},
email: "Bitte geben Sie ihre E-Mailadresse ein.",
},
submitHandler: submitForm
});
/* Handling login functionality */
function submitForm() {
var data = $("#register-form").serialize();
$.ajax({
type : 'POST',
url : 'registerjava.php',
data : data,
beforeSend: function(){
$("#errorregister").fadeOut();
$("#register_button").html('<span class="glyphicon glyphicon-transfer"></span> übertrage Daten');
},
success : function(response){
if(response=="registrationsuccsessful"){
$("#errorregister").fadeIn(1000, function(){
$("#errorregister").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> Die Registrierung war erfolgreich. Bitte aktivieren Sie ihren Account mit dem Link den wir Ihnen zugeschickt haben.</div>');
$("#login_button").html('<span class="glyphicon glyphicon-log-in"></span> Sign In');
} else {
$("#errorregister").fadeIn(1000, function(){
$("#errorregister").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> '+response+'</div>');
$("#login_button").html('<span class="glyphicon glyphicon-log-in"></span> Sign In');
});
}
}
});
return false;
}
});
问题是，Form不会对Javascript做出反应。甚至不会显示验证错误消息。
我在教程的帮助下构建了一个登录表单，也在同一页面上，这有效，这让我一无所知。这是测试文件的链接：
您在testfile中看到，当您在登录表单中写入未经验证的电子邮件时，会出现错误消息。我不知道为什么它在注册表中不起作用。
非常感谢你
修改
Here is the link to the working "login javascript-file"
以下是工作“login-form”的代码：
<form class="login-form" method="post" id="login-form">
<h2 class="form-login-heading">Login:</h2><hr />
<div id="errorlogin"></div>
<div class="form-group">
<input type="email" class="form-control" placeholder="E-mail" name="user_email" id="user_email" />
<span id="check-e"></span>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Passwort" name="password" id="password" />
</div>
<hr />
<div class="form-group">
<button type="submit" class="btn btn-default" name="login_button" id="login_button">
<span class="glyphicon glyphicon-log-in"></span> Login
</button>
</div>
</form>
编辑2：
好的，一些神奇的事情发生了，它现在有效，但我不明白为什么。也许我的浏览器在更改后在缓存中有旧代码。谢谢您的帮助！
答案 0 :(得分：1)
您的代码中存在语法错误。您需要在第一次fadeIn()来电中关闭该功能。
if(response=="registrationsuccsessful"){
$("#errorregister").fadeIn(1000, function(){
$("#errorregister").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> Die Registrierung war erfolgreich. Bitte aktivieren Sie ihren Account mit dem Link den wir Ihnen zugeschickt haben.</div>');
$("#login_button").html('<span class="glyphicon glyphicon-log-in"></span> Sign In');
}
应该是：
if(response=="registrationsuccsessful"){
$("#errorregister").fadeIn(1000, function(){
$("#errorregister").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> Die Registrierung war erfolgreich. Bitte aktivieren Sie ihren Account mit dem Link den wir Ihnen zugeschickt haben.</div>');
$("#login_button").html('<span class="glyphicon glyphicon-log-in"></span> Sign In');
});
}
答案 1 :(得分：0)
您将注册表单定义为class not id 使用：
$('.register-form').validate()