Develop Reference

Form submission validation: Why it is not showing pop up message that fill out required entries in form if empty

I am running with this problem where I am clicking the submit button but it is not showing that particular entry like "fname,email,message" are required.
I have tried different ways like putting "required" attribute in input tags but here also same thing is happening.
This is contact.html file:
<script defer src="script.js"></script>
<div id="error"></div>
<div class="con"><div class="he"><h1>Contact Us</h1><br>
<p>Please feel free to contact us with any questions you may have around our coaching or online analysis. </p></div> </div> -->
<div class="con2"> <div class="form"><form class="form" name="myform" method="GET">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" class="name1">
<label for="lname"class="n">Last name:</label>
<input type="text" id="lname" name="lname" class="name2"><br>
<label for="email">Email:</label><br>
<input type="text" id="mail2" name="email"class="mail"><br>
<label for="comment">Message or Comment:</label><br>
<textarea name="comment" rows="10" cols="30"class="para">
</textarea><br>
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
script.Js file:
const name=document.getElementsByClassName('name1')
const name2=document.getElementsByClassName('name2')
const mail=document.getElementsByClassName('mail')
const para=document.getElementsByClassName('para')
const form=document.getElementsByClassName('form')
const errorElement=document.getElementById('error')
form.addEventListener('submit' , (e)=>{
let messages = [] if (name1.value == =''|| name1.value == null) {
messages.push('Name is required')
}
if (mail.value == =''|| mail.value == null) {
messages.push('Mail is required')
}
if (para.value == =''|| para.value == null) {
messages.push('Message is required')
}
if (messages.length > 0) {
e.preventDefault() errorElement.innerText = messages.join(', ')
}
})

Please use an id for your <form> element, because class="form" is repeated for both, the <form> tag and the <div> tag wrapping the <form>.
I've cleaned up your code, so try the following:
const form = document.getElementById('form');
const fname = document.getElementById('fname');
const lname = document.getElementById('lname');
const mail = document.getElementById('mail');
const message = document.getElementById('message');
const errorElement = document.getElementById('error');
form.addEventListener('submit', (e) => {
let messages = [];
if (fname.value === '' || fname.value == null) {
messages.push('Name is required');
}
if (mail.value === '' || mail.value === null) {
messages.push('Mail is required');
}
if (message.value === '' || message.value === null) {
messages.push('Message is required');
}
if (messages.length > 0) {
e.preventDefault();
errorElement.innerText = messages.join(', ');
}
})
<div id="error"></div>
<div class="con2">
<form id="form" name="myform" method="GET">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" class="name1">
<label for="lname" class="n">Last name:</label>
<input type="text" id="lname" name="lname" class="name2"><br>
<label for="email">Email:</label><br>
<input type="text" id="mail" name="email" class="mail"><br>
<label for="comment">Message or Comment:</label><br>
<textarea name="comment" rows="10" cols="30" id="message"></textarea><br>
<button type="submit">Submit</button>
</form>
</div>

If statement that if two values from input match do something

I want to make a Log in form in which user have to enter password "pass" and confirm that password "pass2" and if passwords don't match it should give an alert "pass don't match" and if they match it should alert "pass match", i wrote this but it doesn't work:
<form class="forma">
<p>Registruj se</p>
<hr>
<p id="tekst">Napravi svoj nalog. Besplatno je i traje samo minut.</p><br>
<input id="ime" type="text" name="ime" value="Ime:" onfocus="this.value=''">
<input id="prezime" type="text" name="prezime" value="Prezime:" onfocus="this.value=''"><br><br>
<input id="email" type="text" name="email" value="Email:" onfocus="this.value=''"><br><br>
<input id="pass" type="text" name="pass" value="Šifra:" onfocus="this.value=''"><br><br>
<input id="pass2" type="text" name="pass2" value="Potvrdi šifru:" onfocus="this.value=''"><br><br>
<input id="dugme" type="button" name="registruj" value="Registruj se">
</form>
<script>
let pass = document.querySelector("#pass input").value;
let pass2 = document.querySelector("#pass2 input").value;
let dugme = document.querySelector("#dugme");
let forma = document.querySelector(".forma");
dugme.addEventListener("click", function() {
if (pass === pass2) {
alert("pass match");
} else {
alert("pass don't match");
}
})
</script>

First, you just need to select id, input here is redundant
document.querySelector("#pass")
Moreover, you must move 2 pass getter in the click event handler, to make sure it's always get the latest passwords to match
let dugme = document.querySelector("#dugme");
let forma = document.querySelector(".forma");
dugme.addEventListener("click", function() {
let pass = document.querySelector("#pass").value;
let pass2 = document.querySelector("#pass2").value;
if (pass === pass2) {
alert("pass match");
} else {
alert("pass don't match");
}
})
<form class="forma">
<p>Registruj se</p>
<hr>
<p id="tekst">Napravi svoj nalog. Besplatno je i traje samo minut.</p><br>
<input id="ime" type="text" name="ime" value="Ime:" onfocus="this.value=''">
<input id="prezime" type="text" name="prezime" value="Prezime:" onfocus="this.value=''"><br><br>
<input id="email" type="text" name="email" value="Email:" onfocus="this.value=''"><br><br>
<input id="pass" type="text" name="pass" value="Šifra:" onfocus="this.value=''"><br><br>
<input id="pass2" type="text" name="pass2" value="Potvrdi šifru:" onfocus="this.value=''"><br><br>
<input id="dugme" type="button" name="registruj" value="Registruj se">
</form>

