Help with validation rules for form with multiple submit buttons

[Fredrik Andersson]

Hello! I'm struggling with a form developed with the struts validation framework. To give you an idea of how the form looks like please take a look below:

    <html:form action="/ProductFormAction" method="post" onsubmit="return validateProductForm(this);">
<table align="center">
    <tr>
        <td colspan="2" class="TD_CENTER">
            <html:errors/>
        </td>
    </tr>
    <tr>
        <td class="TEXT_VERDANA_BLACK_10">
            Select mobile phone number
        </td>
        <td class="TEXT_VERDANA_BLACK_10">
            <html:select property="productselectlist">
              <html:options collection="products" property="id" labelProperty="mobilephonenumber"/> 
            </html:select>
        </td>
    </tr>
    <tr>
        <td class="TEXT_VERDANA_BLACK_10">Add new product (mobile phone number)</td>
        <td>
            <html:text property="mobilephonenumber" size="25" maxlength="50" />
        </td>
    </tr>
    <tr>
        <td class="TEXT_VERDANA_BLACK_10" colspan="2">
            <table>
                <td>
                    <html:submit property="submitbutton">Add product</html:submit>
                </td>
                <td>
                    <html:submit property="submitbutton">Remove product</html:submit>
                </td>
                <td>
                    <html:submit property="submitbutton">Update product</html:submit>
                </td>
                <td>
                    <html:submit property="submitbutton">Select product</html:submit>
                </td>
            </table>
        </td>
    </tr>
    <html:javascript formName="ProductForm"/>
    </html:form>
</table>

The form contains:
1 selectlist called productselectlist
1 textfeild called mobilephonenumber
4 submit buttons called submitbutton with 4 different values (Add product, Remove product, Update product, Select product).

If the user pushes "Add product" then mobilephonenumber needs to be (required, minlength, maxlength, mask)

If the user pushes "Remove product" then productselectlist must be selected.

If the user pushes "Select product" then productselectlist must be selected.

If the user pushes "Update product" then productselectlist must be selected and mobilephonenumber needs to be (required, minlength, maxlength, mask).


Unfortunately I do not mange to set up the validation rules for this for the clientside so if some one could give me a hand with this it would be great. Below is my attempt to set up the rules. But for eg. if I push the "Remove product" the "Add product" - rule executes.

       <formset>
        <form name="ProductForm">
            <field property="mobilephonenumber" depends="validwhen, required, minlength, maxlength, mask">
                <arg key="ProductForm.clientsidevalidation.mobilephonenumber"  /> 
                <var> 
                        <var-name>validwhenvar</var-name> 
                        <var-value>((submitbutton == "Add product") or (submitbutton == "Update product"))</var-value> 
                </var>
                <var> 
                        <var-name>minlength</var-name> 
                        <var-value>5</var-value> 
                </var>                
                <var> 
                        <var-name>maxlength</var-name> 
                        <var-value>50</var-value> 
                </var> 
                <var> 
                    <var-name>mask</var-name> 
                    <var-value>^[0-9]*$</var-value> 
                </var>                
            </field>
            <field property="productselectlist" depends="validwhen">
                <arg key="ProductForm.clientsidevalidation.productselectlist"  /> 
                <var> 
                        <var-name>validwhenvar</var-name> 
                        <var-value>((submitbutton == "Remove product") or (submitbutton == "Select product"))</var-value> 
                </var>            
            </field>
        </form>
    </formset>

Best regards Fredrik

[Liju Cherian]

I've modified your code from validation.xml file. Try this out.

<formset>
<form name="ProductForm">
<field property="mobilephonenumber" depends="validwhen,minlength,maxlength,mask">
<arg key="ProductForm.clientsidevalidation.mobilephonenumber"/>
<var>
<var-name>test</var-name>
<var-value>((submitbutton!="Add product" && submitbutton!="Update product") or (*this* != null))</var-value>
</var>
<var>
<var-name>minlength</var-name>
<var-value>5</var-value>
</var>
<var>
<var-name>maxlength</var-name>
<var-value>50</var-value>
</var>
<var>
<var-name>mask</var-name>
<var-value>^[0-9]*$</var-value>
</var>
</field>
<field property="productselectlist" depends="validwhen">
<arg key="ProductForm.clientsidevalidation.productselectlist" />
<var>
<var-name>test</var-name>
<var-value>((submitbutton!="Remove product" && submitbutton!="Select product") or (*this* != null))</var-value>
</var>
</field>
</form>
</formset>

Hope this helps. If you still have doubts, check this link out. (Topic - Designing Complex Validations with validwhen)


Liju
[ April 06, 2006: Message edited by: Liju Cherian ]

[Fredrik Andersson]

Hello Liju!

I have struggled all weekend with this but I have not get it to work.

I do may think that there was some errors in the code depending on me. I guess it how ever sholud look like:

<formset>
<form name="ProductForm">
<field property="mobilephonenumber" depends="validwhen,minlength,maxlength,mask">
<arg key="ProductForm.clientsidevalidation.mobilephonenumber"/> 
<var> 
<var-name>validwhen</var-name> 
<var-value>((submitbutton=="Add product" or submitbutton=="Update product") and (mobilephonenumber!= null or mobilephonenumber!=""))</var-value> 
</var>
<var> 
<var-name>minlength</var-name> 
<var-value>5</var-value> 
</var> 
<var> 
<var-name>maxlength</var-name> 
<var-value>50</var-value> 
</var> 
<var> 
<var-name>mask</var-name> 
<var-value>^[0-9]*$</var-value> 
</var> 
</field>
<field property="productselectlist" depends="validwhen">
<arg key="ProductForm.clientsidevalidation.productselectlist" /> 
<var> 
<var-name>validwhen</var-name> 
<var-value>((submitbutton=="Remove product" or submitbutton=="Select product") and (*this*!= null or *this*!=""))</var-value> 
</var> 
</field>
</form>
</formset>    

But it seems like the validwhen never fires.

If I check the output of the JS-code it look like for eg:

    function ProductForm_minlength () 
    { 
     this.a0 = new Array("mobilephonenumber", 
     "Mobile phone number can not be less than {1} characters.",
     new Function ("varName", "this.maxlength='50';
     this.mask=/^[0-9]*$/; this.minlength='5'; 
     this.validwhen='((submitbutton==\"Add product\" or submitbutton==\"Update product\") and (mobilephonenumber!= null or mobilephonenumber!=\"\"))';  
     return this[varName];")
     );
    }

Do you see any thing wrong?

BTW do you think the

 ]<var-name>validwhen</var-name>  [/CODE needs to be named [CODE]  ]<var-name>test</var-name>  

?

Best regards
Fredrik

[Liju Cherian]

To be frank I'm not all that great with validwhen validation. By the way did you check out the link I mentioned in my previous post...?? In that

<var-name>test</var-name>

is used instead of

<var-name>validwhen</var-name>

. I too have used it this manner. I have not checked it out in your particular situation though. Let me work on a test application with your situation; i'll let you know the result asap. By the way is ur validation firing at all..?? or is it just the validwhen case that is not firing..???

[Fredrik Andersson]

Hello!

Thanks for your reply!

Yes I would say that the other validation is fired in this form. (minlength, maxlength and mask) when I push the buttons "Add product" or "Update product". But if the field mobilephonenumber is empty then and I push those buttons I just catch the "error" on the serverside.

Correct me if I'm wrong that there should be a poup saying something when this happens or have I missunderstod the use of validwhen?

Btw I have studying the page you refered to before. Thats tha page I got inspired by.

So if you have any suggestions please let me know.

I will now try to create a Hello World page with the generated JS-code and see if it is possible to get it to work.

Best regards
Fredrik

[yin jiang]

validwhen validation can only be done on server side.

[Fredrik Andersson]

Hello!

That would explain it all!!

But are you absolutely sure?

...Since I do specify it in the validation.xml like

    
<field property="mobilephonenumber" depends="validwhen,minlength,maxlength,mask">
<arg key="ProductForm.clientsidevalidation.mobilephonenumber"/> 
<var> 
<var-name>test</var-name> 
<var-value>((submitbutton!="Add product" && submitbutton!="Update product") or (*this* != null))</var-value> 
</var>
....

I guess the var-name "test" has something to do with the validwhen-rule?

