javascript validation in JSP
Question
this is my jsp code. I want to submit the form to the server only after the client-side validation. The form goes to the action-specified page on submit, however, it should validate() it first. I can't see what I'm doing wrong.
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/eoms.css" >
<title>Registration</title>
<script>
function validate()
{
var id = document.forms["RegForm"]["sID"];
var name = document.forms["RegForm"]["name"];
var des = document.forms["RegForm"]["des"];
var dept = document.forms["RegForm"]["depi"];
var pass = document.forms["RegForm"]["epw"];
var password = document.forms["RegForm"]["empw"];
if (id.value === "")
{
window.alert("Please enter your ID.");
id.focus();
return false;
}
if (name.value === "")
{
window.alert("Please enter your name");
name.focus();
return false;
}
if (des.value === "")
{
window.alert("Please enter your designation");
des.focus();
return false;
}
if (dept.value === "")
{
window.alert("Please enter your department.");
phone.focus();
return false;
}
if (pass.value !== password.value)
{
window.alert("Passwords must match.");
password.focus();
return false;
}
if (pass.value === "")
{
alert("Please enter your password.");
pass.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<div id="header">
<h3>
Employee<br>
Order<br>
Management<br>
System
</h3>
</div>
<div id="form" style="width: 30%; display: block; margin-left: 35%; margin-right: 35%; " >
<div style="text-align: center; background-color: #1E88E5; color: #BBDEFB; padding: 8px;">
Are you an employee?<br>
Register Here<br>
</div>
<div id="space">
<p>*All fields are required</p>
<%
try{
String regerror = session.getAttribute("regerror").toString();
out.println(regerror);
session.removeAttribute("regerror");
}
catch(Exception e){
}
%>
</div>
<br>
<table id="reg">
<form name="RegForm" action="addEmp.jsp" onsubmit="return validate()" method="post">
<tr>
<td>
Employee ID:
</td>
<td><input type="text" placeholder="Enter your ID" name="eID"></td>
</tr>
<tr>
<td>Employee Name:</td>
<td><input type="text" placeholder="Enter your Name" name="name"></td>
</tr>
<tr>
<td>
Designation
</td>
<td><input type="text" placeholder="Enter your designation" name="des"></td>
</tr>
<tr>
<td>
Department:
</td>
<td><input type="text" placeholder="Enter your department" name="dept"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" placeholder="Enter your password" name="epw"></td>
</tr>
<tr>
<td>Retype Password:</td>
<td><input type="password" placeholder="Re-type your password" name="empw"></td>
</tr>
<tr>
<td colspan="2" style="text-align:center;"><input type="submit" name="submit" value="Register"></td>
</tr>
</form>
<tr>
<td colspan="2" style="text-align:center;">Already a member? <a style="color: #424242;" href="login.jsp">Login</a></td>
</tr>
</table>
</div>
</body>
</html>
Sorry for the wrong indentation. Thanks...
2 answers
solution1
0 ACCPTED 2020-03-29 12:35:27
Your js code goes to your function but didn't show any error because there are some field in your js code which you have miss-spell ie : There was no input with name sID it is eID ,Also for depi it should be dept .Working code :
function validate() { var id = document.forms["RegForm"]["eID"]; var name = document.forms["RegForm"]["name"]; var des = document.forms["RegForm"]["des"]; var dept = document.forms["RegForm"]["dept"]; var pass = document.forms["RegForm"]["epw"]; var password = document.forms["RegForm"]["empw"]; if (id.value === "") { window.alert("Please enter your ID."); id.focus(); return false; } if (name.value === "") { window.alert("Please enter your name"); name.focus(); return false; } if (des.value === "") { window.alert("Please enter your designation"); des.focus(); return false; } if (dept.value === "") { window.alert("Please enter your department."); dept.focus(); return false; } if (pass.value !== password.value) { window.alert("Passwords must match."); password.focus(); return false; } if (pass.value === "") { alert("Please enter your password."); pass.focus(); return false; } return true; }
<div style="text-align: center; background-color: #1E88E5; color: #BBDEFB; padding: 8px;"> Are you an employee?<br> Register Here<br> </div> <div id="space"> <p>*All fields are required</p> </div> <br> <table id="reg"> <form name="RegForm" action="addEmp.jsp" onsubmit="return validate()" method="post"> <tr> <td> Employee ID: </td> <td><input type="text" placeholder="Enter your ID" name="eID"></td> </tr> <tr> <td>Employee Name:</td> <td><input type="text" placeholder="Enter your Name" name="name"></td> </tr> <tr> <td> Designation </td> <td><input type="text" placeholder="Enter your designation" name="des"></td> </tr> <tr> <td> Department: </td> <td><input type="text" placeholder="Enter your department" name="dept"></td> </tr> <tr> <td>Password:</td> <td><input type="password" placeholder="Enter your password" name="epw"></td> </tr> <tr> <td>Retype Password:</td> <td><input type="password" placeholder="Re-type your password" name="empw"></td> </tr> <tr> <td colspan="2" style="text-align:center;"><input type="submit" name="submit" value="Register"></td> </tr> </form> <tr> <td colspan="2" style="text-align:center;">Already a member? <a style="color: #424242;" href="login.jsp">Login</a></td> </tr> </table>
solution2
0 2020-03-30 08:38:23
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/eoms.css" >
<title>Registration</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function (){
$("form").submit(function (){
var id = $("#eid").val();
var employname = $("#ename").val();
var designation = $("#desi").val();
var department = $("#dep").val();
var password = $("#password").val();
var passmact = $("#passm").val();
if(id===''){
alert("Please enter id");
id.focus();
return false;
}
if(employname ===''){
alert("Please enter employname");
return false;
}
if(designation===''){
alert("Please enter desinatin");
return false;
}
if(department ===''){
alert("Please enter despa");
return false;
}
if(password===''){
alert("Please enter pass");
return false;
}
if(password!==passmact){
alert("Password not match");
return false;
}
return true;
});
});
</script>
</head>
<body>
<div id="header">
<h3>
Employee<br>
Order<br>
Management<br>
System
</h3>
</div>
<div id="form" style="width: 30%; display: block; margin-left: 35%; margin-right:
35%; " >
<div style="text-align: center; background-color: #1E88E5; color: #BBDEFB;
padding: 8px;">
Are you an employee?<br>
Register Here<br>
</div>
<div id="space">
<p>*All fields are required</p>
<%
try{
String regerror =
session.getAttribute("regerror").toString();
out.println(regerror);
session.removeAttribute("regerror");
}
catch(Exception e){
}
%>
</div>
<br>
<!-- <p id="error"></p>-->
<table id="reg">
<form name="RegForm" action="addEmp.jsp" method="post">
<tr>
<td>
Employee ID:
</td>
<td><input type="text" id="eid" placeholder="Enter your ID"
name="eID"></td>
<p id="errorid"></p>
</tr>
<tr>
<td>Employee Name:</td>
<td><input type="text" id="ename" placeholder="Enter your Name"
name="name"></td>
<p id="erroremploy"></p>
</tr>
<tr>
<td>
Designation
</td>
<td><input type="text" id="desi" placeholder="Enter your
designation" name="des"></td>
<p id="errordes"></p>
</tr>
<tr>
<td>
Department:
</td>
<td><input type="text" id="dep" placeholder="Enter your
department" name="dept"></td>
<p id="errordep"></p>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="password" placeholder="Enter your
password" name="epw"></td>
<p id="errorpass"></p>
</tr>
<tr>
<td>Retype Password:</td>
<td><input type="password" id="passm" placeholder="Re-type your
password" name="empw"></td>
<p id="errorpmatch"></p>
</tr>
<tr>
<td colspan="2" style="text-align:center;"><input id="btns"
type="submit" name="submit" value="Register"></td>
</tr>
</form>
<tr>
<td colspan="2" style="text-
align:center;">Already a member? <a style="color: #424242;" href="login.jsp">Login</a>
</td>
</tr>
</table>
</div>
</body>
</html>
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.
Related Question
Validation in jsp using javascript
JSP - Javascript form validation with jsp pages
MyEclipse disable javascript validation in JSP
Form validation in JSP using JavaScript
how to add javascript validation in jsp
Form validation in jsp page using JavaScript
JSP Javascript validation function and reset function not working
Inline javascript validation does not work for jsp files
regestration form validation in jsp using javascript & (span)
jsp two buttons in a form and javascript form validation
Related Tags