<!DOCTYPE html>
<html>
<head>
<title>Register</title>
</head>
<body>
<form action="#" method="POST" id = "myform">
<fieldset>
<legend>Fill up the form</legend>
<label>
Full Name<input type = "text" name = "fullname" id="fullname">
</label>
<br><br>
<label>
Username:<input type = "text" name = "username" id="username">
</label>
<br><br>
<label>
Password:<input type = "password" name = "password" id="password">
</label>
<br><br>
<label>
Email:<input type = "email" name = "email" id = "email">
</label>
<br><br>
<input type = "submit" value = "Submit">
</fieldset>
</form>
<script>
function formValidator(){
var fullname = document.getElementById('fullname').value;
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var email = document.getElementById('email').value;
if(fullname==""){
alert("Name can't be empty.");
return false;
}
var fullnameREGEX = /^[A-Z][a-z]+\s[A-Z][a-z]+$/;
if(!fullnameREGEX.test(fullname)){
alert("Enter a valid name.");
return false;
}
if(username==""){
alert("Username can't be empty.");
return false;
}
var usernameREGEX = /^[a-z][a-z0-9]+$/;
if(!usernameREGEX.test(username)){
alert("Enter a valid user name");
return false;
}
if(password==""){
alert("Password can't be empty.");
return false;
}
if(email==""){
alert("Email can't be empty");
return false;
}
var emailREGEX = /^[a-z][a-z0-9]+\@[a-z0-9]+.[a-z]{2,4}$/;
if(!emailREGEX.test(email)){
alert("Enter a valid email.");
}
return true;
}
</script>
</body>
</html>
This programs allows to validate the entered data from the client side. REGEX is used to validate the email.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.