Dashboards & Visualizations

How to add validation on form dashboard input textfield?

axl88
Communicator

thanks all in advance for your time.
I am trying to create a field validation on my dashboard. My fieldset on dashboard is following:

<fieldset autoRun="true" submitButton="true" >  
<input type="text" token="startdate" searchWhenChanged="true" name="sdate" id="sdate">
  <placeholder>Last Month</placeholder>
  <default></default>
  <label>Select a Start Date:</label>
</input>
</fieldset>

And I am trying to retrieve values from my dashboard with the following JS code in app/static directory:

var unsubmittedTokens = mvc.Components.get('default');
var submittedTokens = mvc.Components.get('submitted');
var urlTokens = mvc.Components.get('url');
var startDate = mvc.Components.get('sdate');
submittedTokens.on('change:startdate', function(){
    // When the token changes...
    if(!submittedTokens.get('startdate')) {
        alert("no token");
    } else {
        alert("got a token");
        var startdate = document.getElementsByName('sdate').value;
        alert(startdate);
    }
});

I couldn't start my validation functions since somehow I can't get value of the field to JS.
I want my validation to work in input textfields whenever a field value changes.
I can get value "undefined" with getelementbyName function above. But I can't get what user entered into textfield.

I would be appreciated if someone can help me with above, moreover, if there is an easier way to validate fields on form-Dashboard, you could share it as well.

I m a new splunker, thanks again for your time&efforts.

LukeMurphey
Champion

Try getting the value using "mvc.Components.get("sdate").val()". Thus, your code should look something like this:

var unsubmittedTokens = mvc.Components.get('default');
var submittedTokens = mvc.Components.get('submitted');
var urlTokens = mvc.Components.get('url');
var startDate = mvc.Components.get('sdate');
submittedTokens.on('change:startdate', function(){
    // When the token changes...
    if(!submittedTokens.get('startdate')) {
        alert("no token");
    } else {
        alert("got a token");
        var startdate = mvc.Components.get("sdate").val();
        alert(startdate);
    }
});

axl88
Communicator

hey Luke,
I tried this before. I don't know why but got a token alert works. But Val() function doesn't work. that alert is not launched at all. Apparently JS fails to compile at that line. I keep searching, thanks for response.

0 Karma

nadine_wondem
New Member

Did you find a solution to this issue? I am having the same problem getting val() to work.

0 Karma
Get Updates on the Splunk Community!

Splunk APM: New Product Features + Community Office Hours Recap!

Howdy Splunk Community! Over the past few months, we’ve had a lot going on in the world of Splunk Application ...

Index This | Forward, I’m heavy; backward, I’m not. What am I?

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

A Guide To Cloud Migration Success

As enterprises’ rapid expansion to the cloud continues, IT leaders are continuously looking for ways to focus ...