I try to build a registration-form with javascript. So that the whole registrationprocess is on one site. The site is built with the help of bootstrap and jquery after a tutorial.
I initialize the scripts i have at the beginning of the side with following code:
<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>
The form looks like that:
<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>
The Javascript-File looks like that:
$('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;
}
});
The problem is, that the Form doesn´t react to the Javascript. Even the validation-error messages aren´t getting displayed.
I build a login-form with the help of the tutorial aswell on the same page, which works, which makes me clueless. Here is the Link to the testfile:
You see in the testfile, when you write in the login-form a not validated e-mailadress a errormessage appears. I don´t know why it doesn´t work in the registrationform.
EDIT:
Here is the link to the working "login javascript-file"
Here is the code from the working "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>
EDIT 2:
Okay, something magical happened and it works now, but i have no idea why. Maybe my browser had old code in the cache after the changes. Thank you for your help!
