Validating in DoneJS

1

Can someone please point me to a clue about how to execute form validation in the DoneJS mode?

Thanks.

2

Do you had a look into https://github.com/canjs/can-validate ?

3

Thanks for the suggestion. I ended up writing my own.

4

Tqwhite, are you able to share your implementation? I’m looking into doing validation also.

5

Sorry it’s been so long.

I didn’t do anything terribly complicated. I added a routine to each model called validate().

Screen Shot 2016-11-11 at 10.29.47 AM.png808×575 51.1 KB

My client wants this saved constantly (and the likely user load allows this possibility) so the processing for save is done ‘onChange’ and validates each field as it is entered.

So, you’ll see that I call validate() twice. First time with the name of the field. If no error, then I check the entire data object. If an error is returned, I tell the view model to update itself.

(The setTimeout() allows the DOM to update itself before I write to it again.)

Note also that I format the items in the error list so that they are the same as those that come from the server (eg, ‘user name already taken’). Server errors I detect in the promised return from the model’s AJAX call and update the view model again by updating the errorlList, ie,

this.attr('errorList', {user:[errorObj], domObj:domObj});

Not that I think there is anything special about it, I include the code below.

    validate: function(fieldName) {
        let name;
        const errorList = [];

        const checkValidation = (fieldName) => {
            switch (fieldName) {
                case 'first':
                case 'last':
                case 'username':
                    if (!this.attr(fieldName) || !this.attr(fieldName).length) {
                        errorList.push({
                            fieldName: fieldName,
                            errorText: fieldName + " cannot be empty"
                        });
                    }
                    break;
                case 'emailAddress':
                    if (!this.attr(fieldName) || !this.attr(fieldName).length) {

                        errorList.push({
                            fieldName: fieldName,
                            errorText: fieldName + " cannot be empty"
                        });
                    }
                    if (!this.attr(fieldName) || !this.attr(fieldName).match(/@/)) {

                        errorList.push({
                            fieldName: fieldName,
                            errorText: fieldName + " must be a valid email address"
                        });
                    }            
                    break;
            }
        }

        if (fieldName) {
            checkValidation(fieldName);
        } else {
            ['first', 'last', 'username'].map(checkValidation);
        }
        return errorList;


    }

    //==============================


const changeHandler=function(domObj, event) {
            
            this.viewModel.clearEntryError();

            const fieldName=domObj.attr('fieldName');
            const saveObj=this.viewModel.attr('workingUser');
        
            let errorList=saveObj.validate(fieldName);
            if (errorList.length){
                this.viewModel.showEntryError(domObj, errorList);
                return;
            }
                
            errorList=saveObj.validate();
            if (errorList.length){
                this.viewModel.showIncompleteStatus(domObj, errorList);
                return;
            }


        
            this.viewModel.saveObject(domObj);
        
        };

export default Component.extend({
  tag: 'user-admin-users-editor',
  viewModel: ViewModel,
    events: {
        'input change': changeHandler,
        'textarea change': changeHandler

    },
  template
});
6

Thanks for sharing, I like the approach. I was thinking about trying to implement a validations framework with canjs-validate, but your approach is nice because it is simple.

1 Like