Form validation using IIFE and closure
Semantics
Put the &lt;meta charset=&quot;UTF-8&quot;&gt; before anything else that is being parsed. Some sources say it must be in the first 512 characters, some sources say it must be in the first 1024 characters. To be safe, it is wise to just put it at the start. (source)
You are using inline styling. I recommend to do this via CSS.
Events
Whenever an event is fired, the this keyword is set to the current element. Your use of id in the function definition in the onblur property is thus not required. If you insist on using a closure there, you could do this instead:
(function( element ) {
   //blah
 })( this );

You can avoid using inline javascript by binding an event to an element after the DOM has loaded. See this question on StackOverflow for more details on how to figure out when the DOM has loaded.
Input validation
Your solution does not actually do input validation. This can be easily demonstrated by changing the types of your input fields to &quot;text&quot; and trying to submit the form. Input validation should happen on the submit event (mdn) for a form. You could still use your blur event(s) to make this process easier.