Jquery 剑道ui网格-使用自定义添加/编辑弹出表单模板时，同一自定义验证规则不适用于多个字段
我正在使用网格添加/编辑弹出表单的自定义模板 这是我的名片 在我的弹出表单中，我有两个邮政编码字段，分别命名为Jquery 剑道ui网格-使用自定义添加/编辑弹出表单模板时，同一自定义验证规则不适用于多个字段,jquery,validation,kendo-ui,customvalidator,kendo-validator,Jquery,Validation,Kendo Ui,Customvalidator,Kendo Validator,我正在使用网格添加/编辑弹出表单的自定义模板 这是我的名片 在我的弹出表单中，我有两个邮政编码字段，分别命名为postcode1和postcode2，这两个字段都需要使用自定义验证器规则进行验证 现在的问题是，如果我在两个字段上应用相同的自定义验证规则postalCode，那么验证只对输入字段postcode2有效，而对输入字段postcode1的验证停止工作。 但是，对于输入字段postcode2，如果我将自定义验证规则名称从postalCode更改为postalCode2，则验证将开始对这两
postcode1postcode2postalCodepostcode2postcode1postcode2postalCodepostalCode2<div id="grid"></div>
<script type="text/html" id="popup_editor_template">
<div>
<h4>In Post Code fields, enter value length less than or greater than 4 to see custom validation error message for postcode</h4>
Address 1 : <input type="text" name="address1" required/> <br/>
Post code 1 : <input type="number" name="postcode1" required data-postalCode-msg="Postal Code must be four digits"
/> <br/><br/>
Address 2 : <input type="text" name="address2" required/> </br>
Post code 2 : <input type="number" name="postcode2" required
data-postalCode-msg="Postal Code must be four digits"
/> <br/>
</div>
</script>
function validatePostalCode(input)
{
//if ( input.is("[data-customPostalCode]") && input.val() )
if (input.val() )
{
console.log("in validatePostalCode: ", input.attr('name'), input.val(), input.val().length);
//if (input.val().length != 4)
if( input.val().length != 4 || ( /\D/.test(input.val()) ) )
return false;
}
return true;
}
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
pageSize: 10,
serverPaging: true,
schema: {
model: {
fields: {
postcode1: {
type: "number",
defaultValue: null,
validation: {
postalCode: function (input) {
console.log('in heree');
if (input.is("[name=postcode1]"))
{
return validatePostalCode(input);
}
return true;
}
}
},
postcode2: {
type: "number",
defaultValue: null,
validation: {
//when changing rule name from "postalCode" to "postalCode2", the validation starts working on both fields
postalCode: function (input) {
console.log('in heree toooo');
if (input.is("[name=postcode2]"))
{
return validatePostalCode(input);
}
return true;
}
}
}
}
}
},
},
height: 800,
pageable: true,
columns: [
"OrderID",
"Freight",
"ShipName",
"ShipCity"
],
toolbar: [
{ name: "create" },
],
editable : {
mode: 'popup',
template: kendo.template($('#popup_editor_template').html())
},
save: function(e) {
alert('Now save');
e.preventDefault();
}
});
var validator;
function validatePostalCode(input)
{
if (input.val() )
{
//console.log("in validatePostalCode: ", input.attr('name'), input.val(), input.val().length);
//if (input.val().length != 4)
if( input.val().length != 4 || ( /\D/.test(input.val()) ) )
return false;
}
return true;
}
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
pageSize: 10,
serverPaging: true,
},
height: 800,
pageable: true,
columns: [
"OrderID",
"Freight",
"ShipName",
"ShipCity"
],
toolbar: [
{ name: "create" },
],
editable : {
mode: 'popup',
template: kendo.template($('#popup_editor_template').html())
},
edit: function(e) {
validator = $("#myform").kendoValidator({
rules: {
postalCode: function (input) {
//console.log('in heree1234');
if (input.is("[name=postcode1]"))
{
return validatePostalCode(input);
}
if (input.is("[name=postcode2]"))
{
return validatePostalCode(input);
}
return true;
}
}
}).data("kendoValidator");
},
save: function(e) {
if (! validator.validate() )
{
alert('Form has some errors, so form submit is prevented');
//var errors = validator.errors();
e.preventDefault();
}
else
{
alert('Form validated successfully. Now save the form data');
e.preventDefault();
}
}
});
<div id="grid"></div>
<script type="text/html" id="popup_editor_template">
<div>
<h4>In Post Code fields, enter value length less than or greater than 4 to see custom validation error message for postcode</h4>
<div id="myform">
Address 1 : <input type="text" name="address1" required/> <br/>
Post code 1 : <input type="number" name="postcode1" required data-postalCode-msg="Postal Code must be four digits"
/> <br/><br/>
Address 2 : <input type="text" name="address2" required/> </br>
Post code 2 : <input type="number" name="postcode2" required
data-postalCode-msg="Postal Code must be four digits"
/> <br/>
</div>
</div>
</script>
为了实现这一点，我放弃了在
modelKendo验证程序<div id="grid"></div>
<script type="text/html" id="popup_editor_template">
<div>
<h4>In Post Code fields, enter value length less than or greater than 4 to see custom validation error message for postcode</h4>
Address 1 : <input type="text" name="address1" required/> <br/>
Post code 1 : <input type="number" name="postcode1" required data-postalCode-msg="Postal Code must be four digits"
/> <br/><br/>
Address 2 : <input type="text" name="address2" required/> </br>
Post code 2 : <input type="number" name="postcode2" required
data-postalCode-msg="Postal Code must be four digits"
/> <br/>
</div>
</script>
function validatePostalCode(input)
{
//if ( input.is("[data-customPostalCode]") && input.val() )
if (input.val() )
{
console.log("in validatePostalCode: ", input.attr('name'), input.val(), input.val().length);
//if (input.val().length != 4)
if( input.val().length != 4 || ( /\D/.test(input.val()) ) )
return false;
}
return true;
}
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
pageSize: 10,
serverPaging: true,
schema: {
model: {
fields: {
postcode1: {
type: "number",
defaultValue: null,
validation: {
postalCode: function (input) {
console.log('in heree');
if (input.is("[name=postcode1]"))
{
return validatePostalCode(input);
}
return true;
}
}
},
postcode2: {
type: "number",
defaultValue: null,
validation: {
//when changing rule name from "postalCode" to "postalCode2", the validation starts working on both fields
postalCode: function (input) {
console.log('in heree toooo');
if (input.is("[name=postcode2]"))
{
return validatePostalCode(input);
}
return true;
}
}
}
}
}
},
},
height: 800,
pageable: true,
columns: [
"OrderID",
"Freight",
"ShipName",
"ShipCity"
],
toolbar: [
{ name: "create" },
],
editable : {
mode: 'popup',
template: kendo.template($('#popup_editor_template').html())
},
save: function(e) {
alert('Now save');
e.preventDefault();
}
});
var validator;
function validatePostalCode(input)
{
if (input.val() )
{
//console.log("in validatePostalCode: ", input.attr('name'), input.val(), input.val().length);
//if (input.val().length != 4)
if( input.val().length != 4 || ( /\D/.test(input.val()) ) )
return false;
}
return true;
}
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
pageSize: 10,
serverPaging: true,
},
height: 800,
pageable: true,
columns: [
"OrderID",
"Freight",
"ShipName",
"ShipCity"
],
toolbar: [
{ name: "create" },
],
editable : {
mode: 'popup',
template: kendo.template($('#popup_editor_template').html())
},
edit: function(e) {
validator = $("#myform").kendoValidator({
rules: {
postalCode: function (input) {
//console.log('in heree1234');
if (input.is("[name=postcode1]"))
{
return validatePostalCode(input);
}
if (input.is("[name=postcode2]"))
{
return validatePostalCode(input);
}
return true;
}
}
}).data("kendoValidator");
},
save: function(e) {
if (! validator.validate() )
{
alert('Form has some errors, so form submit is prevented');
//var errors = validator.errors();
e.preventDefault();
}
else
{
alert('Form validated successfully. Now save the form data');
e.preventDefault();
}
}
});
<div id="grid"></div>
<script type="text/html" id="popup_editor_template">
<div>
<h4>In Post Code fields, enter value length less than or greater than 4 to see custom validation error message for postcode</h4>
<div id="myform">
Address 1 : <input type="text" name="address1" required/> <br/>
Post code 1 : <input type="number" name="postcode1" required data-postalCode-msg="Postal Code must be four digits"
/> <br/><br/>
Address 2 : <input type="text" name="address2" required/> </br>
Post code 2 : <input type="number" name="postcode2" required
data-postalCode-msg="Postal Code must be four digits"
/> <br/>
</div>
</div>
</script>
<div id="grid"></div>
<script type="text/html" id="popup_editor_template">
<div>
<h4>In Post Code fields, enter value length less than or greater than 4 to see custom validation error message for postcode</h4>
Address 1 : <input type="text" name="address1" required/> <br/>
Post code 1 : <input type="number" name="postcode1" required data-postalCode-msg="Postal Code must be four digits"
/> <br/><br/>
Address 2 : <input type="text" name="address2" required/> </br>
Post code 2 : <input type="number" name="postcode2" required
data-postalCode-msg="Postal Code must be four digits"
/> <br/>
</div>
</script>
function validatePostalCode(input)
{
//if ( input.is("[data-customPostalCode]") && input.val() )
if (input.val() )
{
console.log("in validatePostalCode: ", input.attr('name'), input.val(), input.val().length);
//if (input.val().length != 4)
if( input.val().length != 4 || ( /\D/.test(input.val()) ) )
return false;
}
return true;
}
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
pageSize: 10,
serverPaging: true,
schema: {
model: {
fields: {
postcode1: {
type: "number",
defaultValue: null,
validation: {
postalCode: function (input) {
console.log('in heree');
if (input.is("[name=postcode1]"))
{
return validatePostalCode(input);
}
return true;
}
}
},
postcode2: {
type: "number",
defaultValue: null,
validation: {
//when changing rule name from "postalCode" to "postalCode2", the validation starts working on both fields
postalCode: function (input) {
console.log('in heree toooo');
if (input.is("[name=postcode2]"))
{
return validatePostalCode(input);
}
return true;
}
}
}
}
}
},
},
height: 800,
pageable: true,
columns: [
"OrderID",
"Freight",
"ShipName",
"ShipCity"
],
toolbar: [
{ name: "create" },
],
editable : {
mode: 'popup',
template: kendo.template($('#popup_editor_template').html())
},
save: function(e) {
alert('Now save');
e.preventDefault();
}
});
var validator;
function validatePostalCode(input)
{
if (input.val() )
{
//console.log("in validatePostalCode: ", input.attr('name'), input.val(), input.val().length);
//if (input.val().length != 4)
if( input.val().length != 4 || ( /\D/.test(input.val()) ) )
return false;
}
return true;
}
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
pageSize: 10,
serverPaging: true,
},
height: 800,
pageable: true,
columns: [
"OrderID",
"Freight",
"ShipName",
"ShipCity"
],
toolbar: [
{ name: "create" },
],
editable : {
mode: 'popup',
template: kendo.template($('#popup_editor_template').html())
},
edit: function(e) {
validator = $("#myform").kendoValidator({
rules: {
postalCode: function (input) {
//console.log('in heree1234');
if (input.is("[name=postcode1]"))
{
return validatePostalCode(input);
}
if (input.is("[name=postcode2]"))
{
return validatePostalCode(input);
}
return true;
}
}
}).data("kendoValidator");
},
save: function(e) {
if (! validator.validate() )
{
alert('Form has some errors, so form submit is prevented');
//var errors = validator.errors();
e.preventDefault();
}
else
{
alert('Form validated successfully. Now save the form data');
e.preventDefault();
}
}
});
<div id="grid"></div>
<script type="text/html" id="popup_editor_template">
<div>
<h4>In Post Code fields, enter value length less than or greater than 4 to see custom validation error message for postcode</h4>
<div id="myform">
Address 1 : <input type="text" name="address1" required/> <br/>
Post code 1 : <input type="number" name="postcode1" required data-postalCode-msg="Postal Code must be four digits"
/> <br/><br/>
Address 2 : <input type="text" name="address2" required/> </br>
Post code 2 : <input type="number" name="postcode2" required
data-postalCode-msg="Postal Code must be four digits"
/> <br/>
</div>
</div>
</script>
在邮政编码字段中，输入小于或大于4的值长度，以查看邮政编码的自定义验证错误消息
地址1:
邮政编码1:
地址2：
邮政编码2: