Dashboards & Visualizations

Text Input Validation in Splunk Form Using JavaScript (for Specific Special Characters and IPaddress)

ch_sowmya
New Member

Hi All,

I have a form with two text inputs.
One should validate and allow users to enter alphanumeric and few specific special characters as in the below JS code.
The other should validate whether the user entered is valid IPaddress or not.

I have written the below validation.js code and deployed it to appserver/static and modified the xml code of form to include "id" field as I have found in Splunk docs.

I have restarted my Splunk environment and tried _bump. But there's no validation happening with inputs.

Is it not invoking the JS script at all? Is something wrong with the way I have defined the JS and xml?

<form script="validation.js">
   <label>Validation</label>
   <fieldset submitButton="true" autoRun="false">
     <input type="text" token="URLs" id="URLs_only">
       <label>Enter URL</label>
     </input>
     <input type="text" token="IPs" id="IPs_only">>
       <label>Enter IP</label>
     </input>
   </fieldset>
   <row>
     <panel>
       <table>
         <search>
           <query>| makeresults 
  | eval Text="$URLs$, Text1="$IPs$
  | table Text Text1</query>
           <sampleRatio>1</sampleRatio>
         </search>
         <option name="count">20</option>
         <option name="dataOverlayMode">none</option>
         <option name="drilldown">cell</option>
         <option name="percentagesRow">false</option>
         <option name="rowNumbers">false</option>
         <option name="totalsRow">false</option>
         <option name="wrap">true</option>
       </table>
     </panel>
   </row>
 </form>



require(["underscore", "jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml", "splunkjs/mvc/simplexml/ready!",
        "splunkjs/mvc/utils", "splunkjs/mvc/tokenutils" ], function(_, $, mvc, utils, TokenUtils) {

 $('#URLs_only').on("change:url", function() {
    var tokens = mvc.Components.get("default");
    var urlvalue = tokens.get("URLs");
    if( /[^a-zA-Z0-9\.\,\:\-\/]/.test( urlvalue ) ) {
            console.log(urlvalue);
            alert('Input is not valid for URL');
            tokens.unset("URLs");
            return false;
            }
            return true;
   })

 $('#IPs_only').on("change:ipadr", function() {
    var tokens = mvc.Components.get("default");
    var ipvalue = tokens.get("IPs");
      if(/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test( ipvalue ) ) {
            return true;
            }
        else{
            console.log(ipvalue);
            alert('Input is not valid for IpAddress');
            tokens.unset("IPs");
            return false; }
  })

});

Thanks all for your help in advance.

0 Karma

jconger
Splunk Employee
Splunk Employee

The problem is your jQuery selector in your JavaScript code. When Splunk renders the dashboard, the ID may not be associated with the input element depending on your Splunk version. For instance, here is a snippet of how your dashboard rendered on Splunk 7.1.2:

<div class="splunk-view splunk-textinput" id="URLs_only_10923" data-view="splunkjs/mvc/textinputview">
    <div data-size="medium" data-test="text" data-test-value="" data-component="splunk-core:/splunkjs/mvc/components/TextInput" class="main_Box_c14abce54916ca6a_f7b2da main_Text_cd96be7d8632d6e1_f7b2da">
        <input type="text" class="input_Text_cd96be7d8632d6e1_f7b2da" value="" aria-multiline="false" data-test="textbox" autocomplete="on" role="textbox" tabindex="0">
    </div>
</div>

Notice the ID is on a <div> instead of an input. Also, notice that the ID was modified. The following modification to your JavaScript should help:

$("[id^=URLs_only]")
    .find("input")
    .on("change", function() {

This jQuery selector is looking for an ID that starts with URLs_only (which will be your <div>). Then, it looks for the input element within that element and carries on.

0 Karma

niketn
Legend

@ch_soumya, <eval> tag inside Search Event Handlers can be used to perform JavaScript Regular Expression validation in Simple XML itself. Are you sure you want to perform the validation in separate JavaScript static file?

Refer to one of my older answers: https://answers.splunk.com/answers/548736/taking-a-numerical-text-input-for-dashboard-to-nar.html

Alternatively, if you want to perform validation on Text input without using JavaScript static file, you can also use text box input value as token in an independent <search> to perform validation and set final token only if validation passes!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

jeffland
SplunkTrust
SplunkTrust

Just to be sure, you placed the .js file in the same app as the dashboard? Have you checked the browser console (typically F12) for errors?

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...