Te faltará comprobar, antes de mostrar el mensaje, si ha habido o no cambio en el formulario. Los controles del formulario tienen una propiedad (que depende del tipo de control) en la que se guarda el valor inicial que tenían al generar la página.
En base a eso puedes hacer una función genérica:
function formIsDirty(form) {
for (var i = 0; i < form.elements.length; i++) {
var element = form.elements[i];
var type = element.type;
if (type == "checkbox" || type == "radio") {
if (element.checked != element.defaultChecked) {
return true;
}
}
else if (type == "hidden" || type == "password" ||
type == "text" || type == "textarea") {
if (element.value != element.defaultValue) {
return true;
}
}
else if (type == "select-one" || type == "select-multiple") {
for (var j = 0; j < element.options.length; j++) {
if (element.options[j].selected !=
element.options[j].defaultSelected) {
return true;
}
}
}
}
return false;
}
Y en el beforeunload:
window.onbeforeunload = function(e) {
e = e || window.event;
if (formIsDirty(document.forms["tu_formulario"])) {
// For IE and Firefox
if (e) {
e.returnValue = "You have unsaved changes.";
}
// For Safari
return "You have unsaved changes.";
}
};
sweet alert
para ventanas de preguta.En cuanto a validar formularios te recomiendo usar la propiedad html5onsubmit=" nombrefuncionJavascrpit()"
en la etiqueta de apertura de form.