I am building a form using HTML5 form validation.
I have the CSS classes input:valid and input:invalid defined. Some of the input fields are marked as required, but not all of them. Is it normal that the fields that aren’t marked as required are valid by default, meaning in my case have a green background? And is it normal that required fields are invalid by default?
If this is normal: Why did they make it that way? In my eyes it is not very user friendly to mark a field as valid oder invalid before something was entered. Is there anything I can do besides JavaScript?
Yes, it’s normal behaviour. Whenever user entered anything or not, he should know that field, marked as required, will be invalid until he will enter anything that matches pattern (or just anything 🙂 ).
If for some reason you don’t like such behaviour – sorry, but you should use JavaScript.