check if input field is empty with html5 and javascript

Question

How can i check if a html5 input field is empty? I am trying to override the native validation message given by using a required text input.

This is how my code looks now:

<script>
    $(document).ready(function(){
        H5F.setup(document.getElementById("contact-form"));
              var name = document.getElementById("contact-name")
        if (name.value === "") {
              name.setCustomValidity("Please fill out the field with your name");    
        }


    });
</script>

Answer 1

Wrapping your code in a blur listener should do the trick.

    var name = document.getElementById("contact-name");
    $(name).blur(function(){
        if (name.value === "") {
            name.setCustomValidity("Please fill out the field with your name");    
        }
    });

Answer 2

这是您需要的。有关如何更改此本机验证消息的完整指南：D http://afarkas.github.io/webshim/demos/demos/forms.html#Locale-Settings