Working on a simple registration form in Javascript and I can't quite figure out why my phone validation function isn't working. What I'm trying to do is
Make the field optional. If the user doesn't put anything in the field, the form will still be valid and submit
If the user puts in a phone number, it must be in an XXX-XXX-XXXX format.
Any and all help is appreciated.
Here is my code
function validateform() {
var username = document.getElementById('username');
var password = document.getElementById('password');
var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');
var dob = document.getElementById('dob');
var email = document.getElementById('email');
var phone = document.getElementById('phone');
if (username.value.length < 8) {
alert("Username must be at least 8 characters");
username.focus();
return false;
}
if (password.value.length < 8) {
alert("Password must be at least 8 characters");
password.focus();
return false;
}
let isVaild = moment(dob.value, 'MM/DD/YYYY', true).isValid()
if (!isVaild) {
alert("Date must be in MM/DD/YYYY format");
dob.focus();
return false;
}
}
function validatePhone() {
var num1 = document.getElementById('phone').value;
if (num1 !== "" && !num1.match(/\(\d{2}\)\d{8}/)) {
alert('That is not a correct telephone number format');
return false;
}
}
function vailddatecheck(dateString) {
var dateforvailidation = dateString.value;
var isVaild = moment(dateforvailidation, 'MM/DD/YYYY', true).isVaild();
if (isVaild) {
return true;
} else {
alert("Date must be in MM/DD/YYYY format");
form.dob.focus();
return false;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Totally Legit Registration Page</title>
<link href="Mod4style.css" rel="stylesheet">
</head>
<body>
<form class="submit.html" method="post" class="simpleForm" onsubmit="return validateform()">
<input type="text" id="username" placeholder="User Name">
<p class="error"></p>
<input type="password" id="password" placeholder="Password">
<p class="error"></p>
<input type="firstname" id="firstname" placeholder="First Name">
<p class="error"></p>
<input type="lastname" id="lastname" placeholder="Last Name">
<p class="error"></p>
<input type="dob" id="dob" placeholder="Date of Birth">
<p class="error"></p>
<input type="email" id="email" placeholder="Email">
<p class="error"></p>
<input type="phone" id="phone" placeholder="Phone Number" onsubmit="return validatePhone();">
<p class="error"></p>
<button type="Submit" onClick="">Submit</button>
<button type="Reset">Reset</button>
</form>
<script <script src="formvalidation.js" charset="utf-8"></script>
</body>
<script src="https://cdn.jsdelivr.net/npm/moment#2.24.0/moment.min.js"></script>
</html>
The function validate validatePhone() will never be called due to
<input type="phone" id="phone" placeholder="Phone Number" onsubmit="return validatePhone();">
onsubmit will should be added to <form> and in the end of validateform add
return validatePhone()
And correct regex is following
^(\d{3}-){2}\d{4}$
The last problem is using match() match always return array which is always trucy. Even Boolean([]) will be true. So !num1.match(/\(\d{2}\)\d{8}/ will always be false. You should use RegExp.prototype.test.
if (num1 !== "" && !/(\d{3}-){2}\d{4}/.test(num1))
function validateform() {
var username = document.getElementById('username');
var password = document.getElementById('password');
var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');
var dob = document.getElementById('dob');
var email = document.getElementById('email');
var phone = document.getElementById('phone');
if(username.value.length < 8){
alert("Username must be at least 8 characters");
username.focus();
return false;
}
if (password.value.length < 8) {
alert("Password must be at least 8 characters");
password.focus();
return false;
}
let isVaild = moment(dob.value, 'MM/DD/YYYY', true).isValid()
if (!isVaild)
{
alert("Date must be in MM/DD/YYYY format");
dob.focus();
return false;
}
return validatePhone();
}
function validatePhone()
{
console.log('x')
var num1 = document.getElementById('phone').value;
if (num1 !== "" && !/(\d{3}-){2}\d{4}/.test(num1))
{
alert('That is not a correct telephone number format');
return false;
}
}
function vailddatecheck(dateString) {
var dateforvailidation = dateString.value;
var isVaild = moment(dateforvailidation, 'MM/DD/YYYY' , true).isVaild();
if (isVaild) {
return true;
}
else {
alert("Date must be in MM/DD/YYYY format");
form.dob.focus();
return false;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Totally Legit Registration Page</title>
<link href="Mod4style.css" rel="stylesheet">
</head>
<body>
<form class="submit.html" method="post" class="simpleForm" onsubmit="return validateform()">
<input type="text" id="username" placeholder="User Name">
<p class="error"></p>
<input type="password" id="password" placeholder="Password">
<p class="error"></p>
<input type="firstname" id="firstname" placeholder="First Name">
<p class="error"></p>
<input type="lastname" id="lastname" placeholder="Last Name">
<p class="error"></p>
<input type="dob" id="dob" placeholder="Date of Birth" >
<p class="error"></p>
<input type="email" id="email" placeholder="Email">
<p class="error"></p>
<input type="phone" id="phone" placeholder="Phone Number">
<p class="error"></p>
<button type="Submit" onClick="">Submit</button>
<button type="Reset">Reset</button>
</form>
<script <script src="formvalidation.js" charset="utf-8"></script>
</body>
<script src="https://cdn.jsdelivr.net/npm/moment#2.24.0/moment.min.js"></script>
</html>
Your regex is incorrect. Try /^\d{3}-\d{3}-\d{4}$/.
The regex you provided will match any number of the format (##)########
function validateform() {
var username = document.getElementById('username');
var password = document.getElementById('password');
var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');
var dob = document.getElementById('dob');
var email = document.getElementById('email');
var phone = document.getElementById('phone');
if (username.value.length < 8) {
alert("Username must be at least 8 characters");
username.focus();
return false;
}
if (password.value.length < 8) {
alert("Password must be at least 8 characters");
password.focus();
return false;
}
let isVaild = moment(dob.value, 'MM/DD/YYYY', true).isValid()
if (!isVaild) {
alert("Date must be in MM/DD/YYYY format");
dob.focus();
return false;
}
}
function validatePhone() {
var num1 = document.getElementById('phone').value;
if (num1 !== "" || !num1.match(/\(\d{2}\)\d{8}/)) {
alert('That is not a correct telephone number format');
return false;
}
}
function vailddatecheck(dateString) {
var dateforvailidation = dateString.value;
var isVaild = moment(dateforvailidation, 'MM/DD/YYYY', true).isVaild();
if (isVaild) {
return true;
} else {
alert("Date must be in MM/DD/YYYY format");
form.dob.focus();
return false;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Totally Legit Registration Page</title>
<link href="Mod4style.css" rel="stylesheet">
</head>
<body>
<form class="submit.html" method="post" class="simpleForm" onsubmit="return validateform()">
<input type="text" id="username" placeholder="User Name">
<p class="error"></p>
<input type="password" id="password" placeholder="Password">
<p class="error"></p>
<input type="firstname" id="firstname" placeholder="First Name">
<p class="error"></p>
<input type="lastname" id="lastname" placeholder="Last Name">
<p class="error"></p>
<input type="dob" id="dob" placeholder="Date of Birth">
<p class="error"></p>
<input type="email" id="email" placeholder="Email">
<p class="error"></p>
<input type="phone" id="phone" placeholder="Phone Number" onsubmit="return validatePhone();">
<p class="error"></p>
<button type="Submit" onClick="">Submit</button>
<button type="Reset">Reset</button>
</form>
<script <script src="formvalidation.js" charset="utf-8"></script>
</body>
<script src="https://cdn.jsdelivr.net/npm/moment#2.24.0/moment.min.js"></script>
</html>
Related
Why my form is getting submitted even if I leave all fields empty. I can't figure out what the problem is. The if loops looks fine to me.
This is my code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Javascript form check</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<body style="margin-top: 30px; margin-left: 30px;">
<form method="POST" action="form-handler" onsubmit="return checkForm(this);">
<p>First Name <input type="text" size="32" name="first_name"></p>
<p>Email Address <input type="text" size="32" name="email"></p>
<p>Phone Number <input type="number" size="32" name="phoneno"></p>
<p>Password <input type="password" size="32" name="pass"></p>
<p>Verify Password <input type="password" size="32" name="pass_verify"></p>
<p>Date of Birth <input type="date" size="32" name="date"></p>
<p>Weight <input type="text" size="32" name="weight"></p>
<input type="submit">
</form>
<script>
function checkForm(form) {
// validation fails if the input is blank
if (form.first_name.value == "") {
alert("Error: Input is empty!");
form.first_name.focus();
return false;
}
if (form.weight.length == 0)
{
alert("Invalid Weight");
return false;
}
// regular expression to match only alphanumeric characters and spaces
var re = /^[\w ]+$/;
// validation fails if the input doesn't match our regular expression
if (!re.test(form.first_name.value)) {
alert("Error: Input contains invalid characters!");
form.first_name.focus();
return false;
}
//Code to Validate Phone Number
var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if(!(form.phoneno.match(phoneno))
{
alert("Number must be 10 characters");
return false;
}
//Code to validate password
var passw= /^[A-Za-z]\w{4,14}$/;
if(!(form.pass.match(passw)))
{
alert('Wrong password')
return false;
}
//Code to validate email
if (!(/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))){
alert("You have entered an invalid email address!")
return false;
}
}
</script>
</body>
</html>
you are missing a ) in this line
if(!(form.phoneno.match(phoneno)))
Your code was just riddled with errors so I've sorted most of them here :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Javascript form check</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<body style="margin-top: 30px; margin-left: 30px;">
<form method="POST" action="form-handler" onsubmit="return checkForm(this);" >
<p>First Name <input type="text" size="32" name="first_name"></p>
<p>Email Address <input type="text" size="32" name="email"></p>
<p>Phone Number <input type="number" size="32" name="phoneno"></p>
<p>Password <input type="password" size="32" name="pass"></p>
<p>Verify Password <input type="password" size="32" name="pass_verify"></p>
<p>Date of Birth <input type="date" size="32" name="date"></p>
<p>Weight <input type="text" size="32" name="weight"></p>
<input type="submit">
</form>
<script>
function checkForm(form) {
// validation fails if the input is blank
if (form.first_name.value === "") {
alert("Error: Input is empty!");
form.first_name.focus();
return false;
}
if (form.weight.length === 0) {
alert("Invalid Weight");
return false;
}
// regular expression to match only alphanumeric characters and spaces
var re = /^[\w ]+$/;
// validation fails if the input doesn't match our regular expression
if (!re.test(form.first_name.value)) {
alert("Error: Input contains invalid characters!");
form.first_name.focus();
return false;
}
//Code to Validate Phone Number
var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if (!(form.phoneno.match(phoneno))) {
alert("Number must be 10 characters");
return false;
}
//Code to validate password
var passw = /^[A-Za-z]\w{4,14}$/;
if (!(form.pass.match(passw))) {
alert('Wrong password')
return false;
}
//Code to validate email
if (!(/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))) {
alert("You have entered an invalid email address!");
return false;
}
}
</script>
</body>
</html>
Working fiddle here : https://jsfiddle.net/chj8rpxv/1/
<body>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post" required>
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</body>
I'm trying to create a form validation using HTML and pure JavaScript as a part of my assignment. However, the age and password validation don't seem to work even with tinkering a lot with code. The age is supposed to be valid if it is between 18 to 60 and the password must be the same as well as according to regex.
Here's the extended code:
Edit: the uage code has been edited but still doesn't work as intended.
function checkPassword(str) {
var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$/;
return re.test(str);
}
function checkName(str) {
var ge = /^[a-zA-Z ]+$/;
return ge.test(str);
}
function mytq() {
var uname = document.forms.formvalidation.fullname;
var uemail = document.forms.formvalidation.email;
var uage = document.forms.formvalidation.age;
var upwd = document.forms.formvalidation.password;
var vpwd = document.forms.formvalidation.pwdrpt;
if (uname.value != "") {
if (!checkName(uname.value)) {
window.alert("Please enter a valid name");
uname.focus();
return false;
}
}
if (!(uage < 16 || uage > 60)) {
window.alert("Sorry you're not eligible for the position");
uage.focus();
return false;
}
if (uemail.value.indexOf("#", 0) < 0 && uemail.value.indexOf(".", 0) < 0) {
window.alert("Please enter a valid email");
uemail.focus();
return false;
}
if (upwd.value != "" && upwd.value == vpwd.value) {
if (!checkPassword(upwd.value)) {
window.alert("The password you entered is not valid");
upwd.focus();
return false;
}
}
return true;
}
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<script type="text/javascript">
</script>
</head>
<body>
<form name="formvalidation" method="POST" onsubmit="return mytq();" action="#">
<h1>Welcome to FTN.</h1>
<p>Fill this form before</p>
<hr>
<label for="name"><b>Full Name</b></label>
<input type="text" name="fullname" placeholder="Full Name" required>
<label for="email"><b>Email</b></label>
<input type="text" name="email" placeholder="Email" required>
<label for="age"><b>Age</b></label>
<input type="number" name="age" required>
<label for="password"><b>Password</b></label>
<input type="password" name="password" placeholder="Password" required>
<label for="password-repeat"><b>Re-type password</b></label>
<input type="password" name="pwdrpt" placeholder="Re-type Password" required>
<hr>
<p>By creating this account, you are agreeeing our terms and condition</p>
<button type="submit" class="registerbtn">Submit</button>
</form>
</body>
</html>
Your age comparison is flawed. If you wish to ensure that the age is greater than 16 and less than 60, you should simplify it to
if(uage < 16 || uage > 60) {
window.alert("Sorry you're not eligible for the position");
uage.focus();
return false;
}
alert is not working as expected! i don't know why...
I am trying to evaluate a form on client side. I have tried getElementsById, getElementsByName.
Where am i going wrong?
I am sure the flow of control goes through validate()
an alert statement immediately inside validate method is being displayed!
Here is my code:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" errorPage="Error.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
function validate() {
var uname = document.getElementById("uname").value;
var email = document.getElementById("email").value.indexof('#');
var pass = document.getElementById("pass").value;
var rpass = document.getElementById("rpass").value;
submitOK = true;
if (uname.length == 0) {
alert("Username cannot be empty")
submitOK = false;
}
if (email == -1) {
alert("Not a valid email");
submitOK = false;
}
if (pass.length === 0) {
alert("Password cannot be empty");
submitOK = false;
}
if (pass != rpass) {
alert("passwords don't match");
submitOK = false;
}
return submitOK;
}
</script>
<title>Register</title>
</head>
<body>
<h1>Register</h1>
<br />
<form action="RegInt.jsp" method="post" onsubmit="return validate()">
Enter UserName : <input type="text" name="uname" id="uname" value='${ param.uname}'placeholder="Enter Name" ><br/><br/>
Enter Email: <input type="email" name="email" id = "email" value='${param.email}'placeholder="Enter Email"><br/><br/>
Enter Password: <input type="password" name="pass" id = "pass" value='${param.pass}'placeholder="Enter password"><br/><br/>
Repeat Password: <input type="password" name="rpass" id = "rpass" value='${param.rpass}'placeholder="Repeat Password"/><br/>
<br/><br/>
<input type="submit"/>
</form>
<h4>${errorMsg}</h4>
</body>
</html>
Spelling of alret and indexOf !
getElementById is singular
submitOK="false" sets submitOK to true since a non-empty string is truthy. use submitOK=false
you did not return submitOK when you asked the question
function validate() {
var uname = document.getElementById("uname").value;
var email = document.getElementById("email").value.indexOf('#');
var pass = document.getElementById("pass").value;
var rpass = document.getElementById("rpass").value;
submitOK = true;
if (uname.length == 0) {
alert("Username cannot be empty")
submitOK = false;
}
if (email == -1) {
alert("Not a valid email");
submitOK = false;
}
if (pass.length === 0) {
alert("Password cannot be empty");
submitOK = false;
}
if (pass != rpass) {
alert("passwords don't match");
submitOK = false;
}
return submitOK;
}
<h1>Register</h1>
<br />
<form action="RegInt.jsp" method="post" onsubmit="return validate()">
Enter UserName :
<input type="text" name="uname" id="uname" value='${ param.uname}' placeholder="Enter Name">
<br/>
<br/>Enter Email:
<input type="email" name="email" id="email" value='${param.email}' placeholder="Enter Email">
<br/>
<br/>Enter Password:
<input type="password" name="pass" id="pass" value='${param.pass}' placeholder="Enter password">
<br/>
<br/>Repeat Password:
<input type="password" name="rpass" id="rpass" value='${param.rpass}' placeholder="Repeat Password" />
<br/>
<br/>
<br/>
<input type="submit" />
</form>
First check the spelling s and correct them. Then comment all the feilds and start troubleshooting them line by line. You will win. Regards !
I'm trying to validate the inputs, so far I've created only two rules. One to test the phone number and another to test if the passwords entered at the same.
My problem is that for some reason my javascript isn't validating input. I have it referenced in <script>, I call it in the form onsubmit="return validate()". For some reason even with using an alert test to check that its run, that fails. So, I'm not really sure what's wrong, I could do with some extra eyes.
function validate() {
var errMsg = ""; /* stores the error message */
var result = true; /* assumes no errors */
var phonetest1 = true;
var phonetest2 = true;
/*get values from the form*/
var FirstName = document.getElementById("FirstName").value;
var Lastname = document.getElementById("Lastname").value;
var Email = document.getElementById("Email").value;
var Password = document.getElementById("Password").value;
var ConPassword = document.getElementById("ConPassword").value;
var Phone = document.getElementById("Phone").value;
var phonepatt1 = (/\(|0|\d|\)|\d|\d|\d|\d|\d|\d|\d|\d/);
var phonepatt2 = (/0|\d|\s|\d|\d|\d|\d|\d|\d|\d|\d/);
/* Rule one */
if (!phonepatt1.test(Phoneno)) {
phonetest1 = false;
}
if (!phonepatt2.test(Phoneno)) {
phonetest2 = false;
}
if (phonetest1 == false && phonetest2 == false) {
errMsg += "Your Phone number is incorrect .\n";
result = false;
}
alert("I'm running"); /* This isn't working */
/* Rule two */
if (ConPassword != Password) {
errMsg += "Please confirm your password .\n";
result = false;
}
if (errMsg != "") { //only display message box if there is something to show
alert(errMsg);
}
return result;
}
<H1>store Home Page</H1>
<p>Customer Registration: Register
<p>Customer Login: Login
<p>Manager Login Administrators
<form id="UserDetails" method="post" onsubmit="return validate()" action="index.htm">
<fieldset id="Details">
<legend>Your details:</legend>
<p>
<label for="FirstName">First Name</label>
<input type="text" name="FirstName" id="FirstName" pattern="[a-zA-Z]+" size="20" maxlength="20" required="required" />
</p>
<p>
<label for="Lastname">Last Name</label>
<input type="text" name="LastName" id="Lastname" pattern="[a-zA-Z]+" size="20" maxlength="20" required="required" />
</p>
<p>
<label for="Email">Email</label>
<input type="text" name="Email" id="Email" size="20" maxlength="20" required="required" />
</p>
<p>
<label for="Password">Password</label>
<input type="text" name="Password" id="Password" size="20" maxlength="20" required="required" />
</p>
<p>
<label for="ConPassword">Confirm Password</label>
<input type="text" name="ConPassword" id="ConPassword" size="20" maxlength="20" required="required" />
</p>
<p>
<label for="Phone">Phone Number</label>
<input type="text" name="Phone" id="Phone" maxlength="12" size="12" placeholder="(03)92251515" />
</p>
<input type="submit" value="Register Now!" />
<input type="reset" value="Reset" />
</fieldset>
</form>
You have wrog name in your JavaScript (should be Phone instead of Phoneno):
if (!phonepatt1.test(Phone)) {
phonetest1 = false;
}
if (!phonepatt2.test(Phone)) {
phonetest2 = false;
}
I need to make a labeled button that checks all the previous boxes I have above it and then reports back whether they are valid or not by putting the status on the screen after the button without popping up an alert, I am doing this in JavaScript so any help would be appreciated.
Here is what I have so far:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x){
x.style.background="yellow";
}
function validateForm(){
var Fid=document.getElementById("firstName").value;
if (Fid.length < 3) {
alert("first id is not valid");
return;
}
var Lid=document.getElementById("lastName").value;
if (Lid.length < 3) {
alert("Last id is not valid");
return;
}
var Age=document.getElementById("age").value;
if (Age.length == 0) {
alert("Age is not valid");
return;
}
} //End validateForm()
<script language="javascript">
function checkEmail() {
var email = document.getElementById("email");
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email.value)) {
alert("Please provide a valid email address");
email.focus;
return false;
}
}
</script>
</script>
</head>
<body>
First id: <input type="text" id="firstName" onFocus="myFunction(this)"><br>
Last id: <input type="text" id="lastName" onFocus="myFunction(this)"><br>
Age: <input type="text" id="age" onFocus="myFunction(this)"><br>
E-mail address: <input type="text" id="email" onFocus="myFunction(this)"><br>
<label id="status">status</label><br>
<button id="CheckButton" onClick="return validateForm();">Check Form</button>
</body>
</html>
Instead of alerting, just set the innerHTML of your status label:
var Fid=document.getElementById("firstName").value;
if (Fid.length < 3) {
var status = document.getElementById('status');
status.innerHTML = status.innerHTML + '<br>First id is not valid';
//alert("first id is not valid");
return;
}
Based on your comment, modify your HTML like so:
First id: <input type="text" id="firstName" onFocus="myFunction(this)"><br>
Last id: <input type="text" id="lastName" onFocus="myFunction(this)"><br>
Age: <input type="text" id="age" onFocus="myFunction(this)"><br>
E-mail address: <input type="text" id="email" onFocus="myFunction(this)"><br>
<span id="status">status</span><br>
<div id='firstNameDiv' style='display: none'>First id is not valid</div>
<div id='lastNameDiv' style='display: none'>Last is id not valid</div>
<div id='ageDiv' style='display: none'>Age is not valid</div>
<div id='emailDiv' style='display: none'>Email is not valid</div>
<button id="CheckButton" onClick="return validateForm();">Check Form</button>
And your javascript like this:
var Fid=document.getElementById("firstName").value;
if (Fid.length < 3) {
document.getElementById('firstNameDiv').style.display = "";
}
else {
document.getElementById('firstNameDiv').style.display = 'none';
}