Linking Validation js file to html file ERROR - Javascript
Question
<script type="text/javascript" src = "diabetestool.js"> </script>
<meta charset="utf-8"/>
</head>
<body>
<form id = "test2" name = "test2">
<table cellpadding="2" width="20%" bgcolor="red"
align="center"
cellspacing="2"
<tr>
<td colspan =2>
<center> <font size = 4>FORM TO FILL IN </font></center>
</td>
</tr>
<td> Title </td>
<td> <select Name="Title">
<option value= "-1 selected"> select...</option>
<option value= "Mr"> Mr </option>
<option value= "Mrs"> Mrs </option>
<option value= "Miss"> Miss </option>
<option value= "Ms"> Ms </option>
<option value= "Master"> Master</option>
</select></td>
</tr>
<tr>
<td>First Name</td>
<td><input type ="text" name= "firstName" id ="firstName" size ="30"> </td>
</tr>
<tr>
<td> Last Name</td>
<td> <input type ="text" name ="lastName" id = "lastName" size ="30"> </td>
</tr>
<tr>
<td> Health Authority Number</td>
<td> <input type ="text" name ="healthNumber" id = "healthNumber" size ="30"> </td>
</tr>
<tr>
<td> Email</td>
<td> <input type ="text" name ="email" id = "email" size ="30"> </td>
</tr>
<tr>
<td> Telephone Number</td>
<td> <input type ="text" name ="telephoneNumber" id = "telephoneNumber" size ="30"> </td>
</tr>
<tr>
<td colspan ="2"> <input type="submit" value="submit form" onsubmit="return validate()"; </td>
</tr>
</table>
</form>
</body>
</html>
this is my code to create the code for my contact form to be filled there are a selection of options
function validate ()
{
// Declare all the variables here
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var Title = document.getElementById("Title").value;
var healthNumber = parseInt(document,getElementById("healthNumber").value);
var email = document.getElementById("email").value;
var validEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z]{2,6}$/;
if(firstName!="" && lastName!= "" && Title!="" && email !="")
{
if(email.match(validEmail))
{
alert("All Values Validated");
return true;
}
else
{
alert("Enter a valid Email");
return false;
}
}
else
{
alert("All Fields are required");
return false;
}
}
this is just a randomly created js validation code just to test to see if the validating process works with my code and then i will change it to actually do the proper validation i want the issue is that with my html page for my contact form after submitting, it just refreshes that page i have tried different things but not able to find a solution
3 answers
solution1
1 ACCPTED 2018-03-12 17:45:47
You code has lot of syntax error. I fix syntax error. Here is the js fiddle: https://jsfiddle.net/0ngs96n0/13/
Use onsubmit in form tag something like that :
<form id = "test2" name = "test2" onsubmit="return validate(event);">
and In JS:
function validate (e){
e.preventDefault();
.................
.................
.................
.................
.................
}
it will stop the form from refreshing.
solution2
0
parseInt(document,getElementById("healthNumber").value); Check the above line there is a , comma instead of. Dot . In document.getElementById("healthNumber").value;
Another one is close table element in html part, it will be solved Thanks
solution3
0 2018-03-12 18:52:09
You have some mistakes in your code such as calling the function in HTML
And "parseInt "function in JS
HTML :
<html>
<head>
<script type="text/javascript" src = "diabetestool.js"> </script>
<meta charset="utf-8"/>
</head>
<body>
<form id = "test2" name = "test2" onsubmit="validate()">
<table cellpadding="2" width="20%" bgcolor="red"
align="center"
cellspacing="2"
<tr>
<td colspan =2>
<center> <font size = 4>FORM TO FILL IN </font></center>
</td>
</tr>
<td> Title </td>
<td> <select Name="Title" id="Title">
<option value= "-1 selected"> select...</option>
<option value= "Mr"> Mr </option>
<option value= "Mrs"> Mrs </option>
<option value= "Miss"> Miss </option>
<option value= "Ms"> Ms </option>
<option value= "Master"> Master</option>
</select></td>
</tr>
<tr>
<td>First Name</td>
<td><input type ="text" name= "firstName" id ="firstName" size ="30"> </td>
</tr>
<tr>
<td> Last Name</td>
<td> <input type ="text" name ="lastName" id = "lastName" size ="30"> </td>
</tr>
<tr>
<td> Health Authority Number</td>
<td> <input type ="text" name ="healthNumber" id = "healthNumber" size ="30"> </td>
</tr>
<tr>
<td> Email</td>
<td> <input type ="text" name ="email" id = "email" size ="30"> </td>
</tr>
<tr>
<td> Telephone Number</td>
<td> <input type ="text" name ="telephoneNumber" id = "telephoneNumber" size ="30"> </td>
</tr>
<tr>
<td colspan ="2"> <input type="submit" value="submit form" >
</td>
</tr>
</table>
</form>
</body>
</html>
javascript:
// Declare all the iables here
var firstName;
var lastName;
var Title ;
var healthNumber;
var email ;
validEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z]{2,6}$/;
function validate ()
{
firstName = document.getElementById("firstName").value;
lastName = document.getElementById("lastName").value;
Title = document.getElementById("Title").value;
// healthNumber = parseInt(document,getElementById("healthNumber").value);
email = document.getElementById("email").value;
validEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z]{2,6}$/;
if(firstName!="" && lastName!= "" && Title!="" && email !="")
{
if(email.match(validEmail))
{
alert("All Values Validated");
}
else
{
alert("Enter a valid Email");
}
}
else
{
alert("All Fields are required");
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.