We Keep Coding

Javascript not loading onClick validate form before loading php page

I'm writing a piece of HTML and JavaScript code and I need to check if inputs have been filled before clicking the button. However, when I leave them blank, it proceeds to the php page passing the variables empty.
I have made some tests and I've concluded it does not load the onClick function at all.
This is the code (without all the CSS stuff):
<div class = "register">
<form action = "register.php" method = "post" name = "reg1" id = "register" onClick = "return validateForm();">
<input type = "text" class = "reg" id = "name" name = "name"/>
<div class = "alert" id = "inserthere1"> </div>
<input type = "text" class = "reg" id = "surname" name = "surname"/> <div class = "alert" id = "inserthere2"></div>
<input type = "text" class = "reg" id = "mail" name = "mail" /><div class = "alert" id = "inserthere3"></div>
<input type = "submit" value = "Join!" >
</form>
</div>
<script language = "JavaScript">
function validateForm() {
var n = document.getElementById("name").value;
var c = document.getElementById("surname").value;
var m = document.getElementById("mail").value;
alert("Nome:"+n+"Cognome:"+c+"Mail:"+m);
document.getElementById("inserthere1").innerHTML = (n===null || n==="" ? '<i> This cannot be left empty. </i>' : '');
document.getElementById("inserthere2").innerHTML = (c===null || c==="" ? '<i> This cannot be left empty. </i>' : '');
document.getElementById("inserthere3").innerHTML = (m===null || m==="" ? '<i> This cannot be left empty. </i>' : '');
if ( n===null || c===null || n==="" || c==="" || m===null || m==="" )
return false;
}
return true;
}

So you want to make sure the fields are filled in before proceeding? You can use:
<input required="">
This way the user has to fill out the fields with required="", or their browser won't let them submit the form.

You have to use the preventDefault on the submit event or use a button instead a input, after that you have to use the onclick event on the button, not into the form that will validate if the inputs has been filled or not.
After you validate the form you can use this for submit your form
document.getElementById("myForm").submit();
That will send the form data to the action script.
Ref: preventDefault Documentation | W3CSchools
Ref2: Form Submit method | W3CSchools

