Question

180

JSP form validation for numbers, dates and values

rated 0 times [ 186] [ 6] / answers: 1 / hits: 25077 / 13 Years ago, tue, november 8, 2011, 12:00:00

Hello i have a JSP page that contain a form, i want to validate the form data like date of birth format and value, breed id - zoo id that are numbers only and animals name that exist

here is my JSP page:

<%@taglib prefix=c uri=http://java.sun.com/jsp/jstl/core %> 

<%@ page import=java.util.ArrayList %>

<%@page import=content.*%>

<%@ page language=java 

         contentType=text/html; charset=windows-1256

         pageEncoding=windows-1256 %>





<!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN

http://www.w3.org/TR/html4/loose.dtd>

<html>

<head>







<meta http-equiv=Content-Type content=text/html; charset=windows-1256>

<title>Append Animal</title>

<link rel=stylesheet

      href=./css/styles.css

      type=text/css/>

</head>

<body>

<table class=title>

  <tr><th>Zoo keeper</th></tr>

</table>





<h1>Append Animal</h1>



<form name=insert action=Relay >

<fieldset>

Animal new name: <input type= text name = aname><br>

Animal new DOB: <input type= text name = dob><br>





Animal new gender: 

<select name=gender id=gender>

<option value=male>Male</option>

<option value=female>Female</option>

</select>

<br>

Animal status: 

<select name=source id=source>

<option value=born>Born</option>

<option value=bought>Bought</option>

</select>

<br>

Animal old zoo: <input type= text name = zooid > only if bought<br>

Animal new Breed: <input type= text name = breedid ><br>

Animal new remarks: <textarea name = remark rows=4 cols=20>



</textarea> <br /> <br/>





<input type=submit value=submit>



<input type=hidden name=command value=AppendAnimalServlet > 



</fieldset>

</form>

</body></html>

i added this script in JSP page:

<script>

function validateForm()

{

    if(document.insert.aname.value ===)

    {

      alert(Animal should have a name);

      document.insert.aname.focus();

      return false;

    }

    if(document.insert.zooid.value !==)

    {

        if (! (/^d*(?:.d{0,2})?$/.test(document.insert.zooid.value))) { 

            alert(Please enter a valid Zoo id); 

            document.insert.zooid.focus(); 

            return false; 

        } 



      } 

    if(document.insert.breedid.value !==)

    {

        if (! (/^d*(?:.d{0,2})?$/.test(document.insert.breedid.value))) { 

            alert(Please enter a valid Breed id); 

            document.insert.breedid.focus(); 

            return false; 

        } 



      } 

    if(document.insert.dob.value ===)

    {

      alert(Animal should have a date of birth);

      document.insert.aname.focus();

      return false;

    }



}

</script>

but i don't think i'm doing this right any suggestion on how to deal with this ?

and please note that the form values will be transfared to a Relay servlet to handle the insert process

<form name=insert action=Relay onsubmit=return validateForm();>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

desiraeleandrah

Add To Favorites

Follow

Total Points: 202

Total Questions: 111

Total Answers: 115

Location: Macau

Member since Mon, Nov 16, 2020

4 Years ago

answered 13 Years ago anikas · Accepted Answer

A validation library can be built using some generic code like the following (just a quick example, it can be extended greatly):

function validate(form) {

  var fnMap = {



    'validate-dateISO8601': {

      checkFn: isValidISO8601,

      checkMsg: 'Date must be in format yyyy-mm-dd'

    },



    'validate-dateValid': {

      checkFn: isValidDate,

      checkMsg: 'Date must be a valid date'

    }

  };



  var reClass = /(^|s*)validate-[^s]*/g;

  var control, controls = form.elements;

  var check, checks;

  var fn, value;



  for (var i=0, iLen=controls.length; i<iLen; i++) {

    control = controls[i];



    // Need a function here to handle more control types

    value = control.value;

    checks = control.className.match(reClass);



    // If there are any validate- classes

    if (checks) {



      // For each validate class

      for (var j=0, jLen=checks.length; j<jLen; j++) {

        check = checks[j].replace(/s/g,'');



        // See if there is a related function

        if (fnMap.hasOwnProperty(check)) {

          check = fnMap[check];



          // If there is, run it

          // If it fails, show the message

          // This part could be collected in an array and all the

          // error messages desplayed at once or in suitable message

          // elements in the document. But alert is cheap :-)

          if (!check.checkFn(value)) {

            alert(check.checkMsg);

            control.focus();

            return false;

          }

        }

      }

    }

  }

}



// Just checks the pattern is yyyy/mm/dd

function isValidISO8601(s) {

    s.replace(/^s+|s+$/g, '');

    return /d{4}[-/]d{2}[-/]d{2}/.test(s);

} 



// Checks that s is a valid date

function isValidDate(s) {

    var bits = s.split(/[-/]/g);

    var d = new Date(bits[0], bits[1] - 1, bits[2]);

    return d.getFullYear() == bits[0] && d.getDate() == bits[2];

}



</script>

And some HTML

<form onsubmit=return validate(this);>

  <input type=text name=foo class=validate-dateISO8601 validate-dateValid value=2011-02-28>

  <input type=submit>

</form>