Bind validation results from ajax request to form model in mithril

370 Views Asked by At

Hi I would like to bind html inputs with validation response model returned from API like that:

{"userName":[{"memberNames":["UserName"],"errorMessage":"Field User Name is required."}],"acceptTerms":[{"memberNames":["AcceptTerms"],"errorMessage":"Accepting terms is requried"}]}

And my component in mithril

var RegisterPage = {
    vm: {
        userName: m.prop(),
        password: m.prop(),
        confirmPassword: m.prop(),
        acceptTerms: m.prop(false)
    },
    controller: function (args) {
        this.title = 'Register new user account';
        this.vm = RegisterPage.vm;
        this.register = function (e) {
            e.preventDefault();
            apiRequest({ method: "POST", url: "http://localhost:12116/auth/register", data: RegisterPage.vm }).then(RegisterPage.vm.registerResult)
        }
    },
    view: function (ctrl, args) {
        return m('form.input-group',
            [
                m('.input-row', [m('label', 'Email'), m('input[type=email][placeholder=Your email address like [email protected]]', { onchange: m.withAttr("value", ctrl.vm.email) })]),
                m('.input-row', [m('label', 'Password'), m('input[type=password][placeholder=your password]', { onchange: m.withAttr("value", ctrl.vm.password) })]),
                m('.input-row', [m('label', 'Confirm password'), m('input[type=password][placeholder=your password]', { onchange: m.withAttr("value", ctrl.vm.confirmPassword) })]),
                m('.input-row', [m('label', 'Accept terms and conditions'), m('input[type=checkbox]', { onchange: m.withAttr("checked", ctrl.vm.acceptTerms) })]),
                m('button[type=submit].btn btn-positive btn-block', { onclick: ctrl.register }, 'Register account')
            ]);
    }
}

I am looking for some generic solution. I would like to mark invalid fields with css class and add field validation message.

UPDATE In my project I use some wrapper around m.request to get more details when 400 is thrown

function apiRequest(args) {
    NProgress.start();

    if (!args.unwrapError) {
        args.unwrapError = function (data, xhr) {
            if (xhr.status === 401)
            {
                layout.badRequestMsg(xhr.statusText);
            }

            NProgress.done();

            return data;
        }
    }

    if (!args.unwrapSuccess) {
        args.unwrapSuccess = function (data, xhr) {
            NProgress.done();

            return data;
        }
    }

    return m.request(args);
}
0

There are 0 best solutions below