try using
<form>..</form>
document.addEventListener('click', validateForm, false);
<script language = "JavaScript">
function validateForm() {
..
</script>

Why doesn't my reset() function remove my red error lines?

function validate() {
var fname = document.getElementById("fname").value;
document.getElementById("errorfname").innerHTML = "";
if (checkfname() == true) {
alert("Entry submitted.");
} else {
return false;
}
}
function checkfname() {
var fname = document.getElementById("fname").value;
if (fname.length == 0) {
document.getElementById("errorfname").innerHTML = "Invalid first name. Cannot be empty.";
return false;
} else if (!isNaN(fname)) {
document.getElementById("errorfname").innerHTML = "Invalid first name. Cannot contain numbers.";
return false;
} else {
return true;
}
}
function addRow() {
if (validate() == true) {
}
}
<form>
First Name:
<input type="text" id="fname" name="fname" />
<p id="errorfname" class="red"></p>
<input id="submit" type="submit" value="Submit Entry" onclick="return addRow()" />
<input id="clear" type="button" value="Reset" onclick="reset()" />
</form>
<form>
<fieldset>
<label for = "firstnameinput">
First Name: <input type = "text" id = "fname" name = "fname" placeholder = "John"/>
<p id = "errorfname" class = "red"></p>
</label>
</fieldset>
<fieldset>
<label id = "submitbutton">
<input id = "submit" type = "submit" value = "Submit Entry" onclick = "return addRow();upperCase();"/>
</label>
<label id = "resetbutton">
<input id = "clear" type = "button" value = "Reset" onclick = "reset()"/>
</label>
</fieldset>
</form>
This is my simplified HTML file. It basically has an input and a paragraph below it to display an error message later on. For now it is set as "" in javascript. The HTML also has a submit button and a reset button. The purpose of the reset button is to clear all previously entered fields or any error message that has appeared.
function validate(){
var fname = document.getElementById("fname").value;
document.getElementById("errorfname").innerHTML = "";
if(checkfname() == true){
alert("Entry submitted.");
}
else{
return false;
}
function checkfname(){
var fname = document.getElementById("fname").value;
if(fname.length == 0) {
document.getElementById("errorfname").innerHTML = "Invalid first name. Cannot be empty.";
return false;
}
else if(!isNaN(fname)){
document.getElementById("errorfname").innerHTML = "Invalid first name. Cannot contain numbers.";
return false;
}
else{
return true;
}
}
function addRow(){
if(validate() == true){
event.preventDefault();
var fname = document.getElementById("fname").value;
firstNameArray.push(fname)
var row = document.getElementById('table').insertRow(-1);
var colNum = row.insertCell(0);
var colName = row.insertCell(1);
i++;
colNum.innerHTML = i;
colName.innerHTML = fname + " " + lname;
else{
return false;
}
reset();
}
Lastly, my reset() function below.
function reset(){
document.getElementById("errorfname").innerHTML = "";
document.getElementById("fname").value = "";
}
The problem is, for example, in the input box for fname, I enter John. When I press the reset button on my HTML which calls the reset() function, John in the box disappears so I got that going for me which is nice. However, lets say I purposely left the box blank to receive an error message, a red sentence below the box appears saying "Invalid first name. Cannot be empty." When I press the reset button to call onto the reset() function, this red error message does not disappear however, any current value inside the box disappears. This makes by reset() function work 50% only. I clearly stated for both to disappear in my reset() function.
TL;DR
I have a reset button in my HTML which calls a reset() function in my javascript. I have a name input box in my HTML and what the reset() function is supposed to do is to remove any current name which is inside the box as well as remove any error message that appears below. My reset() function is able to clear away any name inside the box currently but is unable to clear away the error message.

I created a fiddle to test your problem. I noticed the same thing. I changed the method reset() to resetTest() and it worked fine.
working fiddle
The reason changing the name worked is that onxyz= attribute event handlers are run (effectively) within a couple of with statements, one of which is with (theEnclosingFormElement). Form elements have a built-in reset method that clears all of their inputs to their initial values. So in this:
<input id = "clear" type = "button" value = "Reset" onclick = "reset()"/>
The reset being called isn't your reset, it's the form's reset, which doesn't (of course) do anything with errorfname. Changing the name removes the conflict.

Javascript form vaidation

I am new to this forum and am quite a novice at Javascript:
I am trying to do a simple form validation.
On the head part of the html file I have a function
function form_onchange(){
var Fname = document.getElementById('Fname');
var RegExpTxt = /^([a-zA-Z ]){2,30}$/;
if (!RegExpTxt(Fname.value)) {
alert('Please provide a valid name');
Fname.focus();
Fname.select();
return false;
}
}
This is just a part of the function I have other validation rules on it.
On the html part I have:
<table align="center" border = "1" bordercolor="#8B008B" cellpadding="5">
<form action = "Pizza Fun.html" name = "formA" method = "post" onsubmit = "return checkBlank() ">
<tr>
<td><p>Name</p></td>
<td><span>First </span><input type = "text" name = "Fname" id = "Fname" onchange = "form_onchange()" value = "first" />
<span>Last </span><input type = "text" name = "Lname" id = "Lname" onchange = "form_onchange()" value = "lat " />
</td>
</tr>
The validation part was working yesterday but now for the life of me is not working now. Please can anyone help me why it is not working.

Use RegExpTxt.test(Fname.value) instead of RegExpTxt(Fname.value)
Javascript should end up being:
function form_onchange(){
var Fname = document.getElementById('Fname');
var RegExpTxt = /^([a-zA-Z ]){2,30}$/;
if (!RegExpTxt.test(Fname.value)) {
alert('Please provide a valid name');
Fname.focus();
Fname.select();
return false;
}
}

How to stop HTML to insert data into database when wrong input taken

So I have my form here
<form name = "reservation" method = "post" action = "makereservation.php" autocomplete="off">
(my codes here)
<input type = "submit" value = "Submit" onclick="checkPhoneNumber(document.reservation.contact)">
</form>
And my Javascript function here to detect wrong length of phone number
function checkPhoneNumber(contact)
{
var phoneno = /^\d{10}$/;
if(contact.value.match(phoneno))
{
return true;
}
else
{
alert("Not a valid Phone Number");
return false;
}
}
What I want to ask is that how do I stop from inserting into database when the input for phone number is wrong?
What I got now is that it detects wrong length of phone number but it still insert into database.

Try this
<form name = "reservation" method = "post" action = "makereservation.php" autocomplete="off"
onsubmit="return checkPhoneNumber(document.reservation.contact)">
<input type = "submit" value = "Submit" >

Return False & Javascript Form

I've looked over a number of posts that are similar to my query, but in general, they are not helping me. I think part of my problem is that I am so new to JavaScript that a lot of the previous posts are too complicated for me. I have the simple code below, but it does not seem to work. I do not get my alerts, and I do not think the form is being submitted even when the function should be returning "true." I checked the Error Console, and there are no errors. Can someone help?
JavaScript:
function submit()
{
var age = document.Message.Age.value;
if (age > 39)
{
alert("You're old.");
return false;
}
else
{
alert("You're young!");
return true;
}
}
HTML:
<FORM id = "Message" name = "Message" method = "post" action = "http://cnn.com" onsubmit = "return submit();">
First Name: <INPUT type = "text" name = "Fname"/><br>
Age: <INPUT type = "text" name = "Age"/><br>
<INPUT type="button" name = "Submit" value = "Submit">
</FORM>

Change your HTML to
<FORM id = "Message" name = "Message" method = "post" action = "http://cnn.com" onsubmit = "return submit();">
First Name: <INPUT type = "text" name = "Fname"/><br>
Age: <INPUT type = "text" name = "Age"/><br>
<INPUT type="submit" name = "Submit" value = "Submit">
</FORM>
Note that the input type has been changed to 'submit', so that the submission actually takes place.

I doubt your javascript function itself is being called or not. If not, I think you need to move you onsubmit to <body> tag from <form> tag.
as
<body onsubmit"return submit();">
Also either change your button to either type as submit or add an onClick() event below:
<INPUT type="submit" name = "Submit" value = "Submit"/>
or
<INPUT type="button" name = "Submit" value = "Submit" onClick="submit()"/>
Below is the full working code(in chrome and IE8) sample:
<Html>
<head>
<script language="javascript">
function submit(){
var age = document.Message.Age.value;
if (age > 39){
alert("You're old.");
return false;
}else{
alert("You're young!");
return true;
}
}
</script>
</head>
<body>
<FORM id = "Message" name = "Message" method = "post"
action = "http://cnn.com" onSubmit = "javascript:return submit();">
First Name: <INPUT type = "text" name = "Fname"/><br>
Age: <INPUT type = "text" name = "Age"/><br>
<INPUT type="submit" name = "Submit" value = "Submit"/>
</FORM>
</body>
</html>