Scribd
Upload
18 views4 pages

Full Stack Asssignment

Client-side Form Validations using JavaScript, DOM real-time update, JQuery to develop Ajax based applications.

Uploaded by

Piyush Phaske
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views4 pages

Full Stack Asssignment

Client-side Form Validations using JavaScript, DOM real-time update, JQuery to develop Ajax based applications.

Uploaded by

Piyush Phaske
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Web Technologies Laboratory 03

Aim: Client-side Form Validations using JavaScript, DOM real-time update, JQuery
to develop Ajax based applications.

Aim: Write a program to perform following form validations using JavaScript:


a) All fields mandatory,
b) Phone number, Email Address, Zip code Validation etc.
Include JavaScript to access and manipulate Document Object Model (DOM) objects in an
HTML web page.
Include JQuery to develop to develop your application as an Ajax based application.

Objectives:
1. To understand what form validation is.
2. To learn basic functioning of DOM objects.
3. To learn how to apply various techniques to implement it.

Theory:

1. Different types of form validations.


Required Field Validation: Ensures that all necessary fields are filled out before form
submission.
Email Validation: Checks if the entered email follows the correct format
(e.g.,[email protected]).
Password Strength Validation: Ensures that the password meets specific criteria, such
as a minimum length, inclusion of numbers, uppercase and lowercase letters, and special
characters.
Matching Fields Validation: Ensures that fields meant to match, such as password and
confirm password, have the same value.
Length Validation: Checks that the input meets the required length constraints, either
minimum or maximum.
Numeric Validation: Ensures that the input contains only numbers, often used for fields
like age or phone number.
Range Validation: Checks that a number or date falls within a specified range.

2. HTML Document Object Model.


The HTML Document Object Model (DOM) is a programming interface that represents
an HTML document as a tree structure where each node corresponds to a part of the
document, such as elements, attributes, and text. This model allows JavaScript to access
and manipulate the content, structure, and style of a web page dynamically. Developers
can use methods like getElementById and querySelector to access specific elements and
properties like innerHTML to change content. The DOM also supports event handling,
enabling interactive user experiences by responding to actions like clicks and inputs.
Standardized by the W3C, the DOM ensures cross-browser compatibility, making it
essential for creating dynamic and interactive web applications.
3. What is JQuery? Write various JQuery Selectors.
jQuery is a lightweight and feature-rich JavaScript library that simplifies HTML DOM
tree traversal and manipulation, event handling, CSS animation, and Ajax interactions. It
enables developers to write less code to achieve complex functionalities, ensuring
cross-browser compatibility. jQuery selectors, which are pivotal to its functionality, allow
for the selection of HTML elements based on id, class, type, attributes, and hierarchy.
Common selectors include $("#id") for elements with a specific id, $(".class") for
elements with a specific class, and $("[attribute=value]") for elements with a specific
attribute value. These selectors streamline the process of accessing and manipulating
elements, making jQuery an essential tool for web development.

FAQ:
1. Write 3 reasons why Form validations are important.
Form validations are crucial for several reasons:
1.Improved User Experience: They provide immediate feedback to users, helping them
correct errors before submitting the form, which reduces frustration and ensures a
smoother interaction.

2.Data Integrity: Validations ensure that the data entered into the form meets the required
formats and criteria, maintaining the accuracy and consistency of the information
collected.

3.Security: Proper form validations help prevent malicious inputs, such as SQL injection
or cross-site scripting (XSS) attacks, by ensuring that the data meets the expected
standards before being processed.

2. Give an example of how to modify an attribute value using DOM.


To modify an attribute value using the DOM, you first need to select the desired element
and then use the setAttribute method. For example, to change the src attribute of an
<img> element with the id myImage, you can use JavaScript like this:
document.getElementById('myImage').setAttribute('src', 'newImage.jpg');. This code
snippet selects the image element by its id and updates its src attribute to a new value,
effectively changing the image displayed on the web page. This approach allows you to
dynamically update element attributes, enhancing interactivity and responsiveness in your
web application.

3. What is jQuery Ajax?


jQuery Ajax is a set of methods provided by the jQuery library that simplifies
asynchronous HTTP requests. It allows web pages to communicate with servers in the
background without reloading the entire page. This enables dynamic content updates,
such as retrieving data from a server, submitting form data, and loading new content into
a web page. Key methods include $.ajax(), $.get(), and $.post(), which offer various
options for configuring the request and handling the server's response, making it easier to
create seamless, interactive web applications.

Output: Screenshots of the output to be attached.


Problem Statement:

Write a program to design Student registration form by using HTML, CSS having following
fields: Username, Email, Phone number, Password, Confirm Password and write external
javascript code to achieve following validations
● Fields should not be empty. If spaces are entered those should be considered empty
● Phone number must accept only numeric values and it should be 10 digits
● Password length must be at least 7 and it should contain at least one capital letter, one
digit and one special character from the set (&,$,#@)
● Value entered in password field and confirm password fields must match
Email address must contain @ sign and a ., there should be few letters before the @ sign, there
should be three letters between @ sign and a . There must be 3 or 2 letters after the . (hint: Use
regular expression)

Write a client-side script with JavaScript to access and manipulate Document Object Model
(DOM) objects in an HTML web page. Develop a dynamic web page using javascript and DOM.
Make use of the following for accessing elements
● getElementById, getElementsByTagName,getElementsByClassName
● Change the text using innerHTML property
● Change the CSS properties like color, position of a particular element on the page
● Change the image source after clicking on a button
● Add a text node and attach it to a parent node
● Delete a node

Include jQuery to perform following operations:


● Change button text using jQuery.
● Set background-image using jQuery CSS property.
● Access HTML form data using jQuery.
● Add attribute using jQuery

Use this reference link for jQuery :


https://www.w3resource.com/jquery-exercises/part1/index.php

You might also like