You have to move the statements to get values into the event listener so that you can get the latest values on the button click.
And the query selector is not correct:
dugme.addEventListener("click", function(){
let pass = document.querySelector("input#pass").value;
let pass2 = document.querySelector("input#pass2").value;
if (pass === pass2) {
alert("pass match");
} else {
alert("pass don't match");
}
});

Problem is you are using the value key default way
<form class="forma">
<p>Registruj se</p>
<hr>
<p id="tekst">Napravi svoj nalog. Besplatno je i traje samo minut.</p>
<br>
<input id="ime" type="text" name="ime" value="Ime:" onfocus="this.value=''">
<input id="prezime" type="text" name="prezime" value="Prezime:" onfocus="this.value=''"><br><br>
<input id="email" type="text" name="email" value="Email:" onfocus="this.value=''"><br><br>
<input id="pass" type="text" name="pass" placeholder="Šifra:" onfocus="this.value=''"><br><br>
<input id="pass2" type="text" name="pass2" placeholder="Potvrdi šifru:" onfocus="this.value=''"><br><br>
<input id="dugme" type="button" name="registruj" value="Registruj se">
</form>
<script>
let dugme = document.querySelector("#dugme");
let forma = document.querySelector(".forma");
dugme.addEventListener("click", function() {
let pass = document.querySelector("#pass").value;
let pass2 = document.querySelector("#pass2").value;
if (pass === pass2) {
alert("pass match");
} else {
alert("pass don't match");
}
})
</script>

html form validation using javascript

i am trying to validate my html form using javascript. the validation works but it still submits.
ie. when clicking submit a text will appear saying "first name is required" but then still submits.
here is the javascript code:
function validateForm(form) {
formValid = true;
for(i = 0; i < form.length; i++) {
if(!requiredInput(form[i]))
formValid = false;
}
return formValid;
}
function requiredInput(element) {
if(!element.value.length) {
document.getElementById(element.id + 'Error').style.display = "inline-block";
return false;
} else {
document.getElementById(element.id + 'Error').style.display = "none";
return true;
}
return;
}
and here is the html code for the form:
<form action="http://tl28dfdsdsserv.westernsydney.edu.au/twainfo/echo.php" method="get" onsubmit="return validateForm(this);">
<h2>Validate you name:</h2>
<div>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" placeholder="Given Name" onblur="requiredInput(this);">
<span class="error" id="fnameError">First Name is Required</span>
</div>
<div>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" placeholder="Surname" onblur="requiredInput(this);">
<span class="error" id="lnameError">Last Name is Required</span>
</div>
<div>
<hr>
</div>
<div>
<input type="submit" value="Submit" name="submit" >
</div>
</form>
im not sure why it still submits.
EDIT: i need to debug this code and not change all of it
EDIT: i can not change the html code for this, i am to debug the javascript only

I think you need validate if its type submit :
function validateForm(form) {
formValid = true;
for(i = 0; i < form.length; i++) {
if(form[i].type != "submit"){
if(!requiredInput(form[i])){
formValid = false;
}
}
}
return formValid;
}

Your validation has the correct structure, however, if there is any JavaScript error, the "return false" will not cancel the form submission.
Go to your developer console and manually invoke the validateForm function. You can give the form an ID:
<form id="myform"...
Then, you can reference this in the console:
validateForm(document.getElementById('form'));
You will see a JavaScript error. Fix the error and your form will be intercepted.

<form action="http://tl28dfdsdsserv.westernsydney.edu.au/twainfo/echo.php" method="get"
onsubmit="return validateForm(event)">
<h2>Validate you name:</h2>
<div>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" placeholder="Given Name" onblur="requiredInput(this);">
<span class="error" id="fnameError">First Name is Required</span>
</div>
<div>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" placeholder="Surname" onblur="requiredInput(this);">
<span class="error" id="lnameError">Last Name is Required</span>
</div>
<div>
<hr>
</div>
<div>
<input type="submit" value="Submit" name="submit">
</div>
<script type="text/javascript">
function validateForm(e) {
form = e.target;
formValid = true;
for (i = 0; i < form.length; i++) {
if (!requiredInput(form[i]))
formValid = false;
}
return formValid;
}
function requiredInput(element) {
if (element.type == 'submit') {
return true;
}
if (element.value.length == 0) {
document.getElementById(element.id + 'Error').style.display = "inline-block";
return false;
} else {
document.getElementById(element.id + 'Error').style.display = "none";
return true;
}
}
this should work

Actually You can do it simple way, see below,
Modify your HTML
I remove onsubmit attribute and add form to ID
<form id="dsds" action="http://tl28dfdsdsserv.westernsydney.edu.au/twainfo/echo.php" method="get">
<h2>Validate you name:</h2>
<div>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" placeholder="Given Name" onblur="requiredInput(this);">
<span class="error" id="fnameError">First Name is Required</span>
</div>
<div>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" placeholder="Surname" onblur="requiredInput(this);">
<span class="error" id="lnameError">Last Name is Required</span>
</div>
<div>
<hr>
</div>
<div>
<input type="submit" value="Submit" name="submit" >
</div>
Remove your JS function and do like this,
$("#dsds").submit(function(e){
//call your functions here
return false; // return true if you want to submit the form
});
See the example,
JSFille

Use preventDefault() to disable the submit.
function validateForm(event, form) {
formValid = true;
for (i = 0; i < form.length; i++) {
if (!requiredInput(form[i])) {
formValid = false;
break;
}
}
if (!formValid) {
event.preventDefault();
}
return formValid;
}
And pass the event object in the onsubmit function like below.
<form action="http://tl28dfdsdsserv.westernsydney.edu.au/twainfo/echo.php" method="get" onsubmit="validateForm(event, this);">

function validateForm(form) {
formValid = true;
try {
for (i = 0; i < form.length; i++) {
if (!requiredInput(form[i]))
formValid = false;
}
} catch (error) {
console.error("validateForm=>", error)
}
return formValid;
}
function requiredInput(element) {
try {
const elementInputError = document.getElementById(element.id + 'Error');
if (!element.value.length) {
elementInputError && setDisplayError(elementInputError,"inline-block");
return false;
} else {
elementInputError && setDisplayError(elementInputError,"none");
return true;
}
} catch (error) {
console.error("requiredInput=>", error)
return false;
}
}
function setDisplayError(element,value) {
try {
element.style.display =value;
} catch (error) {
console.error("setDisplayError=>", error)
}
}
<form action="http://tl28dfdsdsserv.westernsydney.edu.au/twainfo/echo.php" method="get"
onsubmit="return validateForm(this);">
<h2>Validate you name:</h2>
<div>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" placeholder="Given Name" onblur="requiredInput(this);">
<span class="error" id="fnameError">First Name is Required</span>
</div>
<div>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" placeholder="Surname" onblur="requiredInput(this);">
<span class="error" id="lnameError">Last Name is Required</span>
</div>
<div>
<hr>
</div>
<div>
<input type="submit" value="Submit" name="submit">
</div>
</form>
The problem arose because it also validated the send button and because it did not have the termination of the failed id it could not find the item and an error occurred. Then when the error occurred it did not return anything the function and redirect you to the form action page.

Validation fails when multiple <form> tags are present in the same HTML document

I have multiple form tags in my html doc and want to validate them. However the validation function won't give any result. Tried
adding name field to the <form> the validation() does not return any result.
When I use validation with only one <form> the result is correct.
here are the two form tags:
<div id="pinfo">
<form>
<fieldset>
<legend>Personal Information</legend>
Name:
<input type="text" name="name" value="Enter name">
<br><br>
Email:
<input type="email" name="eamil" value="Enter email id">
<br><br>
Confirm email id:
<input type="text" name="cemail" value="">
<br><br>
Password:
<input type="password" name="pass" value="">
<br><br>
Confirm password:
<input type="password" name="cpass" value="">
<br><br>
</fieldset>
</form>
</div>
<div id="linfo">
<form>
<fieldset>
<legend>Location and Contact</legend>
Location:
State:
<!more code ahead>
<script>
function validateForm() {
var eid = document.forms["loginform"]["emailid"].value;
if (eid == null || eid == "") {
alert("Email id must be entered.");
return false;
}
var pwd = document.forms["loginform"]["password"].value;
if (pwd == null || pwd == ""){
alert("Please enter the password.");
return false;
}
var p = document.forms["locinfo"]["pno"].value;
if (p == null || p=="") {
alert("Please enter the phone no.");
return false;
}
</script>

Validating Form Fields Using JavaScript in FrontPage

There are some mistakes in your code.
You have not given form name as "loginform" which you are using in validation function.
And second thing you missed is "onsubmit" attribute on form element
Here is working code for you
function validateForm() {
console.log(document.forms["loginform"])
var eid = document.forms["loginform"]["eamil"].value;
if (eid == null || eid == "") {
alert("Email id must be entered.");
return false;
}
var pwd = document.forms["loginform"]["pass"].value;
if (pwd == null || pwd == "") {
alert("Please enter the password.");
return false;
}
/*var p = document.forms["locinfo"]["pno"].value;
if (p == null || p == "") {
alert("Please enter the phone no.");
return false;
}*/
}
<div id="pinfo">
<form method="post" name="loginform" action="/" onsubmit="return validateForm()">
<fieldset>
<legend>Personal Information</legend>
Name:
<input type="text" name="name" value="">
<br><br>
Email:
<input type="email" name="eamil" value="">
<br><br>
Confirm email id:
<input type="text" name="cemail" value="">
<br><br>
Password:
<input type="password" name="pass" value="">
<br><br>
Confirm password:
<input type="password" name="cpass" value="">
<br><br>
<input type="submit" name="submit" />
</fieldset>
</form>
</div>

javascript validation - Javascript not running

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