This also gets added to the JS-code on the client like:

      function ProductForm_minlength () { 
     this.a0 = new Array("mobilephonenumber", "Mobile phone number can not be less than {1} characters.", 
     new Function ("varName", "this.maxlength='50'; this.mask=/^[0-9]*$/; 
     this.minlength='5'; 
     this.test='((submitbutton==\"Add product\" or submitbutton==\"Update product\") and (mobilephonenumber!= null or mobilephonenumber!=\"\"))';  return this[varName];"));
    }  

To me it looks like the expression in the <var-value> is the JS-code that vill be fired and checked for the validwhen-rule?

But perhaps I have missunderstood the meaning of how to use the validwhen??

Please comment as much as you want.

Best regards
Fredrik

[Liju Cherian]

I'm not sure if this thread is still active, but anyhow... I tried out your scenario Fredrick, and was successful. I just tried out the server side validations though. I'm enclosing my .jsp and validation.xml file with this.

index.jsp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="/tags/struts-html" prefix="html" %>
<%@ taglib uri="/tags/struts-logic" prefix="logic" %>
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test Application</title>
</head>
<body>
 
<html:form action="/product">
<table cellpadding="0" cellspacing="0" width="100%">
<logic:messagesPresent message="false">
<tr>
<td><html:errors/></td>
</tr>
</logic:messagesPresent>
<tr>
<td>Mobile Phone No. : </td>
<td><html:text property="mobilePNo"/></td>
</tr>
<tr>
<td>Product : </td>
<td>
<html:select property="product">
<html :-o	 ption value="">--Select--</html :-o	 ption>
<html :-o	 ption value="001">Product 1</html :-o	 ption>
<html :-o	 ption value="002">Product 2</html :-o	 ption>
<html :-o	 ption value="003">Product 3</html :-o	 ption>
<html :-o	 ption value="004">Product 4</html :-o	 ption>
<html :-o	 ption value="005">Product 5</html :-o	 ption>
</html:select>
</td>
</tr>
<tr>
<td colspan="2" style="padding-right: 10px;">
<html:submit property="submitbutton" value="Add product"/>
<html:submit property="submitbutton" value="Remove product"/>
<html:submit property="submitbutton" value="Select product"/>
<html:submit property="submitbutton" value="Update product"/>
</td>
</tr>
</table>
</html:form>
 
</body>
</html>

validation.xml

<?xml version="1.0" encoding="ISO-8859-1" ?>
 
<!DOCTYPE form-validation PUBLIC
          "-//Apache Software Foundation//DTD Commons Validator Rules Configuration 1.1.3//EN"
          "http://jakarta.apache.org/commons/dtds/validator_1_1_3.dtd">
 
<form-validation>
 
<!--
This is a minimal Validator form file with a couple of examples.
-->
 
<formset>
<!-- An example form -->
<form name="testForm">
<field property="mobilePNo" depends="validwhen, minlength, maxlength, mask">
<arg key="ProductForm.clientsidevalidation.mobilephonenumber" />
<var>
<var-name>test</var-name>
<var-value>(((submitbutton!="Add product") and (submitbutton!="Update product")) or (*this* != null))</var-value>
</var>
<var>
<var-name>minlength</var-name>
<var-value>5</var-value>
</var>
<var>
<var-name>maxlength</var-name>
<var-value>50</var-value>
</var>
<var>
<var-name>mask</var-name>
<var-value>^[0-9]*$</var-value>
</var>
</field>

<field property="product" depends="validwhen">
<arg key="ProductForm.clientsidevalidation.productselectlist" />
<var>
<var-name>test</var-name>
<var-value>(((submitbutton!="Remove product") and (submitbutton!="Select product")) or (*this* != null))</var-value>
</var>
</field>
</form>
</formset>
 
</form-validation>

Hope this helps.

[Fredrik Andersson]

Hello!

Thanks for your reply!
The thread is very much active.

If I get you right you just get it executed on the serverside?

Is that right?

I need to get it executed on the client with a popup.

Best regards
fredrik

[Liju Cherian]

Yes, I tried out server-side validation only. Tried my luck with client-side validation today, but didn't succeed , as of yet...!! Why don't you use some external javascript, from within your page to validate the condition, instead of opting for struts based client-side validation..???

Anyhow... if you come out with a solution for this, do let me know...


Cheers,
Liju

[Fredrik Andersson]

Hello!

I didn't solved it like I would like to do but for now I do like this.

    
<html:form action="/ProductFormAction" method="post" onsubmit="return validateProductForm(this);">
<tr>
<td colspan="2" class="TD_CENTER">
<html:errors/>
</td>
</tr>
<tr>
<td class="TEXT_VERDANA_BLACK_10">
Select mobile phone number
</td>
<td class="TEXT_VERDANA_BLACK_10">
<html:select property="productselectlist">
  <html :-o	 ptions collection="products" property="id" labelProperty="mobilephonenumber"/> 
</html:select>
</td>
</tr>
<tr>
<td class="TEXT_VERDANA_BLACK_10">Add new product (mobile phone number)</td>
<td>
<html:text property="mobilephonenumber" size="25" maxlength="50" />
</td>
</tr>
<tr>
<td class="TEXT_VERDANA_BLACK_10" colspan="2">
<table>
<td>
<html:submit property="submitbutton" onKlick="return companySpecific_checkAddOrUpdateProduct(this, mobilephonenumber)">Add product</html:submit>
</td>
<td>
<html:submit property="submitbutton" onKlick="return companySpecific_checkRemoveOrSelectProduct(this, productselectlist)">Remove product</html:submit>
</td>
<td>
<html:submit property="submitbutton" onKlick="return companySpecific_checkAddOrUpdateProduct(this, mobilephonenumber)">Update product</html:submit>
</td>
<td>
<html:submit property="submitbutton" onKlick="return companySpecific_checkRemoveOrSelectProduct(this, productselectlist)">Select product</html:submit>
</td>
</table>
</td>
</tr>
<html:javascript formName="ProductForm"/>
</html:form>

In my validation.xml I removed nearly everything like:

<formset>
<form name="ProductForm">
<!--<field property="mobilephonenumber" depends="validwhen,minlength,maxlength,mask">-->
<field property="mobilephonenumber" depends="validwhen">
<arg key="ProductForm.clientsidevalidation.mobilephonenumber"/> 

<var> 
<var-name>validwhen</var-name> 
<var-value>((submitbutton=="Add product" or submitbutton=="Update product") and (mobilephonenumber!= null or mobilephonenumber!=""))</var-value> 
</var>
<!--
<var> 
<var-name>minlength</var-name> 
<var-value>5</var-value> 
</var> 
<var> 
<var-name>maxlength</var-name> 
<var-value>50</var-value> 
</var> 
<var> 
<var-name>mask</var-name> 
<var-value>^[0-9]*$</var-value> 
</var>
-->
</field>
<field property="productselectlist" depends="validwhen">
<arg key="ProductForm.clientsidevalidation.productselectlist" /> 
<var> 
<var-name>validwhen</var-name> 
<var-value>((submitbutton=="Remove product" or submitbutton=="Select product") and (*this*!= null or *this*!=""))</var-value> 
</var> 
</field>
</form>
</formset>

I added a my own ugly javascript into my jsp like:

        <script>
        function companySpecific_checkAddOrUpdateProduct(submitButton, textField)
        {
            if(submitButton.value == "Add product")
            {
                if(textField.value.length > 5 && textField.value.length < 51 && companySpecific_isAllDigits(textField.value))
                {
                return true;
                }
                else
                {
                alert("The mobile phone number is required and length of 5-50 chars, only 0 to 9 is allowed.");
                return false;
                }
            }
            else if(submitButton.value == "Update product")
            {
                if(textField.value.length > 5 && textField.value.length < 51 && companySpecific_isAllDigits(textField.value))
                {
                return true;
                }
                else
                {
                alert("The mobile phone number is required and length of 5-50 chars, only 0 to 9 is allowed.");
                return false;
                }
            }
        }
 
        function companySpecific_checkRemoveOrSelectProduct(submitButton, selectField)
        {
            if(submitButton.value == "Remove product")
            {
                //if(selectField.value != null && selectField.value.length != 0)
                if(selectField.options.value != null && selectField.options.value.length != 0)
                {
                return true;
                }
                else
                {
                alert("To remove or select a product you must select the product in the drop down list.");
                return false;
                }
            }
            else if(submitButton.value == "Select product")
            {
                //if(selectField.value != null && selectField.value.length != 0)
                if(selectField.options.value != null && selectField.options.value.length != 0)
                {
                return true;
                }
                else
                {
                alert("To remove or select a product you must select the product in the drop down list.");
                return false;
                }
            }
        }
       
function companySpecific_isAllDigits(argvalue)
{
if (argvalue.length == 0)
{
   return false;
}
argvalue = argvalue.toString();
 
var validChars = "0123456789";
var startFrom = 0;
 
for (var n = startFrom; n < argvalue.length; n++)
{
if (validChars.indexOf(argvalue.substring(n, n+1)) == -1)
{
return false;
}
}
return true;
}
        </script>

It does not look beautiful but it works. So for now I will go for this.

OBS onclick is changed to onKlick since JavaRanch does not like that in posts.

Best regards
Fredrik