Skip to content →

Prompt Validation – Quick and Easy with jQuery

As I sometimes enjoy, I’ve decided to answer a question from COGNOISE by user jb2321. Here’s the question:

Hi,
I have a text box prompt where users are required to insert a value between 1 and 320 for a comment code.  I would like to know if there is a way for me to validate that text box and make sure the user entered a number within that range.  We are on Cognos 8.4, any help would be appreciated.

This is a pretty self explanatory question. Basically, when the prompt changes, we need to check to make sure that the values are between 1 and 320, and alert the user if it is outside of that range. Beyond that, if someone inputs anything over 320 (for example, they type 520 instead), I’m going to write some logic that brings the text value back down to the uppermost limit. I’ll be working on a prompt page with jQuery HTML Item in the header, and a text input field wrapped in div’s with an ID.

After a few minutes in the console, I was able to select the textbox for manipulation. Here’s what I used to fish for it:

[code type=”javascript”]

jQuery("#textinput input[type=text]").val("320");

[/code]

Awesome, that’s really all I need. Now I’m going to add a listener the prompt and dump the value of the box to the console. This is basic Javascript/jQuery coding at this point.

[code type=”javascript”]
jQuery("#textinput input[type=text]").keyup(function(data) {
console.log(jQuery("#textinput input[type=text]").val());
});

[/code]

So now we’ll add the if logic into the keyup function. I had a lot of fun with this, and actually had to move the code into NetBeans because I messed up the syntax a couple of times.

[code type=”javascript”]

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {

// Start this function when the function has changed

jQuery("#textinput input[type=text]").keyup(function(data) {

var promptValue = jQuery("#textinput input[type=text]").val(); // Get the prompt’s value to make it a little easier to manipulate

//Start our validation logic. Note the promptValue.length which makes sure that when there’s nothing in the box, nothing happens – important when backspacing

if (promptValue.length > 0 && (promptValue < 1 || promptValue > 320)) {
if (promptValue > 320) {
// Simple – alert isn’t necessary, but the user may have meant 320. Just giving them some guidance here.
alert("There are no codes past 320! I’m resetting you to the maximum amount (320)");
// Now SET the value to 320.
jQuery("#textinput input[type=text]").val("320");
}
else {
alert("There are no codes under 1! I’m resetting you to the minimum amount (1)");
jQuery("#textinput input[type=text]").val("1");
}
}
});

}); // End Ready
</script>

[/code]

So there you go. Pretty simple, and very user-friendly.

Published in Uncategorized

One Comment

  1. Michael Michael

    I am new in cognos. i want to do some test on jquery but not able to do that. the report run like the normal one even i import the API for jquery and ui, even put in some action. nothing happened. do you have any idea? i appreciate that if you can help.

Leave a Reply

Your email address will not be published. Required fields are marked *