Javascript being ignored in my jsp file implemented in spring mvc
Question
I'm having a login page in a jsp file, which also utilizes jstl, and a simple javascript validation to check whether its fields are empty or not.
On clicking the 'Login' button, its supposed to be checking if the fields are full and then, if true, pass the form details to the Dispatcher Servelet and do the rest of the process.
But on clicking the submit button, the javascript is totally ignored and so if a blank field is there, an exception occurs. Why is this happening?
This is the code I've used:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iLitmus Portal</title>
<link href="<c:url value="resources/css/login.css" />" rel="stylesheet" type="text/css" />
<link href="<c:url value="resources/css/common.css" />" rel="stylesheet" type="text/css" />
<link href="<c:url value="http://fonts.googleapis.com/css?family=Amaranth" />" rel="stylesheet" type="text/css" />
<link href="<c:url value="http://fonts.googleapis.com/css?family=Convergence" />" rel="stylesheet" type="text/css" />
<%@ include file="header.jsp" %>
</head>
<body >
<div id="portal_banner" align="center">
<img src="resources/images/logo-main.png" id="logo">
<p>Litmus iPortal</p>
</div>
<div id="loginbox">
<div align="center">
<h3 id="chngpass_title">Login</h3>
<form:form name="frm" method="post" action="login" onsubmit="return validateForm()" commandName="login">
<form:input type="text" path="emp_id" name="username" placeholder="Employee-ID"/><br>
<form:input type="password" path="password" name="pwd" placeholder="Password"/>
<br>
<input type="submit" value="Login">
<br>
<b> ${error} </b>
<p id="firstuser">If you are a first time user, please login with the predefined password. You will be directed to change your password and set up
a security question and answer.</p>
</form:form>
</div>
</div>
<script>
function validateForm()
{
if(document.frm.username.value==""&&document.frm.pwd.value!="")
{
alert("User Name should not be left blank");
return false;
}
else if(document.frm.pwd.value==""&&document.frm.username.value!="")
{
alert("Password should not be left blank");
return false;
}
else if(document.frm.pwd.value==""&&document.frm.username.value==""){
alert("Username and Password cannot be empty!");
return false;
}
return true;
}
</script>
</body>
</html>
I tried this initially by placing the javascript code in an external .js file and that did not work so I tried putting it in the jsp page to check if that would work. I had also tried out a jquery based validation similar to this logic but that also didn't work.
Im doing this in Eclipse Juno with Tomcat server.
Any help would be much appreciated!
1 answers
solution1
2 ACCPTED 2014-09-24 12:43:00
I tried your code without using the jsp <form> tag and it's working fine in this FIDDLE .
Also in order to bind the form to your form bean, you have to use the same name and id attributes for input fields like this,
<input type="text" name="username" id="username" placeholder="Employee-ID"/>
<input type="password" name="pwd" id="pwd" placeholder="Password"/>
Also, using the path and name attributes together while using jsp tags is not a good practice. Put the javascript code in the fiddle in the <head> tag.
UPDATE
Please use the same name which you used for path attribute and the field name in your Servlet class. For instance, if you are giving the path attribute as emp_id then use the same name in your Servlet. Same for other fields too.
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.