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

[ch_sowmya]

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.

[jconger]

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.

[niketn]

@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!

[jeffland]

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?