Archive

Textbox Validation Issue

vivek_manoj
Explorer

I am trying to validate the testbox to accept only numeric not any other character. How to do that?
Thanks in Advance.

Tags (1)
0 Karma

niketnilay
Legend

@vivek_manoj You can use change event handler for text box and within the same you can use eval with match to accomplish numeric field validation. Following is run anywhere code and needless to say it is Simple XML, without the need for HTML or JS.

Following statement should do the trick for you: <eval token="validationResult">if(match(value, &quot;^[0-9]+$&quot;), &quot;Numeric&quot;, &quot;Not Numeric&quot;)</eval>

You can try more complex regular expression validation like decimal, negative etc based on your use case. Following is only for digits 0 to 9.

<form>
  <label>TextBox Numeric Validation</label>
  <fieldset submitButton="false">
    <input type="text" token="selText">
      <label>Enter Only Digits</label>
      <change>
        <eval token="validationResult">if(match(value, &quot;^[0-9]+$&quot;), &quot;Numeric&quot;, &quot;Not Numeric&quot;)</eval>
      </change>
    </input>
  </fieldset>
  <row>
    <panel>
      <table>
        <search>
          <query>| makeresults 
 | eval Text="$selText$ is $validationResult$" 
 | table Text</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>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

niketnilay
Legend

@vivek_manoj, I am not sure whether you had tried the run anywhere dashboard example for text box JavaScript Validation. Can you please check and confirm? This is purely Simple XML hence does not require JavaScript or Reboot/Refresh/Bump of Splunk.

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

loggar
Explorer

Convert your page to HTML, set an id to your input textbox like:

<input type="text" token="numbers" id="numbers_only">
     <label>Numbers only</label>
 </input>

..then put this in script below

$(document).ready(function() {
    $('#numbers_only').on('keyup', function() {
        if (/^\d+$/.test($(this).val())) {
            // Contain numbers only   (do something if contains only numbers)
        } else {
             //do something if contains nonumeric
            alert('nonnumbers')
        }
    })
});

..and that should work and check on every keyup in text input

0 Karma

vivek_manoj
Explorer

Hi Loggar,

I tried and I am attaching the snapshot of the code. Please look into it.

<form>

  <row>
  <panel>
    <html>
      <script>
      $(document).ready(function() {
     $('#numbers_only').on('keyup', function() {
         if (/^\d+$/.test($(this).val())) {
             // Contain numbers only   (do something if contains only numbers)
         } else {
              //do something if contains nonumeric
             alert('nonnumbers')
         }
     })
 });
      </script>
     <input type="text" token="numbers" id="numbers_only">
      <label>Numbers only</label>
  </input>
    </html>
    </panel>
    </row>
</form>
0 Karma

DMohn
Motivator

Have a look at this blog entry from Splunk: https://www.splunk.com/blog/2016/09/21/using-html5-input-types-on-splunk-forms/

This will point you in the right direction.

Just to summarize the recommendations from the mentioned post: You have to include the following code fragments:

In your dashboard, include a custom JavaScript File like this:

<form script="set_input_types.js">

Add an id to the XML code of the field to be validated:

<input type="text" token="numbers" id="numbers_only" searchWhenChanged="true">
    <label>Numbers only</label>
</input>

Create a .js file in your app's appserver/staticdirectory, named set_input_types.js (or the name you assigned in the dashboard). Then include this code in the .js:

require(["jquery", "splunkjs/mvc/simplexml/ready!"], function($) {
    $("[id^=numbers_only]").attr('type','number')
}); 

This will provide a HTML5 number input field. You will have to restart the splunk server (or reload it) for the changes to take effect.

Please note - this will only work in fully HTML5 compatible browsers.

0 Karma

vivek_manoj
Explorer

Yeah bro, I have used the same thing and restart the splunk and used the _bump also.

But its not working. Nothing is happening.

0 Karma

vivek_manoj
Explorer

Its not working. Its showing nothing.

0 Karma

DMohn
Motivator

Another addition: I have edited the original answer to clarify the steps you have to take. Please verify.

0 Karma

DMohn
Motivator

Can you please post the code you have implemented? It is quite hard to debug your errors if we don't know what you have coded.

0 Karma

gcusello
SplunkTrust
SplunkTrust

Hi vivek_manoj,
I think that it's not possible to do this!
if you haven't high numbers you could use as workaround a dropdown list, but obviously it isn't the same think!
Bye.
Giuseppe

0 Karma
.conf21 CFS Extended through 5/20!

Don't miss your chance
to share your Splunk
wisdom in-person or
virtually at .conf21!

Call for Speakers has
been extended through
Thursday, 5/20!