Kendo ui grid - La même règle de validation personnalisée ne fonctionne pas pour plusieurs champs lors de l'utilisation du modèle de formulaire contextuel add/edit

Question

J'utilise un modèle personnalisé pour le formulaire contextuel Grid Add/Edit.

Voici mon DEMO.

Dans ma forme de pop-up, j'ai deux champs de code postal ayant nommé postcode1 et postcode2 et les deux doivent être validées en utilisant une règle de validation personnaliséepostalCode.

Maintenant, le problème est, si j'applique la même règle de validation personnalisée postalCode sur les deux champs, la validation ne fonctionne que pour le champ de saisie postcode2 et la validation pour le champ de saisie postcode1 arrêts de travail.

Cependant, pour le champ de saisie postcode2, si je change le nom de la règle de validation personnalisée postalCode-postalCode2, la validation commence à travailler pour les deux champs. A partir de là, j'ai appris que l'utilisation de la même règle de validation personnalisée sur plusieurs champs cause des problèmes.

Est-ce que quelqu'un sait comment créer une règle de validation personnalisée qui peut être appliquée à plusieurs champs?

Toute aide serait grandement appréciée! Merci.

est Ci-dessous le code de mon js violon démonstration:

HTML:

<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> 

JS:

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

}); 

Answer 1

Pour ce faire, je mis au rebut l'idée en utilisant la validation à l'intérieur model champs. Au lieu de cela, j'ai utilisé Kendo Validator et joint le validateur de formulaire au formulaire contextuel.

Voici mon DEMO

Voici mon code de la démo:

JS:

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

}); 

HTML:

<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>