java - JSP form validation for numbers, dates and values

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="" %> 
<%@ 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"
".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="mand" 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();">

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./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/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="mand" 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();">

Share Improve this question edited Nov 8, 2011 at 5:54 RobG 148k32 gold badges179 silver badges214 bronze badges asked Nov 8, 2011 at 5:29 user1031152 2394 gold badges10 silver badges15 bronze badges

You need to add a sumbit listener to the form, e.g. <form onsubmit="return validateForm();" ...> and return false from the function if validation fails to stop submission. Also note that client side validation is just a convenience for users and totally unreliable, you must still validate on the server. – RobG Commented Nov 8, 2011 at 5:35
when i add it to the form i get this error: Cannot return from outside a function or method. – user1031152 Commented Nov 8, 2011 at 5:38
When do you get the error? When you click the submit button? – RobG Commented Nov 8, 2011 at 5:45
when i click on submit everything works but this error i'm talking about exist in eclipse page and it's underlined with red colored line, and another thing i want to create something to check for the date i'm checking only if it's not null do you know to check date ? – user1031152 Commented Nov 8, 2011 at 5:47
Then it is an Eclipse issue, not a javascript issue. Add an "eclipse" tag to your question. As for validating dates, I'm sure there's a million posts here that about. You can use a simple regular expression to check format, or go a bit further and check that it's actually a valid date. Both methods are only a few lines of code. – RobG Commented Nov 8, 2011 at 5:53

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

if it's not a homework, save yourself some time and use JQuery Validator:

rules: {    
    dob: {
       required: true,
       date: true },    
    firstname: "required",
    breedid: "required"
}

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

java - JSP form validation for numbers, dates and values - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)