This article offers an example designed to show how to utilize client-side scripts to incorporate data-input checking mechanisms into your Management Screen and thereby improve the interactive experience for the users of your Screen. Often when inputting data to a Management Screen or a Dynamic Form, it's very helpful to be able to check and validate this data as the user is navigating through the Screen and inputting data. This is by no means a replacement for validating the data when it is received by the Snippet used by a Screen, however it can help the user's understanding of the Screen and save the user's time by avoiding data input errors before they are sent.


There are three steps to complete in this example that shows you how to incorporate a time-constrained search box into a Screen:

  • Step 1: Set up a basic Management Screen and Snippet.
  • Step 2: Add the required basic HTML code to the Snippet.
  • Step 3: Reference the basic HTML we've set up for this Snippet with a jQuery script.


Step 1. Setup a Basic Management Screen and Snippet

If you are not clear on how to do this, please review the Working with Dynamic Forms page in our main GameSparks Learn site to understand how to do this.


Step 2. Basic HTML

In this example, we're going to set up a time-constrained search box. This can useful as a client-side check for data input and can be applied to many other situations. First, we create a Snippet called search-snippet, then we need some basic elements to work from:


Javascript Code

Spark.setScriptData("view", snippetProcessor(Spark.getData().scriptData));
function snippetProcessor(data) {
    return {};
}


HTML Code

<gs-row>
    <gs-col width="3">
        <input type="text" name="name" id="name" />
    </gs-col>
    <gs-col width="3">

        <!-- Active From Search Box -->
        <input type="text" name="activeFrom" class="datepicker" id="activeFrom" />
    </gs-col>
    <gs-col width="3">

        <!-- Active Until Search Box -->
        <input type="text" name="activeUntil" class="datepicker" id="activeUntil" />
    </gs-col>
    <gs-col width="3">

        <!-- Submit Button -->
        <gs-submit></gs-submit>
    </gs-col>
</gs-row>
<script>
    $('.datepicker').datepicker();
</script>



Step 3. Referencing the HTML in jQuery

Once we have the base HTML setup for the Snippet, we can add the jQuery script that will keep an eye as we change the value. Notice that we've added the gs-form and the gs-title-block tags:


HTML Code

<gs-title-block title="Search">
    <gs-row>
        <gs-form snippet="search-snippet" target="target">
            <gs-col width="3">
                <input type="text" name="name" id="name" />
            </gs-col>

            <gs-col width="3">
                <!-- Active From Search Box -->
                <input type="text" name="activeFrom" class="datepicker" id="activeFrom" />
            </gs-col>

            <gs-col width="3">
                <!-- Active Until Search Box -->
                <input type="text" name="activeUntil" class="datepicker" id="activeUntil" />
            </gs-col>

            <gs-col width="3">
                <!-- Submit Button -->
                <gs-submit></gs-submit>
            </gs-col>
        </gs-form>
    </gs-row>
</gs-title-block>

<script>
    $('.datepicker').datepicker();
    $("#activeFrom").on("change", function () { dateCheck(); });
    $("#activeUntil").on("change", function () { dateCheck(); });

    function dateCheck() {

        // Check the From date is before Now
        if (new Date($("#activeFrom").val()) < new Date())
            $("#activeFrom").val(getDate(new Date()));

        // Check Until is greater than From
        if (new Date($("#activeUntil").val()) < new Date($("#activeFrom").val()))
            $("#activeUntil").val($("#activeFrom").val());
    }


    function getDate(date) {

        var month = date.getMonth()+1
        if (month < 10) month = "0" + month;
        return month + "/" + date.getDate() + "/" + date.getFullYear();
    }
</script>