Validate group of text boxes to see if ANY contain data

6 posts, 0 answers
  1. Brad
    Brad avatar
    3 posts
    Member since:
    May 2016

    Posted 12 Apr Link to this post

    I have multiple text boxes where users can enter search parameters to query an Oracle database to return data to a grid. I ham having a hard time validating these text boxes as a group. By group I mean that I want to make sure that at least 1 text box has data in it. If I dont, the user could potentially bring back 16 million records. This obviously will take a while and I cant have that. I have tried about 5 different ways to do this. I can validate each field but i cant move on because each field is requiring something. Again, I want to check and make sure that at least one of the 9 text boxes has something in it. I apologize the mess of the validation code. has mixes of a few different ways I was trying.  

    The attached photo shows that my current way of thinking is wrong.  Since there is a value in one text box, the rest of the validations should technically be true and it should move on to the next step - populating a data grid.

    code body:

        <div class="col-lg-12 col-md-12">
        <div class="panel panel-primary" style="margin-top:5px;" id="CustHistSearchPanel">
            <div class="panel-heading">
                <h3 class="panel-title"  id="collapseAll" data-toggle="collapse" data-target="#collapsePanelCustHist" href="#collapsePanelCustHist">
                    Customer History
                </h3>
            </div>
            <div id="collapsePanelCustHist" class="panel-collapse collapse in">
                <div class="panel-body" id="CustHistSearchPanelBody">
                    <form id="CustHistForm"  data-role="validator" novalidate="novalidate">
                        <div class="col-lg-12 col-md-12">
                            <div class="col-lg-3 col-md-3">
                                <div class="form-group">
                                    <label for="acctNum">Account Number</label>
                                    @Html.TextBox("acctnum", "",
                                new
                                {
                                    @class = "form-control formElements",
                                    @id = "acctNum"
                                })
                                    <label for="premiseNum">Premise Number</label>
                                    @Html.TextBox("premisenumber", "",
                                new
                                {
                                    @class = "form-control formElements",
                                    @id = "premiseNum"
                                })
                                    <label for="timeFrame" class="control-label">Timeframe</label><br />
                                    @Html.RadioButton("timeframe", "1", new { @type = "radio", @class = "formElements", @id = "ALL" }) All&nbsp;&nbsp;
                                    @Html.RadioButton("timeframe", "2", new { @type = "radio", @class = "formElements", @id = "LAST5" }) Last 5 Years&nbsp;&nbsp;
                                    @Html.RadioButton("timeframe", "3", new { @type = "radio", @class = "formElements", @id = "YTD" }) YTD&nbsp;&nbsp;
                                    @Html.RadioButton("timeframe", "4", new { @type = "radio", @class = "formElements", @id = "MTD", @checked = "checked" }) MTD&nbsp;&nbsp;
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3">
                                <div class="form-group">
                                    <label for="busLastName">Bus/Last Name</label>
                                    @Html.TextBox("buslastname", "",
                                new
                                {
                                    @class = "form-control formElements",
                                    @id = "busLastName"
                                })
                                    <label for="firstName">First Name</label>
                                    @Html.TextBox("firstname", "",
                                new
                                {
                                    @class = "form-control formElements",
                                    @id = "firstName"
                                })
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3">
                                <div class="form-group">
                                    <label for="houseNum">House Num</label>
                                    @Html.TextBox("housenum", "",
                                new
                                {
                                    @class = "form-control formElements",
                                    @id = "houseNum"
                                })
                                    <label for="street">Street</label>
                                    @Html.TextBox("street", "",
                                new
                                {
                                    @class = "form-control formElements",
                                    @id = "street"
                                })
                                    <label for="cityState">City, State</label>
                                    @Html.TextBox("citystate", "",
                                new
                                {
                                    @class = "form-control formElements",
                                    @id = "cityState"
                                })
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3">
                                <div class="form-group">
                                    <label for="homePhone1">Home Phone</label>
                                    @Html.TextBox("homephone", "",
                                new
                                {
                                    @class = "form-control formElements",
                                    @id = "homePhone",
                                    @type = "text"
                                })
                                    <label for="contactPhone">Contact Phone</label>
                                    @Html.TextBox("contactphone", "",
                                new
                                {
                                    @class = "form-control formElements",
                                    @id = "contactPhone"
                                })
                                </div>
                            </div>
                        </div>
                    </form>

     

    Validation code:

    $(function () {
            var formContainer = $("#CustHistForm");
            kendo.init(formContainer);
            formContainer.kendoValidator(
                {
                    rules:
                        {
                            customRule: function (input)
                                {
                                var isValid = true;
                                var count = 0;
                                    $('input[type="text"]').each(function ()
                                        {
                                            if ($.trim($(this).val()) == '')
                                                {
                                                    isValid = false;
                                                    $(this).css(
                                                        {
                                                            "border": "1px solid red",
                                                            "background": "#FFCECE"
                                                        });
                                                    count = count + 0;
                                                }
                                            else
                                            {
                                                count = count + 1
                                                isValid = false;
                                                    $(this).css(
                                                        {
                                                            "border": "",
                                                            "background": ""
                                                        });
                                                }       
                                        })
                                    {
                                        if (count > 0) {
                                            isValid = true;
                                        }
                                        isValid = input.val().match(/^\S+$/) != null;
                                        console.log("[name2=" + input.attr("name") + ']  ' + isValid + '   ' + count);
                                        }
                                    return isValid;
                                    console.log(isValid);
                                }
                        },
                            messages:
                                {
                                    customRule: "At least one field must contain data."
                                }
                }).data("kendoValidator");
        });

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2087 posts

    Posted 17 Apr Link to this post

    Hi Brad,

    You could try the following logic in the custom rule for validating all input elements:
    var count = 0;
    var isValid = false;
    $('input[type="text"]').each(function () {
        if ($.trim($(this).val()) != '') {                                                      
            count = count + 1;
        }
    })
    if (count > 0) {
        isValid = true;
        $('input[type="text"]').css(
                      {
                          "border": "",
                          "background": ""
                      });
    }
    else {
        $('input[type="text"]').css(
                      {
                          "border": "1px solid red",
                          "background": "#FFCECE"
                      });
    }
     
    console.log("[name2=" + input.attr("name") + ']  ' + isValid + '   ' + count);
    return isValid;

    Please give this a try and see if everything works as expected.


    Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Brad
    Brad avatar
    3 posts
    Member since:
    May 2016

    Posted 17 Apr in reply to Konstantin Dikov Link to this post

    I tried the following and it did not seem to work.  When I click on my sumbit button the application runs the query.  It should validate and say there must be at least one field with data in it.  But it does not.  Did I miss something?

     

    $(function () {

    var formContainer = $("#CustHistForm");

     

     

    kendo.init(formContainer);

    formContainer.kendoValidator(

    {

    rules:

    {

     

    customRule: function (input) {

    var count = 0;

    var isValid = false;

    $('input[type="text"]').each(function () {

    if ($.trim($(this).val()) != '') {

     

     

    count = count + 1;

     

    console.log('a ' + count)

     

     

    }

    })

     

    if (count > 0) {

    isValid = true;

    console.log('b ' + count)

    $('input[type="text"]').css(

     

     

    {

     

    "border": "",

    "background": ""

     

     

    });

    }

     

    else {

    console.log('c ' + count)

    $('input[type="text"]').css(

     

     

    {

     

    "border": "1px solid red",

    "background": "#FFCECE"

     

     

    });

    }

     

    console.log("[name2=" + input.attr("name") + '] ' + isValid + ' ' + count);

    return isValid;

     

     

    }

    },

    messages:

    {

     

    customRule: "At least one field must contain data."

     

     

    }

     

    }).data("kendoValidator");

     

     

    });

     

     

     

  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2087 posts

    Posted 19 Apr Link to this post

    Hi Brad,

    Placing a submit button within the form initiates the validation on my side:
    <div class="col-lg-12 col-md-12">
        <div class="panel panel-primary" style="margin-top:5px;" id="CustHistSearchPanel">
            <div class="panel-heading">
                <h3 class="panel-title"  id="collapseAll" data-toggle="collapse" data-target="#collapsePanelCustHist" href="#collapsePanelCustHist">
                    Customer History
                </h3>
            </div>
            <div id="collapsePanelCustHist" class="panel-collapse collapse in">
                <div class="panel-body" id="CustHistSearchPanelBody">
                    <form id="CustHistForm"  data-role="validator" novalidate="novalidate">
                        <div class="col-lg-12 col-md-12">
                            <div class="col-lg-3 col-md-3">
                                <div class="form-group">
                                    <label for="acctNum">Account Number</label>
                                    @Html.TextBox("acctnum", "",
                                new
                                {
                                    @class = "form-control formElements",
                                    @id = "acctNum"
                                })
                                    <label for="premiseNum">Premise Number</label>
                                    @Html.TextBox("premisenumber", "",
                                new
                                {
                                    @class = "form-control formElements",
                                    @id = "premiseNum"
                                })
                                    <label for="timeFrame" class="control-label">Timeframe</label><br />
                                    @Html.RadioButton("timeframe", "1", new { @type = "radio", @class = "formElements", @id = "ALL" }) All  
                                    @Html.RadioButton("timeframe", "2", new { @type = "radio", @class = "formElements", @id = "LAST5" }) Last 5 Years  
                                    @Html.RadioButton("timeframe", "3", new { @type = "radio", @class = "formElements", @id = "YTD" }) YTD  
                                    @Html.RadioButton("timeframe", "4", new { @type = "radio", @class = "formElements", @id = "MTD", @checked = "checked" }) MTD  
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3">
                                <div class="form-group">
                                    <label for="busLastName">Bus/Last Name</label>
                                    @Html.TextBox("buslastname", "",
                                new
                                {
                                    @class = "form-control formElements",
                                    @id = "busLastName"
                                })
                                    <label for="firstName">First Name</label>
                                    @Html.TextBox("firstname", "",
                                new
                                {
                                    @class = "form-control formElements",
                                    @id = "firstName"
                                })
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3">
                                <div class="form-group">
                                    <label for="houseNum">House Num</label>
                                    @Html.TextBox("housenum", "",
                                new
                                {
                                    @class = "form-control formElements",
                                    @id = "houseNum"
                                })
                                    <label for="street">Street</label>
                                    @Html.TextBox("street", "",
                                new
                                {
                                    @class = "form-control formElements",
                                    @id = "street"
                                })
                                    <label for="cityState">City, State</label>
                                    @Html.TextBox("citystate", "",
                                new
                                {
                                    @class = "form-control formElements",
                                    @id = "cityState"
                                })
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3">
                                <div class="form-group">
                                    <label for="homePhone1">Home Phone</label>
                                    @Html.TextBox("homephone", "",
                                new
                                {
                                    @class = "form-control formElements",
                                    @id = "homePhone",
                                    @type = "text"
                                })
                                    <label for="contactPhone">Contact Phone</label>
                                    @Html.TextBox("contactphone", "",
                                new
                                {
                                    @class = "form-control formElements",
                                    @id = "contactPhone"
                                })
                                </div>
                            </div>
                        </div>
                        <input type="submit" name="name" value="submit" />
                    </form>
                   
                  <script>
                      $(function () {
                          var formContainer = $("#CustHistForm");
                          kendo.init(formContainer);
                          formContainer.kendoValidator(
                              {
                                  rules:
                                      {
                                          customRule: function (input) {
                                              var count = 0;
                                              var isValid = false;
                                              $('input[type="text"]').each(function () {
                                                  if ($.trim($(this).val()) != '') {
     
     
                                                      count = count + 1;
     
                                                      console.log('a ' + count)
     
     
                                                  }
                                              })
     
                                              if (count > 0) {
                                                  isValid = true;
                                                  console.log('b ' + count)
                                                  $('input[type="text"]').css(
     
     
                                                  {
     
                                                      "border": "",
                                                      "background": ""
     
     
                                                  });
                                              }
     
                                              else {
                                                  console.log('c ' + count)
                                                  $('input[type="text"]').css(
     
     
                                                  {
     
                                                      "border": "1px solid red",
                                                      "background": "#FFCECE"
     
     
                                                  });
                                              }
     
                                              console.log("[name2=" + input.attr("name") + '] ' + isValid + ' ' + count);
                                              return isValid;
                                          }
                                      },
                                  messages:
                                      {
                                          customRule: "At least one field must contain data."
                                      }
                              }).data("kendoValidator");
                      });
                  </script>

    However, note that the error message will be displayed for all input elements, because the validation will be performed for each one of them.


    Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Brad
    Brad avatar
    3 posts
    Member since:
    May 2016

    Posted 19 Apr in reply to Konstantin Dikov Link to this post

    I will give this a shot tomorrow but just to be clear, there is no way to check to see if the ANY of the text boxes have at least a character in them but only show one validation message ofr them all?
  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2087 posts

    Posted 21 Apr Link to this post

    Hello Brad,

    You could take a look at the approach demonstrated in the following HowTo article, where a single message is displayed:

    Best Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top