How to validate the form generated by forms.xml

Question

I use form.xml to display the form control. I have to validate the form element and if everything is ok redirect to another screen else display the error message to end user.

Please give some tips to get solution.

Code just like

Forms.xml

<form name="TestingServices" type="single" target="${formTarget}">
    <field name="firstName"><text/></field>
    <field name="lastName"><text/></field>
    <field name="submit"><submit/></field>
</form>

Answer 1

There is no inbuilt way available for validations in Forms.xml. You can use JQuery instead to Validate your form.

Add the jQuery Scripts into header.ftl

form.xml will generate the id based on your form Name.

Add the below code to header.ftl

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
 <script>
        $(document).ready(function(){   

            $("#TestingServices").validate({

                rules:{         
                    firstName:{"required": true},
                    lastName:"required"

                },
                messages:{          
                    firstName:"<a font style='color:red'>  FirstName is Required</a>"   ,
                    lastName:"<a font style='color:red'> Last Name is Required </a>"    

                }   
            }); 
        });
 </script>

Answer 2

Finally I find the way to call the Javascript or JQuery from the forms.xml

<field name="submitButton" title="${uiLabelMap.CommonSubmit}" widget-style="smallSubmit" 
        event="onClick"
        action="javascript:return myFunction('parameters');">
            <submit button-type="button" />
 </field>

or we can give script like

    <field name="submitButton" title="${uiLabelMap.CommonSubmit}" widget-style="smallSubmit" 
                event="onClick"
                action="javascript: // set of code what you want to do, like this
                                       return confirm('Are you Sure do you want to continue ?');">
                    <submit button-type="button" />
     </field>