<form name="Details" method="post" action="insertData.jsp" onSubmit="return ValidateForm();">
<label> Name </label > <input type="text" name="name" id="test1" > </input>
<label> ID </label > <input type="text" name="id" id="test2" > </input>
<label> Time </label > <input type="text" name="time" id="test3" > </input>
<label> Latitude </label > <input type="text" name="latitude" id="test4" > </input>
<label> Longitude </label > <input type="text" name="longitude" id="test5" > </input>
<input type= " submit" id="test6" value="submit" > </input>

Validation code in js

function ValidateForm()
{
var uname=document.Detail.name;
if(alphanumeric(uname)){
}
return false;
}
function alphanumeric(uname){
var letter=/*[0-9a-zA-Z]+$/;
if(uname.value.match(letter)){
return true;
}
else{
aler("Enter both alpha and number");
uname.focus();
return false;
}
}

The above validation is to allow a textfield to accept both alphabets and numbers but not only numbers. Its returning false on a wrong input but still the data entered entered is submitted to the database. How to avoid this? what is wrong in my code?

I also want to validate form before submit. After every field is entered it should be validated and displayed if any error just below the field. How do i do it?

<form name="Details" method="post" action="insertData.jsp" onSubmit="return ValidateForm();">
<label> Name </label > <input type="text" name="name" id="test1" > </input>
<label> ID </label > <input type="text" name="id" id="test2" > </input>
<label> Time </label > <input type="text" name="time" id="test3" > </input>
<label> Latitude </label > <input type="text" name="latitude" id="test4" > </input>
<label> Longitude </label > <input type="text" name="longitude" id="test5" > </input>
<input type= " submit" id="test6" value="submit" > </input>

Validation code in js

function ValidateForm()
{
var uname=document.Detail.name;
if(alphanumeric(uname)){
}
return false;
}
function alphanumeric(uname){
var letter=/*[0-9a-zA-Z]+$/;
if(uname.value.match(letter)){
return true;
}
else{
aler("Enter both alpha and number");
uname.focus();
return false;
}
}

The above validation is to allow a textfield to accept both alphabets and numbers but not only numbers. Its returning false on a wrong input but still the data entered entered is submitted to the database. How to avoid this? what is wrong in my code?

I also want to validate form before submit. After every field is entered it should be validated and displayed if any error just below the field. How do i do it?

• javascript
• jquery
• forms
• jsp
• validation

• Why don't you go for jQuery? – Vinoth Krishnan Commented Jan 15, 2014 at 18:10
• Yeah me not getting any proper example to use it for my code in jquery. – user123 Commented Jan 15, 2014 at 18:12
• Check Here. – Vinoth Krishnan Commented Jan 15, 2014 at 18:23

3 Answers 3

You could use a naming pattern for the Ids of hidden <span> tags that represent the form field error messages:

<form onsubmit="return ValidateForm(this);">
    <p>
        <input type="text" id="name" name="name">
        <span style="display: none;" id="name-validation-message"></span>
    </p>
</form>

<script>
    function ValidateForm(form) {
        if (!alphanumeric(form.elements.name)) {
            var message = document.getElementById(form.elements.name.id + "-validation-message");
            message.innerHTML = "Must be alphanumeric";
            message.style.display = "";
        }
    }
</script>

The elements property on form objects is a key-value store where the keys are the values of the name attribute on the form fields, and the values are either a reference to a single form field DOM node, or a collection.

Consider the following HTML:

<form id="test">
    <input type="text" name="foo">

    <input type="checkbox" name="bar" value="1">
    <input type="checkbox" name="bar" value="2">
    <input type="checkbox" name="bar" value="3">
    <input type="checkbox" name="bar" value="4">

    <input type="text" name="things[]">
    <input type="text" name="things[]">
    <input type="text" name="things[]">
    <input type="text" name="things[]">
    <input type="text" name="things[]">
    <input type="text" name="things[]">
    <input type="text" name="things[]">
</form>

We have three unique form field name attribute values:

• foo
• bar
• things[]

In JavaScript, we'll have the following object model:

var form = document.getElementById("test");

form.elements; // A collection of references to all form fields

form.elements.foo; // Reference to <input type="text" name="foo">

// A DOM node collection referencing all checkboxes whose name is "bar"
form.elements.bar;
form.elements.bar[0]; // First "bar" checkbox
form.elements.bar[1]; // Second "bar" checkbox

// A DOM node collection referencing all text boxes whose name is "things[]"
form.elements["things[]"];
form.elements["things[]"][0]; // First "things[]" textbox
form.elements["things[]"][1]; // Second "things[]" textbox

Many server side languages turn field names with square brackets into arrays. You can access those fields in JavaScript using the Array Notation (e.g. form.elements["bar"] instead of Dot Notation (e.g. form.elements.bar).

Hope the following code helps.

<HTML>
  <HEAD>
    <TITLE>Verifying User Data</TITLE>
    <SCRIPT LANGUAGE="JavaScript">

        function checker()
        {
            var regExp1 = '/^(\d{1,2})\/(\d{1,2})\/(\d{2})$/' ;
            var result1 = document.form1.text1.value.match(regExp1);
            if (result1 == null || <*any other input doesnt satisfy the required format*>) {
                alert("Sorry, that's not a valid date.");
                document.form1.text1.focus(); // or document.<formname>.<element_name>.focus();
                return;
            } else {
                document.form1.action="<NextPage.jsp>" ;
                document.form1.method="GET"; // or "POST"
                document.form1.submit();

            }
        }

    </SCRIPT>
</HEAD>

<BODY>
    <H1>Verifying User Data</H1>
    <FORM NAME="form1"  >
        Please enter a date:
        <INPUT TYPE="TEXT" NAME="value1">
        <INPUT TYPE="<sometype>" NAME="value2">
        <INPUT TYPE="<sometype>" NAME="value3">
        ..
        ..
        <INPUT TYPE="button" onclick="checker()">
    </FORM>
</BODY>

Write another javascript on submit button like

          <input type= " submit" id="test6" value="submit" onclick="return save();"> 
  <script>
   function save(){
     document.form[0].submit;
        }
 </script>