Form validation using IIFE and closure Problem statement
  
  Write an IIFE in which we have to validate the input provided from a form using closures. The form consists of name, email, phone, address in which name, email and phone number should not be left blank. Also validate that the given email is a valid email id using JavaScript.
  
  Objective
  
  This assignment will help you to master the following concepts:
  
  
  function
  closures
  


Solution

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Form validation&lt;/title&gt;
        &lt;meta charset="UTF-8"&gt;

    &lt;/head&gt;
    &lt;body&gt;
        &lt;div style="width: 40%; margin: 0 auto;"&gt;
            &lt;h6&gt;Fill the form&lt;/h6&gt;
            &lt;form action="javascript:void(0)" method="POST" enctype="multipart/form-data"&gt;
                &lt;label&gt;Last Name: &lt;input type="text" placeholder="Last name" id="lastname" required &gt;&lt;/label&gt; &lt;br&gt;
                &lt;label&gt;First Name: &lt;input type="text" placeholder="First name" id="firstname" required &gt;&lt;/label&gt; &lt;br&gt;
                &lt;label&gt;Email: &lt;input type="email" placeholder="Email" id="email" required 
                                        onblur="(function(id){
                                            var email_id = document.getElementById(id).value;
                                            function validate(){
                                                var regpat = /^[a-zA-Z_\.\-]+@[a-zA-Z_\-\.]+?\.[a-zA-Z]{2,4}$/;
                                                return regpat.test(email_id);
                                            }
                                            alert(validate());
                                        })('email');"&gt;
                &lt;/label&gt;&lt;br&gt;
                &lt;label&gt;Phone: &lt;input type="tel" placeholder="Phone" id="phone" required&gt;&lt;/label&gt;&lt;br&gt;
                &lt;label&gt;address: &lt;input type="text" placeholder="Address" id="address"&gt;&lt;/label&gt;&lt;br&gt;
                &lt;input type="submit" value="Submit form"&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;




Can this solution be improved by avoiding inline JS?

Note: IIFE -Immediately-Invoked Function Expression
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.