Mutitext field validation

I am trying out a multitext field and ran into a minor issue. I would like to validate that the field contains only email addresses.

If I use webix isEmail, I get the error that this can only be applied to items with names. I have assigned a name, but only to the parent element, not the subConfig items. Not sure how I would do that.

If I use a "rules" function, I can correctly validate all values, but the error only shows on the first entry, no matter which entry contains an error.

In this snippet (https://snippet.webix.com/0d7gw3np), use the switch to display the "Period" and "Covering Manager" fields I would like to be able to validate both field types, but my primary concern is the "Covering Manger" multitext field(s).

Thanks, in advance, for any assistance!

Comments

  • Hello @mvbaxter ,

    With multitext you will need a custom function for validation. It should iterate all the fields, mark them invalid or valid and return the result of validation:

    rules : {
     "coveringMgr": function(val){
          //get all the multitext fields
          var fields = $$(this.elements.coveringMgr).getParentView().getChildViews();
          for(var i = 0; i<fields.length; i++){
            var value = "";
            //get value of the main field
            if(fields[i].config.mode !=="extra"){
              value = fields[i].getValueHere()}
            //get value of the "extra" field
            else  
              value = fields[i].getValue();
            if(!validate_email_address(value)){
              //add red mark if empty
              webix.html.addCss(fields[i].$view, "webix_invalid");
            }
            else
              //remove red mark if filled in
              webix.html.removeCss(fields[i].$view, "webix_invalid");
          }
          //return the result of validation
          return true;
        },
    }
    

    Please, refer to this snippet:
    https://snippet.webix.com/dudjvnfs

  • Thank you for this, but I ran into a small issue with the snippet you provided. I added a variable "allValid", so I could return a boolean that would stop the operation, if any of the fields failed validation.

    https://snippet.webix.com/3mwnqx2v

    Using this example, the first email field (not "Extra") is always marked invalid if any field is invalid, even if its current contents are valid.

    Ex: Using "deb.manager@kp.org", "Mr. Tester", "olga.worker@kp.org" for "coveringMgr" values. When I click "Deb" is marked invalid along with "Mr. Tester".

    Do you know a way around this?

  • Worked out my own answer.

    https://snippet.webix.com/8aip8ev9

    Used "$obj: function(){" in place of "coveringMgr", so returning allValid=FALSE does not reflect on the first coveringMgr entry.

    Also using webix.message to alert users to the error, since these sub-fields cannot have a name attribute, therefore cannot be properly marked invalid or use the "invalidMessage" parameter.

    Thanks again for your help!

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!