Untitled Document

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Boxes</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<script language="javascript">
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
return pattern.test(emailAddress);
};

function isValidMobile(mobNumber){
var phonePattern = new RegExp(/^04[0-7]\d{7}$/g);
//phone number is not valid. Please notice that you don't need to check if it's empty or null since Regex checks it for you anyways
return phonePattern.test(mobNumber);
};
//alert(isValidMobile("0411140000"));

$( document ).ready(function(){
$("#email" ).focus();
$( "#email" ).blur(function() {
checkEmail($("#email").val());
});
$( "#email" ).keydown(function() {
checkEmail($("#email").val());
});

function checkEmail(emailAddie){
if(!isValidEmailAddress($("#email" ).val())){
$( "#emailError" ).html("Malformed email address");
$("#email" ).addClass("error");
$("#email" ).focus();
$('input[type="submit"]').prop('disabled', true);
return false;
}else{
$( "#emailError" ).html("");
$("#email" ).removeClass("error");
$('input[type="submit"]').prop('disabled', false);
return true;
}
}
$("#submitB").click(function(e) {

if(!checkEmail($("#email").val())){
e.preventDefault();
}
});
});
</script>
<form action="http://david.brambling.cdu.edu.au/formReply.php" method="post">
<fieldset>
<legend>Log In.</legend>
<label for="email">Email</label><input type="email" name="email"
id="email" autocomplete="off"><span id="emailError"></span>
<label for="password">Password</label><input type="password" name="password" id="password">
<label for="gender">Gender</label>
Male<input type="radio" name="gender" value="male">
Female<input type="radio" name="gender" value="female">
Other<input type="radio" name="gender" value="other">
<label for="sports[]">Sports</label>
Hockey<input type="checkbox" name="sports[]" value="hockey">
AFL<input type="checkbox" name="sports[]" value="AFL">
NRL<input type="checkbox" name="sports[]" value="NRL">
<button type="submit" value="Log In!" id="submitB" name="submit">Log In!</button>
<input type="hidden" name="myHiddenValue" value="WhatEvaUWan">
</fieldset>
</form>
<style>
input[type="!radio"]{ display:block}
fieldset{ width:300px;padding:20px;}
input[type="email"],input[type="password"]{ width:250px;}
button{ display:block; width:120px; padding:10px; margin:10px auto; position:relative;}

.error{background-color:#FFC3C9;color:black;
background-image:url(images/!.gif);
background-repeat:no-repeat;
background-position:right;}
</style>

</body>
</html>