Embedded Files
HTML 5 CSS JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample HTML 5 form</title>
</head>
<body>
<form id="myform" method="POST" action="" onsubmit="return validForm(this);">
<span>Iryna's Form</span>
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="username" required>
<label for="POST-email">Email:</label>
<input id="POST-email" type="text" name="email" required>
<input type="submit" value="Submit">
</form>
</body>
</html>
form {
padding:10px;
margin:10px;
border:1px solid green;
}
span, input {
display:block;
margin:5px 0;
}
span {
font-size:18px;
font-weight:bold;
}
/* HTML5 */
input:required:invalid, input:focus:invalid {
color:red;
-moz-box-shadow: none;
}
function validForm(form)
{
if(form.username.value == "") {
alert("Error: Username cannot be blank!");
form.username.focus();
return false;
}
re = /^\w+$/;
if(!re.test(form.username.value)) {
alert("Error: Username must contain only letters, numbers and underscores!");
form.username.focus();
return false;
}
if(form.email.value == "") {
alert("Email: cannot be blank!");
form.email.focus();
return false;
}
re = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!re.test(form.email.value)) {
alert("Error: not valid!");
form.email.focus();
return false;
}
return true;
}
jQuery validate plugin
$(document).ready(function() { $("#myForm").validate({ rules: { username: { required: true, minlength: 2 }, email: true }, messages: { name: "Please enter your name", email: { required: "Enter your email address", email: "Your email address must be in the format of name@domain.com" } } }); });
Page updated
Google Sites
Report abuse