Problem in Form based authentication

I tried the example which is given in the HFSJ but it didn't work.

I got "Http status 400-Invalid direct reference to form login page"
descriptin says that "the request sent by client is syntactically incorrect"

Here is my jsp pages

index.jsp
<html>
<head>
<title>Index</title>
</head>
<body>
<h1>
<pre>
<form action="j_security_check" method="post">
Click Here to Proceed

Name:<input type="text" name="j_username"/>

Password:<input type="password" name="j_password"/>

<input type="submit" value="Submit"/>
</pre>
</form>
</pre>
</h1>
</body>
</html>

MyJSP.jsp

<html>
<head>
<title>MyJSP</title>
</head>
<body>
<h1>This is MyJSP.jsp<br>

</h1>
</body>
</html>

error.jsp

<html>
<head>
<title>Index</title>
</head>
<body>
<h1>
Invalid user name or password<br></h1>
<h2>
<a href="index.jsp">Click here to try again.....</a>
</h2>
</body>
</html>

DD

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
version="2.4">
<servlet>
<servlet-name>Dilshan</servlet-name>
<jsp-file>/MyJSP.jsp</jsp-file>
</servlet>

<servlet-mapping>
<servlet-name>Dilshan</servlet-name>
<url-pattern>/dilshan.dil</url-pattern>
</servlet-mapping>

<security-role>
<role-name>admin</role-name>
</security-role>

<security-role>
<role-name>manager</role-name>
</security-role>

<security-role>
<role-name>role1</role-name>
</security-role>

<security-role>
<role-name>tomcat</role-name>
</security-role>

<login-config>
<auth-method>FORM</auth-method>
<form-login-config>
<form-login-page>/index.jsp</form-login-page>
<form-error-page>/error.jsp</form-error-page>
</form-login-config>
</login-config>

<security-constraint>
<web-resource-collection>
<web-resource-name>UpdateRecipe</web-resource-name>
<url-pattern>/dilshan.dil</url-pattern>
<http-method>POST</http-method>
</web-resource-collection>
<auth-constraint>
<role-name>admin</role-name>
<role-name>manager</role-name>
<role-name>role1</role-name>
<role-name>tomcat</role-name>
</auth-constraint>

</security-constraint>

</web-app>

Can somebody help me to solve the problem?
And also I'm not clear about how to implement CLIENT-CERT

Did you access index.jsp straight from the web browser, typing the url ?
I don't think that you should do that. The container will display it when you try to access protected content.

I deployed the application using Tomcat. By clicking tomcat manager I locate my application and access the application. Then I can see the index.jsp page. When I was using a wrong username or password I got the "error.jsp" but when I was using the correct one it ends up giving the above error.