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
@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>
</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
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
Rank 1
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");
});
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
Rank 1
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