I have this next page, on which a user can create a new account. My question now is how can i make sure the user inserts a username that doesn't already exist in my MySQL database. The page is available on http://webs.hogent.be/kevinbaeyens/gebruiker.html the code of this page is:
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nieuwe gebruiker | Sociale buurt</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="onzebuurt.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
window.onload = function() {
document.getElementById("Username").focus();
};
function formulierValideren() {
if (document.getElementById('Username').value == '' || document.getElementById('Username').value == null)
{
alert ('Gebruikersnaam is verplicht.');
document.getElementById('Username').style.borderColor = "red";
return false;
}
else if (document.getElementById('Wachtwoord').value == '' || document.getElementById('Wachtwoord').value == null)
{
alert ('Wachtwoord is verplicht.');
document.getElementById('Wachtwoord').style.borderColor = "red";
return false;
}
else if (document.getElementById('Wachtwoord2').value == '' || document.getElementById('Wachtwoord2').value == null)
{
alert ('Bevestig wachtwoord.');
document.getElementById('Wachtwoord2').style.borderColor = "red";
return false;
}
else if (document.getElementById('Wachtwoord2').value != document.getElementById('Wachtwoord').value)
{
alert ('Wachtwoorden komen niet overeen.');
document.getElementById('Wachtwoord2').style.borderColor = "red";
return false;
}
else
{
var url = "http://localhost:8080/OnzeBuurt2/resources/gebruikers";
var reminder = {};
reminder.naam = jQuery.trim($("#Username").val());
reminder.wachtwoord = jQuery.trim($("#Wachtwoord").val());
var request = new XMLHttpRequest();
request.open("POST", url);
request.onload = function() {
if (request.status === 201) {
reminder.id = request.getResponseHeader("Location").split("/").pop();
} else {
console.log("Error creating reminder: " + request.status + " " + request.responseText);
}
};
request.setRequestHeader("Content-Type", "application/json");
request.send(JSON.stringify(reminder));
var msg = "Registratie succesvol. Klik op OK om u aan te melden op de site.";
if(confirm(msg)){
setTimeout(function() {window.location.href = "http://localhost:8080/OnzeBuurt2/"})
}
}
//end if
}//end function
</script>
</head>
<body class="body2">
<div class="gridContainer clearfix">
<div class="header2">
<center>
Nieuwe gebruiker
</center>
</div>
<div id="formulier2">
<form method="post" name="form" action="">
<p class="labels"><center>Gebruikersnaam *</center></p><input id="Username" type="text" name="Username" placeholder="Gebruikersnaam" size="50">
<p class="labels"><center>Wachtwoord *</center></p><input id="Wachtwoord" type="password" name="Wachtwoord" placeholder="Wachtwoord" size="50">
<p class="labels"><center>Bevestig wachtwoord *</center></p><input id="Wachtwoord2" type="password" name="Bevestig wachtwoord" placeholder="Bevestig wachtwoord" size="50">
<br />
<a href="index.html" style="text-decoration:none"><center><img id="return" name="jsbutton" src="return.png" alt="Terug" /></center></a>
<br />
<center><input id="bevestig" type="image" src="Bevestig.png" width="200" height="50" border="0" alt="SUBMIT!" onclick="formulierValideren()"></center>
<br />
</form>
</div>
</div>
</body>
</html>
Some notes you need to know:
1) since it's an assignment for school, I can't use PHP.
2) The primary key in my database table 'Gebruiker' is 'ID', the field of 'username' is the field which has to be unique
thanks in advance!
