Skip to main content

Validation.Javascript

Comments

19 comments

  • Neil Quinby

    Hi Jon

    I'm not quite understanding what you have but would I be right in thinking you want to pass the element ID into the JS e.g. ValidateCheckNumber(element1, element2, element3, etc...) and have the script loop through each element passed in?

    Regards

    Neil

    0
  • Jon Walters

    Hi Neil,

    I only have certain inputs I want to do this for so I want to pass the element ID into the function without actually specifying what the ID as I this is in a DataTable, which is iterating through populating questions and answers so I wont exactly know the row number the input is on - this is why I want to do this dynamically (hope I am making sense)

    If I add JS to on change event on the same Input element ValidateCheckNumber(this.id) works and passes the ID of the element but not with the JavaScript validation.  I just get null for the ID that is passed, 

    0
  • Neil Quinby

    If you're passing a value from a table for example from a button on a row you can build the elementId in the JavaScript.

    For example, if you had a table with columns called Question and Answer and a column containing a button that calls your JS code you can use the row number of the table as a parameter in the JS by using @Function.Rownumber~ and appending this to the elementId in the script like this:

    var myAnswer = document.getElementById('ANSWER_Row@Function.RowNumber~').value;

    Alternatively you could pass the row number into your procedure as an input parameter:

    ValidateCheckNumber(this.id, rowNo) passing @Funtion.RowNumber~ as the second parameter.

    I hope I've interpreted your requirement correctly, if not perhaps you could post part of your script so I can better understand.

    Regards

    Neil

     

    0
  • Jon Walters

    I can't even seem to get to pass the RowNumber either, please see attached my report.

     

    <?xml version="1.0" encoding="utf-8"?>
    <Report
    ID="Default"
    >
    <Body>
    <IncludeScript
    ID="jsValidateInput"
    IncludedScript="function ValidateCheckNumber(id,rowNum)
    {
    alert(&apos;RowNumber:&apos; + rowNum);
     
    var elementID = document.getElementById(id);
    alert(&apos;ElementID:&apos; + elementID.value);
     
    throw(&quot;ERROR&quot;);
    }
     
     
    "
    />
    <ResponsiveRow>
    <ResponsiveColumn>
    <DataTable
    AjaxPaging="True"
    ID="dt-P4"
    KeepScrollPosition="True"
    SortArrows="True"
    Width="100"
    WidthScale="%"
    >
    <DataLayer
    ID="dlsQuestions"
    Type="Static"
    >
    <StaticDataRow
    Answer=""
    DataType="String"
    QuestionNumber="1"
    QuestionText="Name"
    />
    <StaticDataRow
    Answer=""
    DataType="Number"
    QuestionNumber="2"
    QuestionText="Age"
    />
    <StaticDataRow
    Answer=""
    DataType="String"
    QuestionNumber="3"
    QuestionText="Email"
    />
    </DataLayer>
    <DataTableColumn
    Class="ThemeAlignCenter ThemeAlignTop"
    ColumnHeaderClass="ThemeAlignCenter, rdThemeDataTableHeader"
    ID="colQuestionNumber"
    Width="5"
    WidthScale="%"
    >
    <Label
    Caption="@Data.QuestionNumber~  @Function.RowNumber~"
    Class="ThemeBold"
    ID="lblQuestionNumber"
    />
    </DataTableColumn>
    <DataTableColumn
    Header="Question"
    ID="colQuestionText"
    >
    <Label
    Caption="@Data.QuestionText~"
    Format="HTML"
    ID="lblQuestionText"
    />
    </DataTableColumn>
    <DataTableColumn
    Class="ThemeAlignCenter ThemeAlignTop"
    Header="Answer"
    ID="colAnswer"
    Width="15"
    WidthScale="%"
    >
    <InputText
    DefaultValue="@Data.Answer~"
    ID="txtAnswer"
    >
    <Validation
    Class="TextBoxValidate"
    ErrorMsg="There are errors on the Page. {error}"
    JavascriptFunction="ValidateCheckNumber(this.id, @Function.RowNumber~);"
    Type="Javascript"
    />
    </InputText>
    </DataTableColumn>
    </DataTable>
    </ResponsiveColumn>
    </ResponsiveRow>
    <ResponsiveRow>
    <ResponsiveColumn>
    <Label
    Caption="Save Section"
    Class="btn btn-success btn-lg"
    >
    <Action
    ElementID="DivEmpty"
    ID="actRefresh"
    Type="RefreshElement"
    Validate="True"
    />
    </Label>
    </ResponsiveColumn>
    </ResponsiveRow>
    <Division
    ID="DivEmpty"
    />
    </Body>
    <ideTestParams/>
    </Report>

     

    0
  • Neil Quinby

    Hi Jon

    I'm running out of time today to look at this today - let me have a look this evening / tomorrow but I get what you're trying to do. When you hit Save you want each input field validated as not being empty, correct?

    Cheers

    Neil

    0
  • Jon Walters

    I have scaled this down just to attach the code, I have div tags within the answer column depending on the DataType.  I don't want to ensure a value is empty, I just want the ones that require a Numeric input to have this validation.  Validation.Numeric is not working within the DataTable.

    0
  • Neil Quinby

    Hi Jon

    I have a bit of time this afternoon to take a further look at this, can you attach then latest code you allude to in your last comment please.

    Cheers
    Neil

    0
  • Jon Walters
    <?xml version="1.0" encoding="utf-8"?>
    <Report
    ID="Default"
    >
    <Body>
    <IncludeScript
    ID="jsValidateInput"
    IncludedScript="function ValidateCheckNumber(id,rowNum)
    {
    alert(&apos;RowNumber:&apos; + rowNum);
     
    var elementID = document.getElementById(id);
    alert(&apos;ElementID:&apos; + elementID.value);
     
    throw(&quot;ERROR&quot;);
    }
     
     
    "
    />
    <ResponsiveRow>
    <ResponsiveColumn>
    <DataTable
    AjaxPaging="True"
    ID="dt-P4"
    KeepScrollPosition="True"
    SortArrows="True"
    Width="100"
    WidthScale="%"
    >
    <DataLayer
    ID="dlsQuestions"
    Type="Static"
    >
    <StaticDataRow
    Answer=""
    DataType="String"
    QuestionNumber="1"
    QuestionText="Name"
    />
    <StaticDataRow
    Answer=""
    DataType="Number"
    QuestionNumber="2"
    QuestionText="Age"
    />
    <StaticDataRow
    Answer=""
    DataType="String"
    QuestionNumber="3"
    QuestionText="Email"
    />
    </DataLayer>
    <DataTableColumn
    Class="ThemeAlignCenter ThemeAlignTop"
    ColumnHeaderClass="ThemeAlignCenter, rdThemeDataTableHeader"
    ID="colQuestionNumber"
    Width="5"
    WidthScale="%"
    >
    <Label
    Caption="@Data.QuestionNumber~  @Function.RowNumber~"
    Class="ThemeBold"
    ID="lblQuestionNumber"
    />
    </DataTableColumn>
    <DataTableColumn
    Header="Question"
    ID="colQuestionText"
    >
    <Label
    Caption="@Data.QuestionText~"
    Format="HTML"
    ID="lblQuestionText"
    />
    </DataTableColumn>
    <DataTableColumn
    Class="ThemeAlignCenter ThemeAlignTop"
    Header="Answer"
    ID="colAnswer"
    Width="15"
    WidthScale="%"
    >
    <InputText
    DefaultValue="@Data.Answer~"
    ID="txtAnswer"
    >
    <Validation
    Class="TextBoxValidate"
    ErrorMsg="There are errors on the Page. {error}"
    JavascriptFunction="ValidateCheckNumber(this.id, @Data.QuestionNumber~);"
    Type="Javascript"
    />
    </InputText>
    </DataTableColumn>
    </DataTable>
    </ResponsiveColumn>
    </ResponsiveRow>
    <ResponsiveRow>
    <ResponsiveColumn>
    <Label
    Caption="Save Section"
    Class="btn btn-success btn-lg"
    >
    <Action
    ElementID="DivEmpty"
    ID="actRefresh"
    Type="RefreshElement"
    Validate="True"
    />
    </Label>
    </ResponsiveColumn>
    </ResponsiveRow>
    <Division
    ID="DivEmpty"
    />
    </Body>
    <ideTestParams/>
    </Report>

     

    0
  • Jon Walters

    If I can get the either the elementID or the RowNumber into the JavaScript function I will be able to manipulate this to fire the validation.

    0
  • Jon Walters

    sorry this is the amended code with the toggle of data types:

    <ResponsiveRow>
                <ResponsiveColumn>
                    <DataTable
                        AjaxPaging="True"
                        ID="dt-P4"
                        KeepScrollPosition="True"
                        SortArrows="True"
                        Width="100"
                        WidthScale="%"
                        >
                        <DataLayer
                            ID="dlsQuestions"
                            Type="Static"
                            >
                            <StaticDataRow
                                Answer=""
                                DataType="String"
                                QuestionNumber="1"
                                QuestionText="Name"
                            />
                            <StaticDataRow
                                Answer=""
                                DataType="Number"
                                QuestionNumber="2"
                                QuestionText="Age"
                            />
                            <StaticDataRow
                                Answer=""
                                DataType="String"
                                QuestionNumber="3"
                                QuestionText="Email"
                            />
                        </DataLayer>
                        <DataTableColumn
                            Class="ThemeAlignCenter ThemeAlignTop"
                            ColumnHeaderClass="ThemeAlignCenter, rdThemeDataTableHeader"
                            ID="colQuestionNumber"
                            Width="5"
                            WidthScale="%"
                            >
                            <Label
                                Caption="@Data.QuestionNumber~  @Function.RowNumber~"
                                Class="ThemeBold"
                                ID="lblQuestionNumber"
                            />
                        </DataTableColumn>
                        <DataTableColumn
                            Header="Question"
                            ID="colQuestionText"
                            >
                            <Label
                                Caption="@Data.QuestionText~"
                                Format="HTML"
                                ID="lblQuestionText"
                            />
                        </DataTableColumn>
                        <DataTableColumn
                            Class="ThemeAlignCenter ThemeAlignTop"
                            Header="Answer"
                            ID="colAnswer"
                            Width="15"
                            WidthScale="%"
                            >
                            <Division
                                Condition="&quot;@Data.DataType~&quot; = &quot;String&quot;"
                                ID="String"
                                >
                                <InputText
                                    DefaultValue="@Data.Answer~"
                                    ID="txtAnswer"
                                />
                                <Label
                                    Caption="STRING"
                                />
                            </Division>
                            <Division
                                Condition="&quot;@Data.DataType~&quot; = &quot;Number&quot;"
                                ID="Number"
                                >
                                <InputText
                                    DefaultValue="@Data.Answer~"
                                    ID="txtAnswer"
                                    >
                                    <Validation
                                        Class="TextBoxValidate"
                                        ErrorMsg="There are errors on the Page. {error}"
                                        JavascriptFunction="ValidateCheckNumber(this.id, @Data.QuestionNumber~);"
                                        Type="Javascript"
                                    />
                                </InputText>
                                <Label
                                    Caption="NUMBER"
                                />
                            </Division>
                        </DataTableColumn>
                    </DataTable>
                </ResponsiveColumn>
            </ResponsiveRow>
    0
  • Neil Quinby

    Hi Jon

    I had some time to think about this and came up with this as a solution. It doesn't require you to pass the Row number from the table as it finds that itself by counting the rows in the displayed table.

    See if this works for you (I hope it will) and let me know is you have any questions.

    Regards

    Neil

    // This answer presumes you have three columns displayed in your table:
    Col1 - the question number
    Col2 - the question
    Col3 - the input field for the answer
    and a data value of isNumeric returned in the DataLayer which can be used to identify if the answer to the question should be numeric or not.

    function validateAnswers() {
        // Get all of the table rows by using the tr selector within the table
        var rows = document.querySelectorAll("table tr");

        // Loop through each row starting at the second displayed row
        // (this has an index of 1 as JavaScript starts counting at 0)
        // presuming the table has a header row.
        // If it doesn't then change var i = 1; to var i = 0; to start from the first row.
        for (var i = 1; i < rows.length; i++) {
            // Get the cells for the current row
            // This will get all of teh TD values for each row
            var cells = rows[i].querySelectorAll("td");

            // Get the answer from the input field in the third column
            var answer = cells[2].querySelector("input").value;

            // Check if the answer should be numeric
            // This might need some playing with as I don't know how you're holding the flag
            // to say this question requires a numeric answer.
            var isNumeric = '@DataTransfer.isNumeric_Row' + i + '~';

            // If isNumeric is true and the answer goven is not then display an alert
            if (isNumeric && isNaN(answer)) {
                // Display an alert if the answer isn't numeric
                alert("Question " + cells[0].innerText + " must have a numeric answer only. Please correct and try again.")
                // Exit the loop
                return false;
            }
        }
        // If all the answers are valid return true
        return true;
    }
    0
  • VISUI

    The easiest way to pass the id of an input into a function is to use jQuery.

    validateCheckNumber($(this).attr('id'));

    This will pass the id of the input calling the function

    function validateCheckNumber(e) {
        console.log(e);
        console.log($('#'+e).val());
    }

    This function will return the 'id' to the console as well as the current value.

    The report would look like this where each input specifically calls the function.

    <Report ID="LogiForum.jquer-validation">
      <IncludeScriptFile IncludedScriptFile="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" />
      <Body>
        <DataTable ID="dt1">
          <DataTableColumn>
            <InputText ID="inptext01">
              <EventHandler DhtmlEvent="onkeyup">
                <Action Type="Javascript" Javascript="validateCheckNumber($(this).attr('id'));" />
              </EventHandler>
            </InputText>
          </DataTableColumn>
          <DataLayer Type="Static">
            <StaticDataRow row="1" />
            <StaticDataRow row="2" />
            <StaticDataRow row="3" />
            <StaticDataRow row="4" />
          </DataLayer>
        </DataTable>
        <IncludeScript IncludedScript="function validateCheckNumber(e) {&#xD;&#xA;    console.log(e);&#xD;&#xA;    console.log($('#'+e).val());&#xD;&#xA;}&#xD;&#xA;" />
      </Body>
    </Report>

     

    You could also use a selector to bind the function to each input (ie. apply a non-existent css class to your input element or select all inputs within the table), then iterate through the objects and bind the keyup (or other event) that way.

    function validateCheckNumber(e) {
    console.log(e);
    console.log($('#'+e).val());
    }

    $('.validate').each(function() {
    $(this).keyup(function() {
    validateCheckNumber($(this).attr('id'));
    });
    });


    So your report then looks like this

     

    <Report ID="LogiForum.jquer-validation">
      <IncludeScriptFile IncludedScriptFile="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" />
      <Body>
        <DataTable ID="dt1">
          <DataTableColumn>
            <InputText ID="inptext01" Class="validate">
            </InputText>
          </DataTableColumn>
          <DataLayer Type="Static">
            <StaticDataRow row="1" />
            <StaticDataRow row="2" />
            <StaticDataRow row="3" />
            <StaticDataRow row="4" />
          </DataLayer>
        </DataTable>
        <IncludeScript IncludedScript="function validateCheckNumber(e) {&#xD;&#xA;    console.log(e);&#xD;&#xA;    console.log($('#'+e).val());&#xD;&#xA;}&#xD;&#xA;&#xD;&#xA;$('.validate').each(function() {&#xD;&#xA;    $(this).keyup(function() {&#xD;&#xA;        validateCheckNumber($(this).attr('id'));&#xD;&#xA;    });&#xD;&#xA;});" />
      </Body>
    </Report>



    0
  • VISUI

    Actually with the final method you don't even need to iterate over each element.  you can just apply it globally to that css class or other selector:

     

    function validateCheckNumber(e) {
        console.log(e);
        console.log($('#'+e).val());
    }

    $('.validate').keyup(function() {
     validateCheckNumber($(this).attr('id'));
    });

    Or to select all inputs within a table

     

    $('#dt1 tbody input').keyup(function() {
     validateCheckNumber($(this).attr('id'));
    });

     

    0
  • Neil Quinby
    Hi Jon
    I had a thought about how you might do this and was about to post this when our friends from VISUI posted their answer. I guess these are 2 separate approaches, theirs validates each input as it's entered, this one validates all of the answers once submitted. Two different ways of doing things although at this point my money would be on theirs, validate as the answer as input so you know you're always submitting valid answers. Anyway, here you go with a block submission validation:
     
    This answer presumes you have three columns displayed in your table and a data value of isNumeric returned in the DataLayer which can be used to identify if the answer to the question should be numeric or not

     

    function validateAnswers() {
        // Get all of the table rows by using the tr selector within the table
        var rows = document.querySelectorAll("table tr");

     

        // Loop through each row starting at the second displayed row
        // (this has an index of 1 as JavaScript starts counting at 0)
        // presuming the table has a header row.
        // If it doesn't then change var i = 1; to var i = 0; to start from the first row.
        for (var i = 1; i < rows.length; i++) {
            // Get the cells for the current row
            // This will get all of teh TD values for each row
            var cells = rows[i].querySelectorAll("td");

     

            // Get the answer from the input field in the third column
            var answer = cells[2].querySelector("input").value;

     

            // Check if the answer should be numeric
            // This might need some playing with as I don't know how you're holding the flag
            // to say this question requires a numeric answer.
            var isNumeric = '@DataTransfer.isNumeric_Row' + i + '~';

     

            // If isNumeric is true and the answer goven is not then display an alert
            if (isNumeric && isNaN(answer)) {
                // Display an alert if the answer isn't numeric
                alert("Question " + cells[0].innerText + " must have a numeric answer only. Please correct and try again.")
                // Exit the loop
                return false;
            }
        }
        // If all the answers are valid return true
        return true;
    }
    0
  • VISUI

    And finally adding an "invalid" css class to inputs that contain nonnumeric values.


    function validateCheckNumber(e) {
    if ($.isNumeric($('#'+e).val())) {
    $('#'+e).removeClass('invalid');
    }
    else {
    $('#'+e).addClass('invalid');
    }
      console.log(e);
      console.log($('#'+e).val());
    }

    $('#dt1 tbody input').keyup(function() {
    validateCheckNumber($(this).attr('id'));
    });

     

    <Report ID="LogiForum.jquer-validation">
      <IncludeScriptFile IncludedScriptFile="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" />
      <Body>
        <IncludeHtml Html="&lt;style&gt;&#xD;&#xA;    .invalid, .invalid:focus {&#xD;&#xA;        border: 2px solid red !important;&#xD;&#xA;        outline: none;&#xD;&#xA;    }&#xD;&#xA;&lt;/style&gt;" />
        <DataTable ID="dt1">
          <DataTableColumn>
            <InputText ID="inptext01" Class="validate" />
          </DataTableColumn>
          <DataLayer Type="Static">
            <StaticDataRow row="1" />
            <StaticDataRow row="2" />
            <StaticDataRow row="3" />
            <StaticDataRow row="4" />
          </DataLayer>
        </DataTable>
        <IncludeScript IncludedScript="function validateCheckNumber(e) {&#xD;&#xA;    if ($.isNumeric($('#'+e).val())) {&#xD;&#xA;        $('#'+e).removeClass('invalid');&#xD;&#xA;    }&#xD;&#xA;    else {&#xD;&#xA;        $('#'+e).addClass('invalid');&#xD;&#xA;    }&#xD;&#xA;    console.log(e);&#xD;&#xA;    console.log($('#'+e).val());&#xD;&#xA;}&#xD;&#xA;&#xD;&#xA;$('#dt1 tbody input').keyup(function() {&#xD;&#xA; validateCheckNumber($(this).attr('id'));&#xD;&#xA;});" />
      </Body>
    </Report>

    0
  • Jon Walters

    Thank you both comments, I now have a working solution so thank you.  I have incorporated both, so I have the JavaScript validation for the validation when trying to save the datatable and then also the onkeyup event to add css on error/text change.

    With the VISUI solution how do I prevent the process/refresh from running when clicked when there are errors?

    0
  • VISUI

    I typically don't use the Action.Process element, but instead grab the respective javascript to submit a process or use ajax to submit the process asynchronously without leaving the current page.

    In this example the javascript contains an outer if -else which uses a jquery selector to count the number of elements with the 'invalid' class

    if ($('.invalid').length > 0) {
    //code
    return false;
    }

    The 'return false' breaks out of the javascript and returns false.

    the 'else' statement then submits the process


    else {
        $('#AlertScheduler').hide();
        RunProcess('<rdProcessAction><Action ID="actproc" Process="myProcessFile" TaskID="myTaskID" Type="Process" rdIdeIdx="8"><WaitPage Caption="Please Wait" rdIdeIdx="9" \x2f><\x2fAction><\x2frdProcessAction>','false','','','{"async":true,"syncServer":true,"isGlobal":false,"waitMessage":"Please Wait","waitClass":"","waitCaptionClass":""}');
    }

     

    <Report ID="LogiForum.jquer-validation">
      <IncludeScriptFile IncludedScriptFile="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" />
      <Body>
        <IncludeHtml Html="&lt;style&gt;&#xD;&#xA;    .invalid, .invalid:focus {&#xD;&#xA;        border: 2px solid red !important;&#xD;&#xA;        outline: none;&#xD;&#xA;    }&#xD;&#xA;&lt;/style&gt;" />
        <HtmlTag HtmlTagName="div" ID="AlertScheduler">
          <Label Caption="Highlighted inputs require numeric values." HtmlTag="h3" />
          <HtmlAttributeParams style="display: none;" />
        </HtmlTag>
        <DataTable ID="dt1">
          <DataTableColumn>
            <InputText Class="validate" ID="inptext01" />
          </DataTableColumn>
          <DataLayer Type="Static">
            <StaticDataRow row="1" />
            <StaticDataRow row="2" />
            <StaticDataRow row="3" />
            <StaticDataRow row="4" />
          </DataLayer>
        </DataTable>
        <IncludeScript IncludedScript="function validateCheckNumber(e) {&#xD;&#xA;    if ($.isNumeric($('#'+e).val())) {&#xD;&#xA;        $('#'+e).removeClass('invalid');&#xD;&#xA;    }&#xD;&#xA;    else {&#xD;&#xA;        $('#'+e).addClass('invalid');&#xD;&#xA;    }&#xD;&#xA;    console.log(e);&#xD;&#xA;    console.log($('#'+e).val());&#xD;&#xA;}&#xD;&#xA;&#xD;&#xA;$('#dt1 tbody input').keyup(function() {&#xD;&#xA; validateCheckNumber($(this).attr('id'));&#xD;&#xA;});" />
        <Button ID="btnSubmit" Caption="Submit">
          <Action Type="Javascript" Javascript="if ($('.invalid').length &gt; 0) {&#xD;&#xA;    $('#AlertScheduler').show();&#xD;&#xA;    $(&quot;input.invalid&quot;).first().focus();&#xD;&#xA;    return false;&#xD;&#xA;}&#xD;&#xA;else {&#xD;&#xA;    $('#AlertScheduler').hide();&#xD;&#xA;    RunProcess('&lt;rdProcessAction&gt;&lt;Action ID=&quot;actproc&quot; Process=&quot;myProcessFile&quot; TaskID=&quot;myTaskID&quot; Type=&quot;Process&quot; rdIdeIdx=&quot;8&quot;&gt;&lt;WaitPage Caption=&quot;Please Wait&quot; rdIdeIdx=&quot;9&quot; \x2f&gt;&lt;\x2fAction&gt;&lt;\x2frdProcessAction&gt;','false','','','{&quot;async&quot;:true,&quot;syncServer&quot;:true,&quot;isGlobal&quot;:false,&quot;waitMessage&quot;:&quot;Please Wait&quot;,&quot;waitClass&quot;:&quot;&quot;,&quot;waitCaptionClass&quot;:&quot;&quot;}');&#xD;&#xA;}" />
        </Button>
      </Body>
    </Report>

     

    Another option is to simply have your main validation javascript disable the Submit button until all validation is met.

    Please note that in this example I have added the condition test isNumeric OR the value is blank.  Disregard this if all inputs must have a value.


    function validateCheckNumber(e) {

    if ($.isNumeric($('#'+e).val()) || $('#'+e).val() == '') {
    $('#'+e).removeClass('invalid');
    $('#btnSubmit').prop("disabled",false);
    }
    else {
    $('#'+e).addClass('invalid');
    $('#btnSubmit').prop("disabled",true);
    }
      console.log(e);
      console.log($('#'+e).val());
    }




    $('#dt1 tbody input').keyup(function() {

     validateCheckNumber($(this).attr('id'));

    });

     

    <Report ID="LogiForum.jquer-validation">
      <IncludeScriptFile IncludedScriptFile="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" />
      <Body>
        <IncludeHtml Html="&lt;style&gt;&#xD;&#xA;    .invalid, .invalid:focus {&#xD;&#xA;        border: 2px solid red !important;&#xD;&#xA;        outline: none;&#xD;&#xA;    }&#xD;&#xA;&lt;/style&gt;" />
        <HtmlTag HtmlTagName="div" ID="AlertScheduler">
          <Label Caption="Highlighted inputs require numeric values." HtmlTag="h3" />
          <HtmlAttributeParams style="display: none;" />
        </HtmlTag>
        <DataTable ID="dt1">
          <DataTableColumn>
            <InputText Class="validate" ID="inptext01" />
          </DataTableColumn>
          <DataLayer Type="Static">
            <StaticDataRow row="1" />
            <StaticDataRow row="2" />
            <StaticDataRow row="3" />
            <StaticDataRow row="4" />
          </DataLayer>
        </DataTable>
        <IncludeScript IncludedScript="function validateCheckNumber(e) {&#xD;&#xA;    if ($.isNumeric($('#'+e).val()) || $('#'+e).val() == '') {&#xD;&#xA;        $('#'+e).removeClass('invalid');&#xD;&#xA;        $('#btnSubmit').prop(&quot;disabled&quot;,false);&#xD;&#xA;    }&#xD;&#xA;    else {&#xD;&#xA;        $('#'+e).addClass('invalid');&#xD;&#xA;        $('#btnSubmit').prop(&quot;disabled&quot;,true);&#xD;&#xA;    }&#xD;&#xA;    console.log(e);&#xD;&#xA;    console.log($('#'+e).val());&#xD;&#xA;}&#xD;&#xA;&#xD;&#xA;$('#dt1 tbody input').keyup(function() {&#xD;&#xA; validateCheckNumber($(this).attr('id'));&#xD;&#xA;});" />
        <Button ID="btnSubmit" Caption="Submit">
          <Action Type="Javascript" Javascript="if ($('.invalid').length &gt; 0) {&#xD;&#xA;    $('#AlertScheduler').show();&#xD;&#xA;    $(&quot;input.invalid&quot;).first().focus();&#xD;&#xA;    return false;&#xD;&#xA;}&#xD;&#xA;else {&#xD;&#xA;    $('#AlertScheduler').hide();&#xD;&#xA;    RunProcess('&lt;rdProcessAction&gt;&lt;Action ID=&quot;actproc&quot; Process=&quot;myProcessFile&quot; TaskID=&quot;myTaskID&quot; Type=&quot;Process&quot; rdIdeIdx=&quot;8&quot;&gt;&lt;WaitPage Caption=&quot;Please Wait&quot; rdIdeIdx=&quot;9&quot; \x2f&gt;&lt;\x2fAction&gt;&lt;\x2frdProcessAction&gt;','false','','','{&quot;async&quot;:true,&quot;syncServer&quot;:true,&quot;isGlobal&quot;:false,&quot;waitMessage&quot;:&quot;Please Wait&quot;,&quot;waitClass&quot;:&quot;&quot;,&quot;waitCaptionClass&quot;:&quot;&quot;}');&#xD;&#xA;}" />
        </Button>
      </Body>
    </Report>

     

    0
  • Jon Walters

    thank you both so much for your help with this.  I have integrated both methods.

    0
  • Neil Quinby

    Glad to help :-)

    0

Please sign in to leave a comment.