This is a migrated thread and some comments may be shown as answers.

Validate group of text boxes to see if ANY contain data

5 Answers 451 Views
Validation
This is a migrated thread and some comments may be shown as answers.
Brad
Top achievements
Rank 1
Brad asked on 12 Apr 2017, 03:57 PM

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");
    });

5 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 17 Apr 2017, 07:22 AM
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.
0
Brad
Top achievements
Rank 1
answered on 17 Apr 2017, 03:30 PM

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");

 

 

});

 

 

 

0
Konstantin Dikov
Telerik team
answered on 19 Apr 2017, 07:07 AM
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.
0
Brad
Top achievements
Rank 1
answered on 20 Apr 2017, 12:52 AM
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?
0
Konstantin Dikov
Telerik team
answered on 21 Apr 2017, 11:59 AM
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.
Tags
Validation
Asked by
Brad
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Brad
Top achievements
Rank 1
Share this question
or