Client side validation

[Former Member]

Hi,

I am trying to use the invalid property of an input field (in javascript) to decide whether to post a form to the server. My elements are:

<hbj:form id="myFormId"

method="post"

encodingType="multipart/form-data">

<hbj:inputField

id="datefield"

type="DATE"

maxlength="10"

design="STANDARD"

jsObjectNeeded="true"

showHelp="TRUE">

</hbj:inputField>

<hbj:button

id="go"

text="Go"

onClientClick="if(!CheckDate(this))htmlbevent.cancelSubmit=true;"

onClick="go">

</hbj:button>

</hbj:form>

And then I have my javascipt validation:

function getElement(id){

return document.getElementById(

eval(htmlb_formid + "_htmlbElements['"id"'];"));

}

function getElementState(id){

return document.getElementById(

eval(htmlb_formid + "_htmlbElements['"id"'].isvalid;"));

}

function getValueOfElement(id){

var value = parseFloat(getElement(id).value);

return isNaN(value)?0:value;

}

function getStatusOfElement(id){

var val1 = parseFloat(getElement(id).valid);

var val1 = getElement(id).value;

var val2 = getElement(id).isvalid;

var val3 = getElement(id).invalid;

if (val1 == 0){

return 0;

}

else{

return(val1 + " " + val2 + " " + val3);

}

}

function CheckDate(PageTitle1){

var myEl2 = getValueOfElement('datefield');

alert(myEl2);

var myEl3 = getStatusOfElement('datefield');

alert(myEl3);

var myEl5 = getElementState('datefield');

alert(myEl5);

var myEl4 = getElement('datefield').type;

alert(myEl4);

}

-

---

I know its a bit mashed together there but the getStatusOfElement should be able to see if the invalid property is true or not.

Please help??

Logically what I want to do is say: if the invalid property for the textbox is true then don't submit the form to the server.

[Former Member · Accepted solution]

Hi,

change the code to

if (!CheckDate(val1)) {

not

if (!CheckDate(var)) {

[Former Member]

Hi,

Java

=====

package com.cts.anand;

import com.sapportals.htmlb.event.Event;

import com.sapportals.htmlb.page.DynPage;

import com.sapportals.htmlb.page.PageException;

import com.sapportals.portal.htmlb.page.JSPDynPage;

import com.sapportals.portal.htmlb.page.PageProcessorComponent;

public class SDN1 extends PageProcessorComponent {

public DynPage getPage(){

return new SDN1DynPage();

}

public static class SDN1DynPage extends JSPDynPage{

public void doInitialization(){

}

public void doProcessAfterInput() throws PageException {

}

public void go(Event e) {

//write event here

}

public void doProcessBeforeOutput() throws PageException {

this.setJspName("SDNJSP.jsp");

}

}

}

JSP

====

<%@ taglib uri="tagLib" prefix="hbj" %>

<hbj:content id="myContext" >

<hbj:page title="PageTitle">

<hbj:form id="myFormId">

<hbj:inputField

id="datefield"

type="DATE"

maxlength="10"

design="STANDARD"

jsObjectNeeded="true"

showHelp="TRUE">

</hbj:inputField>

<hbj:button

id="go"

text="Go"

onClientClick="JavaScript:CheckDate();"

onClick="go">

</hbj:button>

<script>

function CheckDate(){

var funcName = htmlb_formid+ '_getHtmlbElementId';

func = window[funcName];

var val = eval(func('datefield'));

var val1=val.getValue();

var re = /^\d{1,2}\/\d{1,2}\/\d$/;

if(val1 != '' && !val1.match(re)) {

alert('Invalid date format Re-enter date');

htmlbevent.cancelSubmit=true;

}

}

</script>

</hbj:form>

</hbj:page>

</hbj:content>

Message was edited by: Kirupanand Venkatapathi

Message was edited by: Kirupanand Venkatapathi

i modified the code,Try this code it is working now.

[Former Member]

Thanks again, but I don't understand what you're doing. What I'm trying to do is validate the date.

If I enter 99/99/9999 and click outside the textbox, the border goes red indicating the date is invalid. If I then click Go, I don't want trigger the onClick event (i.e. cancel the postback).

I cut and pasted your code and it skips straight through the JS function regardless of what has been entered.

Please help.

[Former Member]

OK, I should have spotted that one! Thanks!

The problem now is that it appears to go into an infinite loop because of the recursive call to CheckDate. The browser eventually crashes out of memory.

I don't really understand what the script is trying to achieve with this. Please help!

[Former Member]

Hi,

Sorry for not getting back sooner. The code you wrote produces a syntax error- I believe on line:

if (!CheckDate(var)) {

is this correct?

[Former Member]

JAVA

====

package com.cts.anand;

import com.sapportals.htmlb.page.DynPage;

import com.sapportals.htmlb.page.PageException;

import com.sapportals.portal.htmlb.page.JSPDynPage;

import com.sapportals.portal.htmlb.page.PageProcessorComponent;

public class SDN1 extends PageProcessorComponent {

public DynPage getPage(){

return new SDN1DynPage();

}

public static class SDN1DynPage extends JSPDynPage{

public void doInitialization(){

}

public void doProcessAfterInput() throws PageException {

}

public void doProcessBeforeOutput() throws PageException {

this.setJspName("SDNJSP.jsp");

}

}

}

JSP

===

<%@ taglib uri="tagLib" prefix="hbj" %>

<hbj:content id="myContext" >

<hbj:page title="PageTitle">

<script>

function CheckDate(){

var funcName = htmlb_formid+ '_getHtmlbElementId';

func = window[funcName];

var val = eval(func('datefield'));

var val1=val.getValue();

if (!CheckDate(var)) {

htmlbevent.cancelSubmit=true;

alert('Enter Date ');

}

}

</script>

<hbj:form id="myFormId"

method="post"

encodingType="multipart/form-data">

<hbj:inputField

id="datefield"

type="DATE"

maxlength="10"

design="STANDARD"

jsObjectNeeded="true">

</hbj:inputField>

<hbj:button

id="go"

text="Go"

jsObjectNeeded="true"

onClientClick="JavaScript:CheckDate();"

onClick="go">

</hbj:button>

</hbj:form>

</hbj:page>

</hbj:content>

xml

===

<?xml version="1.0" encoding="utf-8"?>

<application>

<application-config>

<property name="SharingReference" value="com.sap.portal.htmlb"/>

</application-config>

<components>

<component name="SDN1">

<component-config>

<property name="ClassName" value="com.cts.anand.SDN1"/>

</component-config>

<component-profile>

<property name="tagLib" value="/SERVICE/htmlb/taglib/htmlb.tld"/>

</component-profile>

</component>

</components>

<services/>

</application>

This code is working as per u r requirement

[Former Member]

HI,

See my weblog on Client side validation

/people/kirupanand.venkatapathi2/blog/2005/12/18/client-side-validation-in-dynpage

[Former Member]

Thanks for that, but the code already captures the value of the input field. When the type = DATE, if a non-date is entered then the border goes red (i.e. isvalid is FALSE). It is this what I'm trying to capture.