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

the issue i find is when using web console no errors are popping up, however what should be happening is when i submit my form , the validation should take place but it does not — Michael Wright
– Michael Wright, Commented Mar 12, 2018 at 17:47

Abdul Rauf · Accepted Answer · 2018-03-12 18:19:14Z

1

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.

edited Mar 12, 2018 at 18:19

answered Mar 12, 2018 at 17:45

Abdul Rauf

4847 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Michael Wright Over a year ago

i tried your changes but i still get the same issue

Abdul Rauf Over a year ago

@MichaelWright. check the fiddle which i just have created. I added their link in my answer.

Michael Wright Over a year ago

ok i went on it and when i run your edited version of the code i get a TypeError: Cannot read property 'value' of null

Michael Wright Over a year ago

great help it works perfectly on the fiddle my only issue is getting it to work on my browser - i have this bit of code <!DOCTYPE html> <html> <head> <title> Contact Form </title> <link href ="fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <script type="text/javascript" src = "contactform.js"> </script> <meta charset="utf-8"/> </head> at the top of my html page could this be the issue?

Bhavin Jasani · Accepted Answer · 2018-03-12 17:52:22Z

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

answered Mar 12, 2018 at 17:52

community wiki

Bhavin Jasani

4 Comments

Michael Wright Over a year ago

Another one is close table element in html part - what do you mean by this?

Michael Wright Over a year ago

i found the missing > in table and the . missing in healthnumber area but still the same issue im getting

Bhavin Jasani Over a year ago

The submit code must be in form tag, not in the input tag.see the another answer which is mentioned with example. <form id = "test2" name = "test2" onsubmit="return validate(event);"><table></table></form>

Bhavin Jasani Over a year ago

Also put return false; out of all conditions. Before last } closing braces.

Moha Hossam · Accepted Answer · 2018-03-12 18:52:09Z

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");
 }



}

Collectives™ on Stack Overflow

Linking Validation js file to html file ERROR - Javascript

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related