Choose Your Language

Wednesday 14 October 2015

registration page in jsp with javascript validation, captcha security, ajax validation

index.jsp

<%@page import="java.util.TimeZone"%>
<%@page import="java.util.Calendar"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page import="nl.captcha.Captcha"%>
<%String id = request.getParameter("id");%>


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>      
        <link href="styles.css" type="text/css" rel="stylesheet" />
        <style>
         #body {
         color: red;
         background-color: white;
        font-family: "Times New Roman", Arial, Helvetica, Geneva, "sans-serif";
        }
        #submit {
        background-color: #ccc;
         -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius:6px;
        color:#fff;
        font-family: 'Oswald';
        font-size: 20px;
        text-decoration: none;
        cursor: poiner;
        border:none;
        }

        #submit:hover {
        border: none;
        color:#fff;
        background:#0033CC;
        box-shadow: 0px 0px 1px #777;
 
        }
        </style>
        <script type="text/javascript">
          function validateForm()
            {
            alertify.alert("Message");
           //alumni name
            var alumniname=document.forms["register"]["alumniname"].value;
            if(alumniname==null || alumniname==""){
            alert("Please Provide Alumni Name");
            document.forms["register"]["alumniname"].focus();
            return false;
            }
         
            //registratio type
            if ( ( register.registratiotype[0].checked == false ) && ( register.registratiotype[1].checked == false ) )
            {
                alert ( "Please choose your Registration Type: Student or Employee" );
                return false;
            }
            //course
             var course=document.forms["register"]["course"].value;
            if(course==null || course==""){
            alert("Please Provide Course Name");
           
            return false;
            }
            //completion year
            var completionyear = document.getElementById("completionyear")
            if(completionyear.value == "-select-")
            {
                alert("Please Select Completion Year");
                return false;
            }
            //designation
            var designation = document.forms["register"]["designation"].value;
            if(designation==null || designation==""){
            alert("Please Provide Designation");
            return false;
            }
            //year of joining
            var yearofjoining = document.getElementById("yearofjoining")
            if(yearofjoining.value == "-select-")
            {
                alert("Please Select Year Of Joining");
                return false;
            }
            //present status
            if ( ( register.presentstatus[0].checked == false ) && ( register.presentstatus[1].checked == false ) &&(register.presentstatus[2].checked==false)&&(register.presentstatus[3].checked==false))
            {
                alert ( "Please choose your Present Status: Working Or Business Or Homemaker Or Student" );
                return false;
            }
            //gender
            if ( ( register.gender[0].checked == false ) && ( register.gender[1].checked == false ))
            {
                alert ( "Please choose your Gender: Male Or Female");
                return false;
            }
            //maritalstatus
            if ( ( register.maritalstatus[0].checked == false ) && ( register.maritalstatus[1].checked == false ))
            {
                alert ( "Please choose your Marital Status: Single Or Married");
                return false;
            }
            //phone1
       
            var phone1 = document.forms["register"]["phone1"].value;
         
         
            if (phone1==null||phone1==""){
                   alert("Please Provide Phone Number1");
                 return false;
            }
            else if(isNaN(phone1)||phone1.indexOf(" ")!=-1)
            {
              alert("Please Provide Numeric Value for Phone Number");
              register.phone1.value="";
              return false;
           
            }
            else if (phone1.length>12)
                {
                alert("enter Phone Number With STD Code");    
                register.phone1.value="";
                return false;
             
                }
       
            //phone2
           var phone2 = document.forms["register"]["phone2"].value;
           if (phone2==null||phone2==""){
                alert("Enter Phone Number2");
                return false;
            }
           else if(isNaN(phone2)||phone2.indexOf(" ")!=-1)
           {
              alert("Please Provide Numeric Value for Phone Number");
              register.phone2.value="";
              return false;
           
           }
           else if (phone2.length>12)
           {
                alert("Please Provide Phone Number With STD Code");    
                register.phone2.value="";
                return false;
             
           }
         
            //mobile
          var mobile = document.forms["register"]["mobile"].value;
           if (mobile==null||mobile==""){
                alert("Please Provide Mobile Number");
                return false;
            }
           else if(isNaN(mobile)||mobile.indexOf(" ")!=-1)
           {
              alert("Please Provide Numeric Value as Mobile Number");
              register.mobile.value="";
              return false;
           
           }
           else if (mobile.length>11)
           {
                alert("Please Provide 10 digit value as Mobile Number");
                register.mobile.value="";
                return false;
             
           }
         
          //email
       
          var email = document.getElementById("email")
          var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

            if (!filter.test(email.value)) {
                alert('Please provide a valid email address');
                email.focus;
                return false;
            }
        //address
        var address=document.forms["register"]["address"].value;
            if(address==null || address==""){
            alert("Please provide your address");
            document.forms["register"]["address"].focus();
            return false;
            }
   
                 
             }
