Custom Messagger with ValidateBox

[eagleeye]

Hi friends, i was searching some solution to create Custom Messager with two input box for change password, my code is it, but i don´t need some simple input box  .

I need some validatebox to check lenght, and content .

Code:

(function ($) {
    function createWindow(title, content, buttons) {
        var win = $("<div class=\"messager-body\"></div>").appendTo("body");
        win.append(content);
        if (buttons) {
            var tb = $("<div class=\"messager-button\"></div>").appendTo(win);
            for (var btn in buttons) {
                $("<a></a>").attr("href", "javascript:void(0)").text(btn).css("margin-left", 10).bind("click", eval(buttons[btn])).appendTo(tb).linkbutton();
            }
        }
        win.window({
            title: title,
            noheader: (title ? false : true),
            width: 350,
            padding: 10,
            height: "auto",
            modal: true,
            collapsible: false,
            minimizable: false,
            maximizable: false,
            resizable: false,
            onClose: function () {
                setTimeout(function () {
                    win.window("destroy");
                }, 100);
            }
        });
        win.window("window").addClass("messager-window");
        win.children("div.messager-button").children("a:first").focus();
        return win;
    }
    ;
    $.extend($.messager, {
        password: function (title, msg, fn) {
            //var content = "<div class=\"messager-icon messager-question\"></div>" + "<div>" + msg + "</div>" + "<br/>" + "<div style=\"clear:both;\"/>" + "<div><input class=\"messager-input\" type=\"password\"/></div>";            
            /*
             var content = "<div class=\"messager-icon messager-question\"></div>" +
                    "<div>" + msg + "</div>" + "<br/>" +
                    "<div style=\"clear:both;\"/>" +                    
                    "<div class=\"fitem\"><label style=\"width:130px;\">Contrase&ntilde;a Actual:</label><input style=\"width:150px\" type=\"password\" id=\"apassword\" name=\"apassword\" style=\"width:150px\" class=\"messager-pwd\"/></div>" +
                    "<div class=\"fitem\"><label style=\"width:130px;\">Nueva Contrase&ntilde;a:</label><input  style=\"width:150px\" type=\"password\" id=\"npassword\" name=\"npassword\" style=\"width:150px\" class=\"messager-pwd1\"/></div>" +
                    "<div class=\"fitem\"><label style=\"width:130px;\">Repite Contrase&ntilde;a:</label><input style=\"width:150px\" type=\"password\" id=\"cnpassword\" name=\"cnpassword\" style=\"width:150px\" class=\"messager-pwd2\"/></div>" +
                    "</div>";
             */
            var content = "<div class=\"messager-icon messager-question\"></div>" +
                    "<div>" + msg + "</div>" + "<br/>" +
                    "<div style=\"clear:both;\"/>" +  
                    "<label>file:</label><input type=\"file\" name=\"upload\" id=\"upload\"  class=\"easyui-validatebox\" validType=\"fileType['xls']\" required=\"true\"></input>" +
                    "<div class=\"fitem\"><label style=\"width:130px;\">ValidateBox:</label><input type=\"text\" class=\"easyui-validatebox textbox\" data-options=\"required:true,validType:'length[3,10]'\">" +
                    "<div class=\"fitem\"><label style=\"width:130px;\">Contrase&ntilde;a Actual:</label><input style=\"width:150px\" type=\"password\" id=\"apassword\" name=\"apassword\" style=\"width:150px\"   class=\"messager-pwd validatebox\" /></div>" +
                    "<div class=\"fitem\"><label style=\"width:130px;\">Nueva Contrase&ntilde;a:</label><input  style=\"width:150px\" type=\"password\" id=\"npassword\" name=\"npassword\" style=\"width:150px\"   class=\"messager-pwd1 validatebox\"  data-options=\"required:true,validType:'valminLength[5]'\"/></div>" +
                    "<div class=\"fitem\"><label style=\"width:130px;\">Repite Contrase&ntilde;a:</label><input style=\"width:150px\" type=\"password\" id=\"cnpassword\" name=\"cnpassword\" style=\"width:150px\" class=\"messager-pwd1 validatebox\"  data-options=\"required:true,validType:\"equals['#npassword']\"\"/></div>" +
                    "</div>";
            var buttons = {};
            buttons[$.messager.defaults.ok] = function () {
                win.window("close");
                if (fn) {                                        
                    fn($(".messager-pwd", win).val(),
                            $(".messager-pwd1", win).val(),
                            $(".messager-pwd2", win).val()
                            );
                    return false;
                }
            };
            buttons[$.messager.defaults.cancel] = function () {
                win.window("close");
                if (fn) {
                    fn();
                    return false;
                }
            };
            var win = createWindow(title, content, buttons);
            win.find("input.messager-pwd").focus();            
            return win;
        },
        login: function (title, msg, fn) {
            var content = "<div class=\"messager-icon messager-question\"></div>" + "<div>" + msg + "</div>" + "<br/>" + "<div style=\"clear:both;\"/>"
                    + "<div class=\"righttext\">Login ID: <input class=\"messager-id \" type=\"text\"/></div>"
                    + "<div class=\"righttext\">Password: <input class=\"messager-pass\" type=\"password\"/></div>";
            var buttons = {};
            buttons[$.messager.defaults.ok] = function () {
                win.window("close");
                if (fn) {
                    fn($(".messager-id", win).val(), $(".messager-pass", win).val());
                    return false;
                }
            };
            buttons[$.messager.defaults.cancel] = function () {
                win.window("close");
                if (fn) {
                    fn();
                    return false;
                }
            };
            var win = createWindow(title, content, buttons);
            win.find("input.messager-id").focus();
            return win;
        }
    });
})(jQuery);

Code:

// Funcion para abrir dialogo de cambio de contraseña
function openDialog() {
    //$('#dlg-camPass').dialog('open');             
    var win_cambio = $.messager.password('AgendaNet', 'Cambio de Contraseña', function (r) {
        if (r) {
            value0 = r;
            value1 = win_cambio.find("input.messager-pwd1").val();
            value2 = win_cambio.find("input.messager-pwd2").val();

            if (value1 == value2) {
                $.ajax({
                    type: "POST", //el envio es por POST
                    url: "../control_usuarios/change_password.php", //php que recibe y procesa los datos 
                    data: {
                        apassword: value0,
                        npassword: value1
                    }, //los datos de la forma: etiqueta1=valor1&etiqueta2=valor2
                    dataType: "json", //tipo de datos a manejar
                    async: true, //la peticion sera asincrona
                    success: function (result) {
                        if (result.success) { //si los datos fueron correctos, cambio de pagina
                            $.messager.alert('Info', 'Su contraseña ha sido cambiada correctamente.', 'info');
                        } else { //si hubo errores 
                            $.messager.alert('Error', result.error, 'error');
                            //limpio los input's
                            $("#apassword").val("");
                            $("#npassword").val("");
                            $("#cnpassword").val("");
                        }
                    },
                    error: function (result) { //si hubo error en la ejecucion
                        alert("Ocurrio un error inesperado, por favor contacte al administrador. Disculpe las molestias.");
                        //alert("FAILED: "+result.status+' '+result.statusText); //estado del error (pruebas)
                    }
                }); //ajax
            } else {
                $.messager.alert('AgendaNet','Los campos no son iguales!!','error');
            }
        }
    });