Forum:

Required help regarding validating user details using AJAX on a web application

Nilesh Sanyal

Ranch Hand

Posts: 33

I like...

posted 6 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I am trying to create a registration page where username,email,password will be taken from the user

and if user left any field empty on that form then it will display a message stating that field can not be

left empty. I am trying to use AJAX in this web application.

I have added the jar file "org.json-0.0.1.jar" to the classpath of this web application.

The codes of different files are as follows...

register.html
===========
<html>
<head>
<title>Register Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">

var request;
            function sendInfo()
            {
                var username=document.getElementById("name").value;
                var password=document.getElementById("pwd").value;
                var emailAddr=document.getElementById("mail").value;
                var url="validateServlet?name="+username+"&"+"mail="+emailAddr+"&"+"pwd="+password;
                
                if(window.XMLHttpRequest)
                {
                    request=new XMLHttpRequest();
                }
                else if(window.ActiveXObject)
                {
                    request=new ActiveXObject("Microsoft.XMLHTTP");
                }
                
                try
                {
                    request.onreadystatechange=getInfo;
                    request.open("GET",url,true);
                    request.send();
                }
                catch(e)
                {
                    alert("Unable to connect to server!!");
                }
            }
            
            function getInfo()
            {
                if(request.readyState==4)
                {
                    var val=request.responseText;
                    document.getElementById('errors').innerHTML=val;
                }
            }

</script>
</head>
<body>
<form>
<table align="center">
<tr>
<td bgcolor="lightgreen" colspan="3">Fill up the form</td>
</tr>
<tr>
<td>User Name</td>
<td><input type="text" name="uname" id="name" onkeyup="sendInfo()"/></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" id="mail" onkeyup="sendInfo()"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pass" id="pwd" onkeyup="sendInfo()"/></td>
</tr>
<tr>
<td><input type="submit" value="Register"/></td>
</tr>
</table>

</form>

<div id="errors"></div>
</body>
</html>

RegException.java (This file handles the custom exception)
=====================================

validateServlet.java
=================

package com.controller;

import com.custom.exception.RegException;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class validateServlet extends HttpServlet {

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException, RegException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
            //String username = null,password=null,email=null;
            try
            {
                String username=request.getParameter("uname");
                String password=request.getParameter("pass");
                String email=request.getParameter("email");
                if(username.trim().equals("")||username.length()==0)
                {
                    throw new RegException("Username can not be left empty");
                }
                if(password.trim().equals("")||password.length()==0)
                {
                    throw new RegException("Password can not be left empty");
                }
                if(email.trim().equals("")||email.length()==0)
                {
                    throw new RegException("Email can not be left empty");
                }
            }
            catch(NullPointerException e)
            {
                out.println(e.getMessage());
               
            }   
            catch(RegException e)
            {
                out.println(e.getMessage());
            }
    }

@Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        try {
            processRequest(request, response);
        } catch (RegException ex) {
            System.out.println(ex.toString());
        }
    }

@Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        try {
            processRequest(request, response);
        } catch (RegException ex) {
            System.out.println(ex.toString());
        }
    }

@Override
    public String getServletInfo() {
        return "Short description";
    }

}

After running the web application, if anything is typed(including whitespace character) in any one of the

fields, a the page displays a "null" word. Please help.

Tapas Chand

Ranch Hand

Posts: 624

I like...

posted 6 years ago

1
Number of slices to send:

Optional 'thank-you' note:

Send

There are few things to do here.

You are getting the values in servlet with wrong parameters. You are passing "name" from Javascript, but trying to get "uname" in servlet.
So you are getting a NullPointerException, so it is printing null in browser.

Few suggestions:
Empty field validations should be done on form submit, not onkeyup.
Empty field validation on server side is a good practice, but first level validation should be in client side.
Use JQuery for AJAX, it will make your life very simple.

And try to debug by printing values in Java/debugging if you are using Eclipse/other IDE.

Nilesh Sanyal

Ranch Hand

Posts: 33

I like...

posted 6 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thank you very much for your help, it works fine. Now, I am looking forward to working with jquery to use AJAX.

What are your superhero powers? Go ahead and try them on this tiny ad:

free, earth-friendly heat - a kickstarter for putting coin in your pocket while saving the earth

https://coderanch.com/t/751654/free-earth-friendly-heat-kickstarter