0
\$\begingroup\$

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

<!DOCTYPE html>
<html>
    <head>
        <title>Form validation</title>
        <meta charset="UTF-8">

    </head>
    <body>
        <div style="width: 40%; margin: 0 auto;">
            <h6>Fill the form</h6>
            <form action="javascript:void(0)" method="POST" enctype="multipart/form-data">
                <label>Last Name: <input type="text" placeholder="Last name" id="lastname" required ></label> <br>
                <label>First Name: <input type="text" placeholder="First name" id="firstname" required ></label> <br>
                <label>Email: <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');">
                </label><br>
                <label>Phone: <input type="tel" placeholder="Phone" id="phone" required></label><br>
                <label>address: <input type="text" placeholder="Address" id="address"></label><br>
                <input type="submit" value="Submit form">
            </form>
        </div>
    </body>
</html>

Can this solution be improved by avoiding inline JS?

Note: IIFE -Immediately-Invoked Function Expression

\$\endgroup\$

closed as off-topic by tim, Mast, mdfst13, 200_success Dec 26 '15 at 20:41

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions containing broken code or asking for advice about code not yet written are off-topic, as the code is not ready for review. After the question has been edited to contain working code, we will consider reopening it." – tim, Mast, mdfst13, 200_success
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    \$\begingroup\$ This is incomplete. verify isn't defined. And you're not doing what the assignment is telling you to do - you're letting the browser do the input validation. \$\endgroup\$ – Mat Dec 26 '15 at 9:14
  • \$\begingroup\$ I agree with Mat, your code doesn't really solve the problem. Adding to that that your original question was Can this solution be improved using IIFE?, it doesn't look like you want your code reviewed, but want us to do your work. I'm voting to close for now. \$\endgroup\$ – tim Dec 26 '15 at 9:27
  • \$\begingroup\$ Since the question already has an answer, you can't change the code. However, we could reopen the question if you modify the Problem Statement to be consistent with the code. \$\endgroup\$ – 200_success Dec 26 '15 at 20:44
1
\$\begingroup\$

Semantics

Put the <meta charset="UTF-8"> 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 "text" 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.

\$\endgroup\$
  • \$\begingroup\$ But I can't assign IIFE to document.getElementById('email').onblur, right? \$\endgroup\$ – overexchange Dec 26 '15 at 12:12
  • 1
    \$\begingroup\$ The problem statement is vague. IIFE is literally only a term to describe the construction (function(..){})(..). An IIFE can just return a function for example, even though that seems kinda silly to me. It is unclear to me how they want you to use an IIFE. Hell, as far as I know they even could want you to use an IIFE in script tags outside your form in which you bind functions to specific events. \$\endgroup\$ – Sumurai8 Dec 26 '15 at 12:18
  • \$\begingroup\$ Yes you are right, IIFE can return a function. I am making the changes now by removing inline JS. here is my modified code \$\endgroup\$ – overexchange Dec 26 '15 at 12:28

Not the answer you're looking for? Browse other questions tagged or ask your own question.