Skill Development Course - NodeJs Lab Manual - (LAB PROGRAMS)

Aim:

☛ Use JavaScript for doing client – side validation of the pages implemented in the experiment

Solution :

EXP-02

☛ Client - Side validation of Registration Page

registrationJS.html


<html>

<head>

    <title> Welcome to NNRG e-Book's website</title>

    <script language="javascript">

    function validate() {

        // username validation

        var uname = f1.username.value;

        if (uname.length<=0)

        {

            alert("Please Enter UserName");

            f1.username.focus();

            return false;

        }

        if (uname.length < 8)

        {

            alert("Please enter UserName not less than 8");

            f1.username.focus();

            return false;

        }

        //password validation

        var pwd = f1.password.value;

        if (pwd.length<=0)

        {

            alert("Please Enter password");

            f1.password.focus();

            return false;

        }

        if (pwd.length < 6)

        {

            alert("Please enter Password not less than 6");

            f1.password.focus();

            return false;

        }

        // email validation

        var email = f1.email.value;

        if (email.length<=0)

        {

            alert("Please Enter email");

            f1.email.focus();

            return false;

        }

        else {

            let eflag=false;

            for(i=0;i<email.length;i++) {

                if(email.charAt(i)=="@") 

                    { 

                        eflag=true;

                    }

            }

                if(!(eflag)) 

                { 

                    alert("Please enter a valid Email ID"); 

                    f1.email.focus(); 

                    return false; 

                }

        }

        // phone number validation

        var phno = f1.phno.value;

        if (phno.length<=0)

        {

            alert("Please Enter Phone Number");

            f1.phno.focus();

            return false;

        }

        if (isNaN(phno))

        {

            alert("Please Enter Valid Phone Number");

            f1.phno.focus();

            return false;

        }

        if (phno.length != 10)

        {

            alert("Please Enter Valid Phone Number");

            f1.phno.focus();

            return false;

        }

        // gender validation

        let flag=false; 

        for(i=0;i<f1.gen.length;i++) 

            if(f1.gen[i].checked)

                flag=true; 

        if(!(flag)) 

        { 

        alert("Please choose a Gender"); 

        return false; 

        }

        // Language validation

        flag=false; 

        for(i=0;i<f1.lang.length;i++) 

            if(f1.lang[i].checked)

                flag=true; 

        if(!(flag)) 

        { 

        alert("Please select at least one of the Language options."); 

        return false; 

        }

        // address validation

        var addr = f1.address.value;

        if (addr.length<=0)

        {

            alert("Please Enter address");

            f1.address.focus();

            return false;

        }

        // to display Success message

        alert("Registration Successful");

    }

    </script>

</head>

<body>

<center><br>

    <h3>Registration Form </h3>

    <br/>

    <form name="f1">

    <table cellpadding="1" align="center" >

    <tr><td> User Name:*</td>

    <td><input type="text" name="username"></td></tr>

    <tr><td>Password:*</td>

    <td><input type="password" name="password"></td></tr>

    <tr><td>Email ID:*</td>

    <td><input type="text" name="email"></td></tr>

    <tr><td>Phone Number:*</td>

    <td><input type="text" name="phno"></td></tr>

    <tr><td valign="top">Gender:*</td>

    <td><input type="radio" name="gen" value="Male">Male &nbsp;&nbsp;

    <input type="radio" name="gen" value="Female">Female</td></tr>

    <tr> <td valign="top">Language Known:*</td>

    <td> <input type="checkbox" name="lang" value="English">English<br/> 

    <input type="checkbox" name="lang" value="Telugu">Telugu<br>

    <input type="checkbox" name="lang" value="Hindi">Hindi<br>

    <input type="checkbox" name="lang" value="Tamil">Tamil

    </td></tr>

    <tr> <td valign="top">Address:*</td>

    <td><textarea name="address"></textarea></td>

    <tr><td></td><td><input type="button" value="SUBMIT" hspace="10" onclick="validate()">

    <input type="reset" value="RESET"></td></tr>

    <tr> <td colspan=2 >*<font color="#FF0000">fields are mandatory</font>

    </td>

    </tr>

    </table>

    </form>

</center>

</body>

</html>

Output :

Skill Development Course - NodeJs Lab Programs

1) Build a responsive web application for shopping cart with registration, login, catalog and cart pages using CSS3 features, flex and grid. View Solution

2) Use JavaScript for doing client – side validation of the pages implemented in the experiment View Solution

3) Explore the features of ES6 like arrow functions, callbacks, promises, async/await. Implement an application for reading the weather information from openweathermap.org and display the information in the form of a graph on the web page. View Solution

4) Develop a java stand alone application that connects with the database (Oracle / mySql) and perform the CRUD operation on the database tables. View Solution

5) Create an xml for the bookstore. Validate the same using both DTD and XSD. View Solution

6) Create a custom server using http module and explore the other modules of Node JS like OS, path, event. View Solution

7) Develop an express web application that can interact with REST API to perform CRUD operations on student data. (Use Postman) View Solution

8) Create a service in react that fetches the weather information from open weathermap.org and the display the current and historical weather information using graphical representation using chart.js View Solution

9) Create a TODO application in react with necessary components and deploy it into github. View Solution

Menu