Client Side Validation in C1WijWizard

A lot of buzz is there around our Wijmo Products. So I also thought to follow the league, write something related to it and then we had a user coming up with a query like how to validate C1WijWizard. Exact scenario was to validate the controls inside C1WIjWizard while navigating between pages inside C1WijWizard. Here I am providing the solution for the same. C1WijWizard control comes with a client side event OnClientValidating() which can then be used for validating the controls. Here is the code for the same - function OnClientValidating(e, ui) { var wizard = document.getElementById('C1Wizard1'); var tbvalue = document.getElementById('<%= txtMenuTitle.ClientID%>'); if (tbvalue.value == "") { alert("Please fill up all the data"); e.preventDefault(); } } The above mentioned code is simple and easy to understand. It simply checks whether textbox present inside wizard contains value or not before user moves to next wizard and if not, then does not allow to move to next step. Important thing to notice here is that default client method needs to be cancelled. For that matter e.preventDefault(); is used. I have attached a sample with the blog - C1WijWizard_validate. Download it and run the website. You will see textboxes in Step1. Press 'next' without filling the "first" textbox. On doing so an alert message will be seen saying "Please fill up all the data". Now fill up the data in "first" textbox and then press 'Next'. This time no alert message will be seen and one can easily navigate to 'Next' step.

GrapeCity

GrapeCity Developer Tools
comments powered by Disqus