How to integrate Jquery.validator and SmartNotification.js plugin?

3

My question is:

How do I integrate the messages in Jquery.Validator () with the modal windows of the SmartNotification.js plugin? I would like, when inputs to enter roles of JQuery validators , a message is displayed via SmartNotification.js. I'm not able to integrate the two to do a forms validation - in other words make a standardized "crud".

Here's my SmartNotification.js function example, it's just 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 that I want to implement for example:

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

As an implement, I tried but when the message came from SmartNotification.js even if I clicked the back button it appears it does not come out understand it was on the screen I tried to put return (false) and nothing, I believe there is some way.

Here is an example of the SmartNotification.js modal:

Thank you in advance for anybody who has an example or can help.

    
asked by anonymous 02.07.2015 / 06:16

1 answer

1

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

The submitHandler runs a function passing form as argument:

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

Here you have to choose a phrase to pass to SmartNotification.js .

O '' runs a function passing the event and the instance of validator to that form. This function also passes form to 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();
    }
});
    
02.07.2015 / 09:19