currently, im working on a form validation project with with four fields. Im using regular expressions in order to validate the input but looks like something is wrong because every time that I hit the submit button the form dosent validate the data that is just entered.
Can anyone Help me out?
Heres my html & javascript code.
function validate () {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const phone = document.getElementById('phone').value;
const regEmail = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const regpass = /^(?=.*\s)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{10,16}$/;
const regphone =/^ (0|\+98)?([ ]|-|[()]){0,2}9[1|2|3|4]([ ]|-|[()]){0,2}(?:[0-9]([ ]|-|[()]){0,2}){8}/;
const resultemail = regEmail.test('email');
const resultpass = regpass.test('password');
const resultphone = regphone.test('phone');
//conditions
if(resultemail == false || resultemail == "") {
document.getElementsByClassName('erroremail').innerHtml = "لطفا ایمیل را با فرمت صحیح وارد کنید";
return false;
} else {
document.getElementsByClassName('validemail').innerHtml= "ایمیل صحیح است";
}
if(resultpass == false || resultpass == "") {
document.getElementsByClassName('errorpass').innerHtml = "لطفا پسورد را با فرمت صحیح وارد کنید";
return false;
} else {
document.getElementsByClassName('erroremail').innerHtml = "پسورد صحیح است";
}
if(resultphone == false || resultphone == "") {
document.getElementsByClassName('errorphone').innerHtml = "شماره تلفن اجباری است";
return false;
} else {
document.getElementsByClassName('validphone').innerHtml = "شماره تلفن صحیح است";
}
return true;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<form action="submit" method="get" onclick="validate()">
<div>
<div><label for="name">Name:</label></div>
<input type="text" id="name" placeholder="Enter your name here...">
<small class="errorname" style="color:red;"></small>
<small class="validname" style="color: green;" ></small>
</div>
<div>
<div><label for="email">email:</label></div>
<input type="text" id="email" placeholder="Enter your email here..." >
<small class="erroremail" style="color:red;"></small>
<small class="validemail" style="color: green;" ></small>
</div>
<div>
<div><label for="password">password:</label></div>
<input type="text" id="password" placeholder="Enter your password here..." >
<small class="errorpass" style="color:red;" ></small>
<small class="validpass" style="color: green;" ></small>
</div>
<div>
<div><label for="phone">Phone number:</label></div>
<input type="text" id="phone" placeholder="Enter your phone number here..." >
<small class="errorphone" style="color:red;" ></small>
<small class="validphone" style="color: green;"></small>
</div>
<div>
<input type="submit" value="submit" >
</div>
</form>
<script src="./main.js" ></script>
</body>
</html>
getElementsByClassName has no definition for innerHTML because getElementsByClassName returns a NodeList object not an element. A NodeList is essentially a collection of elements.
Try it with getElementById as it works perfectly with your code. Also don't forget to set id for small tags.
Example would be :
if (resultemail == false || resultemail == "") {
document.getElementById("erroremail").innerHTML = "test email";
return false;
}
Or if you need to set it under class , You can set it by using the following code.
if (resultemail == false || resultemail == "") {
document.getElementsByClassName("erroremail")[0].innerHTML =
"لطفا ایمیل را با فرمت صحیح وارد کنید";
return false;
}
Related
The Login will only be correct after a successful input of any of the password tokens. And Limit the available tries to only 3. Is there any way to make the generated passwords only be the ones the system acknowledges? And if the user has entered a token successfully an alert would show up saying so. The part I'm having a hard time with is making any of the 3 generated tokens only the acceptable password for the login. Thank you in advance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Random Password Generator</title>
</head>
<body>
<div class="body">
<div class="box">
<h2>Random Password Generator</h2>
<input type="text" placeholder="Create password" id="password" readonly />
<input type="text" placeholder="Create password" id="passwords" readonly />
<input type="text" placeholder="Create password" id="passwordss" readonly />
<div class="actions">
<button id="generate-button">Generate</button>
</div>
</div>
</div>
<div class="body">
<div class="box">
<h3>Login</h3>
<input type="text" placeholder="Enter Password" id="passcode"/>
<div class="actions">
<button id="enter-button">Enter</button>
</body>
<script>
const CHARS =
"0123456789abcdefghijklmnopqrstuvwxyz!##$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const randomCharacter = (chars) => () =>
chars[Math.floor(Math.random() * chars.length)];
const generatePassword = (chars) =>
(length) => () => [...Array(length)].map(randomCharacter(chars)).join("");
const passwords= document.querySelector("#passwords");
const passwordss = document.querySelector("#passwordss");
const passwordInput = document.querySelector("#password");
const generatePasswordChars = generatePassword(CHARS);
const generatePasswordChars12 = generatePasswordChars(12);
document.querySelector("#generate-button").addEventListener("click", () => {
passwordInput.value = generatePasswordChars12(); passwords.value = generatePasswordChars12(); passwordss.value = generatePasswordChars12();
});
</script>
<script>
function Pass(params) {
var pass= document.getElementById("passcode")
var enter= document.getElementById("enter-button")
var password = "wordpass";
var response;
var entryCount = 0;
var entryLimit = 3;
var error = false;
button.addEventListener("click", function Pass(params){
while(textbox.value != password && !error){
if(entryCount < entryLimit){
answer.innerHTML = "Wrong Password";
entryCount++;
textbox.value = "";
} else{
error = true;
}
}
if(error){
answer.innerHTML = "Out of entries";
} else{
answer.innerHTML = "Correct Password";
}
});
}
</script>
</html>
i am trying to redirect to another html page using
window.confirm('Login was successful')
{
window.location.href="logintest.html";
};
but it is not working. this is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Instructor Login Form</title>
<script>
function validate() {
var un = document.getElementById("username").value;
var pw = document.getElementById("password").value;
var valid = false;
var unArray = ["admin", "David", "Paul"];
var pwArray = ["123456789", "111", "911"];
for (var i = 0; i < unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}
if (valid) {
window.confirm('Login was successful')
{
window.location.href="logintest.html";
};
return false;
}
if (!valid) {
window.confirm('Login failed')
{
window.location.href="test.html";
};
return false;
}
}
</script>
</head>
<body>
<form action = "{{ request.path }}" method = "POST" >
<div class="p1">
<p> Saudi Electronic University</p> </div>
<div class="container1">
<h1>Instructor Login </h1>
<input type="text" placeholder="Enter Username" name="username" id="username" >
<br>
<input type="password" placeholder="Enter Password" name="password" id="password">
<br>
<button class="button" id="submit" onclick="validate()" >Submit</button>
</div>
</form>
</body>
</html>
this is the function, maybe i need to have some validation here but i don't know:
#app.route('/test', methods=['GET', 'POST'])
def test():
return render_template("test.html")
There are some bracket issue in your code.
Try this:
if (valid) {
window.alert('Login was successful');
window.location.href="logintest.html";
}
else
{
window.alert('Login failed');
window.location.href="test.html";
}
return false;
Here is the complete solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Instructor Login Form</title>
</head>
<body>
<form id='form'>
<div class="p1"><p> Saudi Electronic University</p> </div>
<div class="container1">
<h1>Instructor Login </h1>
<input type="text" placeholder="Enter Username" name="username" id="username" >
<br>
<input type="password" placeholder="Enter Password" name="password" id="password">
<br>
<button type='submit'>Submit</button>
</div>
</form>
<script>
function validate(event) {
var un = document.getElementById("username").value;
var pw = document.getElementById("password").value;
var valid = false;
var unArray = ["admin", "David", "Paul"];
var pwArray = ["123456789", "111", "911"];
for (var i = 0; i < unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
return true;
}
}
return false;
}
const form = document.getElementById('form');
form.addEventListener('submit', event => {
event.preventDefault();
if( validate() ) {
window.location.href = 'https://www.google.com';
} else {
alert('Bad credentials');
}
});
</script>
</body>
</html>
Try something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Instructor Login Form</title>
<script>
function validate() {
console.log("Validate clicked")
var un = document.getElementById("username").value;
var pw = document.getElementById("password").value;
var valid = false;
var unArray = ["admin", "David", "Paul"];
var pwArray = ["123456789", "111", "911", "admin"];
if (unArray.includes(un) && pwArray.includes(pw)) {
valid = true;
}
console.log(valid)
if (valid) {
if (window.confirm('Login was successful')) {
window.location.href = "logintest.html";
};
return false;
} else {
if (window.confirm('Login failed')) {
window.location.href = "test.html";
};
return false;
}
}
</script>
</head>
<body>
<form action="javascript:void(0)" method="POST">
<div class="p1">
<p> Saudi Electronic University</p>
</div>
<div class="container1">
<h1>Instructor Login </h1>
<input type="text" placeholder="Enter Username" name="username" id="username">
<br>
<input type="password" placeholder="Enter Password" name="password" id="password">
<br>
<button class="button" onclick="validate();">Submit</button>
</div>
</form>
</body>
</html>
You have to test if
window.confirm('Login failed')
was confiremd.
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>
This question already has answers here:
What is the meaning of onsubmit="return false"? (JavaScript, jQuery)
(4 answers)
Closed 5 years ago.
I have this HTML project that validates an empty form. The error is being displayed on the side of the inputs but only flashes for a second. I just want the error of the messages to be displayed once
This is my HTML code with the necessary links:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript - JQuery </title>
<link rel="stylesheet" type="text/css" href="contactform.css">
</head>
<body>
<h1 id="pageheading">Zedland Health Authority</h1>
<h2 class="sectionheading">Contact Form</h2>
<form id="register">
<fieldset id="controls">
<div>
<label class="formlabel" for="fname">First Name: </label>
<input id="fname" type="text" size="30" placeholder="First name"
autofocus>
<p id="fname-error" class="error" style="display:none; color:red;">*
You must enter a first name.</p>
</div>
<div>
<label class="formlabel"for="lname">Last Name: </label>
<input id="lname" type="text" size="30">
<p id="lname-error" class="error" style="display:none; color:red;">*
You must enter a Last name.</p>
</div>
<div>
<label class="formlabel" for="title">Title: </label>
<select id="title">
<option value="Mr">Mr.</option>
<option value="Ms">Ms.</option>
<option value="Mrs">Mrs.</option>
<option value="Miss">Miss.</option>
<option value="Master">Master.</option>
</select>
</div>
<div>
<label class="formlabel" for="heathauthoritynumber"><span>
<img src="tooltip.png" id="qmark" alt="Hint"></span>
Health Authority Number:
</label>
<input id="healthauthoritynumber" type="text" size="10">
<p id="hn-error" class="error" style="display:none; color:red;">*You
must enter a Health Authority Number eg('ZHA345742)</p>
<div class="tooltip" id="ttip">If you do not know your ZHA number
,please contact your GP</div>
</div>
<div>
<label class="formlabel" for="email">Email: </label>
<input id="email" type="text" size="40">
<p id="email-error" class="error" style="display:none; color:red;">You
must enter email</p>
</div>
<div>
<label class="formlabel" for="telephone">Telephone Number: </label>
<input id="telephone" type="text" size="40">
<p id="tele-error" class="error" style="display:none; color:red;">You
must enter a telephone</p>
</div>
<div class="formlabel">
<input id="submit-button" type="submit" value="Submit" >
</div>
</fieldset>
</form>
<script src="contactform.js"></script>
</body>
</html>
This is my Javascript
function onSubmit(){
console.log("ive been submitted");
checkEmpty(document.getElementById('fname'),document.getElementById("fname-error"));
checkEmpty(document.getElementById('lname'),document.getElementById("lname-error"));
checkEmpty(document.getElementById('healthauthoritynumber'),document.getElementById("hn-error"));
checkEmpty(document.getElementById('email'),document.getElementById("email-error"));
checkEmpty(document.getElementById('telephone'),document.getElementById("tele-error"));
//checkValidHealthID(document.getElementById('healthauthoritynumber'),document.getElementById("hn-error"));
}
// Read about regular expressions using: https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions
// and http://stackoverflow.com/questions/25155970/validating-uk-phone-number-regex-c
function checkValidHealthID(inputID, errorID){
var re = new RegExp('/ZHA\d{6}$/');
if((inputID.value)!== re){
errorID.style.display = "inline";
}else
{
errorID.style.display = "none";
}
}
function checkEmpty(inputID, errorID){
//Default behaviour at for FORM is to reload the HTML page
//e.preventDefault();
console.log("checking empty");
if((inputID.value === "") || (inputID.value.length === 0)){
console.log("empty!!");
errorID.style.display = "inline";
}
else
{
errorID.style.display = "none";
}
}
function textHint(txtElem, defaultText) {
txtElem.value = defaultText;
txtElem.style.color = "#A8A8A8";
txtElem.style.fontStyle = "italic";
txtElem.onfocus = function() {
if (this.value === defaultText) {
this.value = "";
this.style.color = "#000";
this.style.fontStyle = "normal";
}
}
txtElem.onblur = function() {
if (this.value === "") {
this.value = defaultText;
this.style.color = "#A8A8A8";
this.style.fontStyle = "italic";
}
}
}
function textHints() {
//textHint(document.getElementById("firstName"), "Enter your first name");
textHint(document.getElementById('lname'), "Enter your last name");
textHint(document.getElementById('healthauthoritynumber'), "for eg
,ZHA346783");
textHint(document.getElementById('email'), "Enter your email");
textHint(document.getElementById('telephone'), "Enter your telephone
number");
}
function switchToolTip() {
document.getElementById('qmark').onmouseover = function() {
var toolTip = document.getElementById('ttip');
toolTip.style.display='block';
}
document.getElementById('qmark').onmouseout = function() {
var toolTip = document.getElementById('ttip');
toolTip.style.display='none';
}
}
//windows.onload=textHints();
//windows.onload=switchToolTip();
//window.onload=init;
document.getElementById("submit-button").onclick = onSubmit;
Your form is getting submitted which results in page reload. That's why you see the message flashing for a while. I saw the commented line in your JavaScript
//Default behaviour at for FORM is to reload the HTML page
//e.preventDefault();
You should get uncomment e.preventDefault().
Grab the click event as function onSubmit(event) and pass the event to checkEmpty.
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 !