</script>

<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
var mobile=document.getElementById("mobile").value;
var urls="checkexistinguser.jsp?mobile="+mobile;

if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4)
    {
        document.getElementById("err").innerHTML=xmlhttp.responseText;
     }
  }
xmlhttp.open("GET",urls,true);
xmlhttp.send();
}
</script>
    </head>
    <body id="">
    <center>
     
        <form  name="register" action="/Captcha/validatecaptcha.jsp" method="get" onsubmit="return validateForm();">
         <table border="0" cellpadding="10" cellspacing="1" BORDERCOLOR=#0B2161 style="width:80%">
  <tr>
    <td align="left" width="20%">Name of the Alumni:</td>
    <td align="left" width="60%">      
        <input type="text" name="alumniname" id="alumniname" size="45">      
    </td>  
  </tr>
  <tr>
  <td width="20%" align="left" border="0"><Font size="5" color="#8904B1">STUDENT</Font></td>
  <td width="60%">&nbsp;</td>
  </tr>
 
  <tr>
    <td align="left" width="20%">Registration Type:</td>
    <td align="left" width="60%">
    <input type="radio" name="registratiotype" id = "1" value="Student">Student&nbsp;&nbsp;&nbsp;
<input type="radio" name="registratiotype" id = "2" value="Employee">Employee
    </td>  
  </tr>

  <tr>
    <td align="left" width="20%">Course:</td>
    <td align="left" width="60%"><input type="text" name="course" id="course" size="45"></td>  
  </tr>

   <tr>
    <td align="left" width="20%">Year of completion:</td>
    <td align="left" width="60%">  
    <select name="completionyear" id="completionyear" style="width: 80px;">
    <option value="-select-">-select-</option>
<%
Calendar localCalendar = Calendar.getInstance(TimeZone.getDefault());
int currentYear = localCalendar.get(Calendar.YEAR);
for(int i=currentYear;i>1947;i--)
{%>
<option value= "<%= i%>" <%=i%>><%= i%></option>
<%}%>
</select>
    </td>  
  </tr>
  <tr>
  <td width="20%" align="left" border="0"><Font size="5" color="#8904B1">EMPLOYEE</Font></td>
  <td width="60%">&nbsp;</td>
  </tr>
   <tr>
    <td align="left" width="20%">Designation:</td>
    <td align="left" width="60%"><input type="text" name="designation" id="designation" size="45"></td>      
  </tr>

   <tr>
    <td align="left" width="20%">Year of joining: </td>
    <td align="left" width="60%">
    <select name="yearofjoining" id="yearofjoining" style="width: 80px;">
    <option value="-select-">-select-</option>
<%
for(int i=localCalendar.get(Calendar.YEAR);i>1947;i--)
{%>
<option value= "<%= i%>" <%=i%>><%= i%></option>
<%}%>
    </td>  
  </tr>

   <tr>
    <td align="left" width="20%">Present status:</td>
    <td align="left" width="60%">
    <input type="radio" name="presentstatus" id="1" value="Working">Working&nbsp;&nbsp;&nbsp;
<input type="radio" name="presentstatus" id="2" value="Business">Business&nbsp;&nbsp;&nbsp;
<input type="radio" name="presentstatus" id="3" value="Homemaker">Homemaker&nbsp;&nbsp;&nbsp;
<input type="radio" name="presentstatus" id="4" value="Student">Student
    </td>  
  </tr>

  <tr>
    <td align="left" width="20%">Gender:</td>
    <td align="left" width="60%">
    <input type="radio" name="gender" id="1" value="Male">Male&nbsp;&nbsp;&nbsp;
<input type="radio" name="gender" id="2" value="Female">Female
    </td>  
  </tr>

  <tr>
    <td align="left" width="20%">Marital Status:</td>
    <td align="left" width="60%">
    <input type="radio" name="maritalstatus" id="1" value="Single">Single&nbsp;&nbsp;&nbsp;
