<div class="loginForm">
<form action="index.php?page=register&add=true" method="post">
<ul style="list-style-type:none">
<li>Username: <input type="text" name="username" /> <span class="error"></span></li>
<li>Password: <input type="password" name="password" /> <span class="error"></span></li>
<li>Real name: <input type="text" name="name" /> <span class="error"></span></li>
<li>Seat number: <input type="text" name="seat" /> <span class="error"></span></li>
<li>Game/Steam name: <input type="text" name="steam" /> <span class="error"></span></li>
</ul>
<input type="submit" value="Register" />
</form>
Already registered? Click <a href="index.php?page=login">here</a> to login
</div>
<script type="text/javascript">
/* should probably be moved to the head */
$(document).ready(function() {
function setError(obj,message) {
if (!message) {
$(obj).css('background-color','#ccffcc');
$(obj).siblings('.error').fadeOut('slow');
}
else {
$(obj).css('background-color','#ff8888');
$(obj).siblings('.error').html(message).fadeIn('slow');
}
}
$('.loginform input[type=text]').change(function() {
var inputText = $(this).val();
var inputName = $(this).attr('name');
//Validation
if ($(this).attr('name') !== 'name'
&& inputText.indexOf(" ") != -1) {
//spaces in username/seat/steam
setError(this,'No spaces please!');
}
else { if ($(this).attr('name') == 'seat') {
//Seat Number
var r = /^[a-f]1?[1-9]$/i;
if (!r.test(inputText)) {
setError(this,'invalid seat number! (A1-F19)');
}
else {
//alphanumerics
var r = /^[a-z 0-9]+$/i;
if (!r.test(inputText)) {
setError(this,'alphanumeric only please!(a-z, 0-9)');
}
else {
setError(this);
}
}
}
}
});
});
</script>