Validating textbox prompts
Let's say there is a report with a textbox prompt. Users are expected to enter a phone number in (nnn) nnn-nnnn format in that prompt.
In this recipe, we will write a code to validate the value entered by the user and submit the report only if the value entered is in the specified format.
Getting ready
Pick any report and add a textbox prompt to it. We will add a JavaScript to validate that textbox.
How to do it...
We want to make sure that the user will write the phone number in the right format. So, we will validate the number entered by the user using JavaScripts, and in case the number is not following the required format, a warning message will appear to the user with the correct format. To do this, perform the following steps:
- Wrap the textbox prompt within a span in the same way as we did in prior recipes.
- Add the following script to the page footer:
<script> function ValidatePage() { var theSpan = document.getElementById("A1"); var a = theSpan.getElementsByTagName("input"); /* this captures the textbox */ for( var i = a.length-1; i >= 0; i-- ) { var link = a[i]; if( link.id.match(/PRMT_TB_/)) {phoneRegex = /^\(\d{3}\) \d{3}-\d{4}$/; /* This is regular expression to allow only the strings in (nnn) nnn-nnnn format */ if( !link.value.match( phoneRegex ) ) { alert( 'Please enter phone number in (nnn) nnn-nnnn format' ); link.focus(); link.select(); return; } else {promptButtonFinish();} } } } /* Following is standard code to get FormWarpRequest*/ var fW = (typeof getFormWarpRequest == "function" ?getFormWarpRequest() : document.forms["formWarpRequest"]); if ( !fW || fW == undefined) { fW = ( formWarpRequest_THIS_ ?formWarpRequest_THIS_ : formWarpRequest_NS_ );} /* This returns all elements of Button tag */var buttons = fW.getElementsByTagName("BUTTON"); for (var i=0; i<buttons.length; i++) { if (buttons[i].id.match(/finish/)) // Capture the finish button { if (buttons[i].onclick.toString().indexOf('finish') > 0) { buttons[i].onclick = ValidatePage;} /* This overrides the FINISH button and attaches it to our function */ } } </script>
How it works...
We first define a function called ValidatePage() that captures the textbox value and checks whether it follows the required format. We are using the match function of JavaScript which allows us to parse the textbox string against our regular expression. The regular expression ^\(\d{3}\) \d{3}-\d{4}$ allows only the string in (nnn) nnn-nnnn format. Please note that there is a space in the phone number string format. If you forget this space while trying the prompt, the number will not be considered as a correct entry. You can read more about regular expressions and also try some on this website: http://www.regular-expressions.info/javascriptexample.html.
If the textbox value matches with our regular expression, we call the promptButtonFinish() function to submit the prompt page. Otherwise, we show an error message and set the focus back to the textbox.
Finally, this ValidatePage() function is attached to the Finish button by the second part of the script. We capture the Finish button by its TagName (buttons) and ID match (/finish/) and then override its OnClick event.