<input type="radio" name="maritalstatus" id="2" value="Married">Married
    </td>  
  </tr>
  <tr>
  <td width="25%" align="left" border="0"><Font size="5" color="#8904B1">CONTACT INFORMATION</Font></td>
  <td width="55%">&nbsp;</td>
  </tr>
  <tr>
    <td align="left" width="20%">Phone No 1:</td>
    <td align="left" width="60%"><input type="text" name="phone1" id="phone1" size="45"></td>  
  </tr>

  <tr>
    <td align="left" width="20%">Phone No 2:</td>
    <td align="left" width="60%"><input type="text" name="phone2" id="phone2" size="45"></td>  
  </tr>

  <tr>
    <td align="left" width="20%">Mobile:</td>
    <td align="left" width="60%"><input type="text" name="mobile" id="mobile" onkeyup="loadXMLDoc()" size="45">&nbsp;<span id="err"></span></td>  
  </tr>

  <tr>
    <td align="left" width="20%">Email:</td>
    <td align="left" width="60%"><input type="text" name="email" id="email" size="45"></td>  
  </tr>

  <tr>
    <td align="left" width="20%">Address:</td>
    <td align="left" width="60%"><textarea rows="4" cols="47" name="address" id="address"></textarea></td>      
  </tr>

   <tr>
    <td align="left" width="20%"><font color="red">Security code *</font></td>
    <td align="left" width="60%"><img id="captcha" src="<c:url value="simpleCaptcha.jpg"/>" width="150"></td>      
  </tr>
  <tr>
    <td align="left" width="20%">Please enter the Verification Code shown in the image above.</td>
    <td align="left" width="60%"><input type="text" size="17" name="answer" /></td>      
  </tr>
  <tr>
    <td align="left" width="20%">&nbsp;</td>
    <td align="left" width="60%">
     
        <input type="submit" name="submit" value="    Register    " id="submit" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="submit" name="cancel" value="     Cancel     " id="submit" />
    </td>      
  </tr>
 </table>
            <br></br>
     
       </form>
</center>
<input type="text" hidden="" name="yes"  value="<%=id%>"/>
 
 </body>
</html>

validatecaptcha.jsp

<%-- 
    Document   : validatecaptcha
    Created on : Sep 7, 2015, 4:33:35 PM
    Author     : Aravind Sankaran Nair
--%>
<%@page import="com.captcha.bean.RegistrationBean"%>
<%@ page import="nl.captcha.Captcha"%>
<%
Captcha captcha=(Captcha)session.getAttribute(Captcha.NAME);

request.setCharacterEncoding("UTF-8");

String answer = request.getParameter("answer");
                                 
if (captcha.isCorrect(answer)) {
  
    session=request.getSession(true);
    session.setAttribute("", "");
    response.sendRedirect("index.jsp");  
%>

<center><b>Correct Captcha Code !</b> <%

} else {
response.sendRedirect("index.jsp"); 
%> <b>In Correct Captcha Code !</b> <%

}

%>
</center>

checkexistinguser.jsp

<%@ page import="java.io.*,java.sql.*"%>
<%@ page contentType="text/html" pageEncoding="UTF-8"%>

<%
  String mobile=request.getParameter("mobile");
  if(mobile.length()!=0){
  Class.forName("com.mysql.jdbc.Driver");
  Connection con =DriverManager.getConnection("jdbc:mysql://localhost:3306/dbname","dbusername","dbpassword");
  Statement st=con.createStatement();              
  ResultSet rs = st.executeQuery("select * from table where mobile='"+mobile+"'");  // this is for name
  if(rs.next())
    {%>     
<font color=red>Already Registered<input type="hidden" id="actual" name="actual" value="taken"></font>
<% }else {%>
<font color=green size="3"><input type="hidden" id="actual" name="actual"value="available">Not Registered </font>
<% }%>
 <% 
 rs.close();
 st.close();
 con.close();
  }else{ %>
 <font color=red><input type="hidden" id="actual" name="actual" value="taken"> </font>
 <%} %>
  

style.css 

body {

color: red;

background-color: white;

font-family: "Times New Roman", Arial, Helvetica, Geneva, "sans-serif";

}
.btnExample {
  color: #FFF;
  background-color: #900;
  font-weight: bold;
  border: 1px solid #900;
}
.btnExample:hover {
  color: #FFF;
  background: #900;
}
#submit {
    background-color: #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:6px;
    color: #fff;
    font-family: 'Oswald';
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    border:none;
}

No comments:

Post a Comment