How to integrate Jquery.Validator and Smartnotification.js plugin?

Question

My question is this::

How do I integrate Jquery.Validator() messages with the modal windows of the Smartnotification.js plugin? I would like that when the inputs get into the roles of validators of Jquery be displayed a message via Smartnotification.js. I am not able to integrate both to make a validation of Forms - in other words make a standardized "crud".

Follow my example of Smartnotification.js function only if it is called by Jquery.Validator():

function PrintAlert(alert) {
    $.SmartMessageBox({
        title: '<i class="fa fa-lg fa-fw fa-exclamation-triangle"></i> Aviso!',
        content: '<div style="margin:10px 0px 0px 5px;">' + alert + '</div>',
        buttons: '[Voltar]'
    });
}

Jquery.Validator I want to implement for example:

jQuery('.myform').validate({
    rules: {
        password: {
              required: true,
              minlength: 5
        },
        password_confirm: {
              required: true,
              minlength: 5,
              equalTo: "#password"
        }
    }
});

As implement, I tried but when appeared the message of Smartnotification.js even clicking the back button it appears it does not come out understand was on the screen tried to put return (false) and nothing, I believe there is some way.

Here is an example of the Smartnotification.js modal :

Thank you from now on who has an example or can help.

Answer 1

From what I read in plugin documentation .validate() you have a/callback method for when the validate passes and when it does not pass. Respectively submitHandler and invalidhandler

The submitHandler runs a function by passing to form as an argument:

  submitHandler: function(form) {
    // tudo ok! submeter
    form.submit();
  }

Then you have to pick a phrase to pass to the Smartnotification.js.

`` runs a function by passing the event and the instance of validator for this form. This function also passes to form in the this. Here you can get the number of errors with validator.numberOfInvalids();.

invalidHandler: function(event, validator) {
    // 'this' refere-se à form
    var errors = validator.numberOfInvalids();
}

So you could do something like:

jQuery('.myform').validate({
    rules: {
        password: {
            required: true,
            minlength: 5
        },
        password_confirm: {
            required: true,
            minlength: 5,
            equalTo: "#password"
        }
    },
    invalidHandler: function (event, validator) {
        var erros = validator.numberOfInvalids();
        var singularPlural = erros > 1 ? 'erros' : 'erro';
        var mensagem = ['Tem', erros, singularPlural, 'no fomulário. Por favor complete'].join(' ');
        PrintAlert(mensagem);
        // e aqui podes aplicar estilos à form via por exemplo $(this).css(etc..., etc...);
    },
    submitHandler: function (form) {
        PrintAlert('tudo ok! formulário será submetido.');
        form.submit();
    }
});