Javascript: fast way to check if form contents have been changed before submission

Question

Simple question (I guess)... I'm in an "edit-some-element" html form. As the page load, the form is filled with current element attributes (eg. name, etc.) I could modify some input fields or even decide not to do that but I click the same on submit button because is the only available one.

MY QUESTION: is there a property/attribute of the input elements containig the initial input values that I can access to compare them with the current ones when I click on submit button? In other words: is there a fast way to check if at least one input field has been changed before submitting the form? (so to stop the event if an update isn't really necessary) (and I mean "really changed" not considering as changes when I modify something but rewrite it as it was before)

I'd like a minimal example: How to check if a simple input-text "name" has been changed

P.S. Of course, to trigger the "check-if-something-changed" function, if I decide to use pure javascript I would use onSubmit event while using jQuery I would use something like:

$('#formMod').submit(function(){ ...

Thanks.

Answer 1

You can use the input element defaultValue dom property:

function validateInput(input) {
    if (input.value == input.defaultValue) {
        alert("Please change field.");
        return false;
    }
    return true;
}