How to validate a form in jsp using javascript before submit

Question

<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?

Yeah me not getting any proper example to use it for my code in jquery. — user123
– user123, Commented Jan 15, 2014 at 18:12

Greg Burghardt · Accepted Answer · 2014-10-23 15:43:34Z

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).

edited Oct 23, 2014 at 15:43

answered Jan 15, 2014 at 17:54

Greg Burghardt

19.2k10 gold badges58 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user123 Over a year ago

Thanks but i need to validate each field and then submit it.

Greg Burghardt Over a year ago

I just gave you something to start with. You can fill in the rest of the code to validate each field. Just return true or false at the end of the ValidateForm function. The rest I leave up to you. :)

Jeff Over a year ago

@GregBurghardt, is the form.fields.name referring to name="name" or id="name" ?

Greg Burghardt Over a year ago

form.fields.name refers to name="name"

Greg Burghardt Over a year ago

@Jeff: I corrected a factual error in my answer and gave some additional in-depth information.

Abhidemon · Accepted Answer · 2015-10-15 18:39:42Z

2

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>

edited Oct 15, 2015 at 18:39

answered Feb 24, 2015 at 11:29

Abhidemon

5602 gold badges8 silver badges19 bronze badges

2 Comments

Nagama Inamdar Over a year ago

checker function is called on submit of form. I think user is looking for before submit validations.

Abhidemon Over a year ago

Editted the answer, The input type is now a button . And its onclick calls the function checker() , which submits the form only if the data entered is in the right format.

Deepak Singh · Accepted Answer · 2016-01-15 08:55:20Z

0

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>

answered Jan 15, 2016 at 8:55

Deepak Singh

4602 gold badges7 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to validate a form in jsp using javascript before submit

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related