3

Minha dúvida é a seguinte:

Como eu integro as mensagens do Jquery.Validator() com as janelas modais do plugin SmartNotification.js? Gostaria que, quando os inputs entrarem nas roles dos validators do JQuery seja exibida uma mensagem via SmartNotification.js. Eu não estou conseguindo integrar os dois para fazer uma validação de forms — em outras palavras fazer um "crud" padronizado.

Segue meu exemplo de função do SmartNotification.js é só ela ser chamada pelo 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 que quero implementar de exemplo:

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

Como implemento, eu tentei mas quando surgia a mensagem do SmartNotification.js mesmo clicando no botão voltar que surge ela não saia entendem ficava na tela tentei colocar return (false) e nada, creio que exista algum jeito.

Segue um exemplo da modal do SmartNotification.js :

Obrigado desde já quem tiver um exemplo ou puder ajudar.

1 Resposta 1

1

Pelo que li na documentação do plugin .validate() tens um método/callback para quando o validate passa e quando não passa. Respectivamente submitHandler e invalidhandler

O submitHandler corre uma função passando a form como argumento:

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

Aí tens de escolher uma frase para passar para o SmartNotification.js.

O `` corre uma função passando o evento e o a instância do validator para essa form. Essa função passa também a form no this. Aqui podes ir buscar o numero de erros com validator.numberOfInvalids();.

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

Assim podias fazer algo como:

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();
    }
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .