Subject: CSS (22519) Academic Year: 2023 -24

Branch Name: AN-5-I Semester: Fifth

Use js and regular expression to perform error checking on user input as per validation rules.

By the group of 4 students

Roll No Name Of Students Enrollment Seat No

(Sem-5) No.
30 Mr. Yash Patil 2216290253 149167

23 Mr. Sameer Jadhav 2116290142 149161

11 Mr. Aditya Kesari 2116290128 149149

21 Mr. Masir Momin 2116290140 149159

Under the guidance of

Ms. Archana Sahu

AT
Department of Artificial Intelligence and Machine Learning
(Diploma)

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

 CERTIFICATE

This Micro Project Report Entitled “Use js and regular expression to perform
error checking on user input as per validation rules.” By Mr. Yash Patil, Mr.
Sameer Jadhav, Mr. Aditya Kesari, Mr. Masir Momin Is Approved for the
Diploma of AIML Engineering (Diploma) (Third Year) For Academic Year 2023 -
2024.

Examiners

1.

2.

Supervisor

1.

Ms. Archana Sahu

Head of the Department Principal

Date:

Place:
 ACKNOWLEDGEMENT

A micro project is something that could not have been materialized

without cooperation of many people. This project shall be incomplete if I
do not convey my heartfelt gratitude to those people from whom I have
got considerable support and encouragement. It is a matter of great
pleasure for us to have respected Ms. Archana Sahu as my project guide.
We are thankful to her for being a constant source of inspiration. We
would like to give our sincere thanks to Prof. Heena Patil Head of
Department, for their kind support.
 CONTENTS

Sr. No Name of the topic Page

No.
1 Abstract 5

2 Introduction 6

3 Aim 7

4 What is Regular Expression ? 8

5 What is Validation ? 9

6 What are Validation Rules ? 10

7 Advantages & Disadvantages 11-12

8 Implementation 13-14

9 Result 15

10 Conclusion 16

11 References 17
 ABSTRACT

Error checking and validation of user input are critical aspects of web application
development. The report explores the use of JavaScript and regular expressions for
user input validation, highlighting their advantages and disadvantages. It provides
code examples and implementation guidelines to ensure the security and reliability of
web applications.
 INTRODUCTION

Error checking and validation of user input are essential components of web
application development. JavaScript, in combination with regular expressions,
provides a powerful toolset for ensuring that user-provided data meets specific
validation rules. The report discusses the use of JavaScript and regular expressions to
perform error checking on user input in accordance with validation rules. Error
checking and validation rules in CSS typically refer to the process of verifying that
your CSS code follows the correct syntax and adheres to the CSS specifications. This
is crucial to ensure that your styles are applied correctly and consistently across
various web browsers.
 AIM

The primary aim of using regular expressions (regex) for error checking in user input
validation is to guarantee data integrity, enhance application security, and elevate data
quality. Regex serves as a powerful tool to achieve these objectives by allowing
developers to establish precise validation criteria for various types of user input.

Firstly, it ensures data integrity by filtering out incorrectly formatted or potentially

harmful input. This meticulous validation promotes the accuracy and consistency of
data within the system, reducing the chances of errors or inconsistencies.

Secondly, regex contributes to enhanced security. By preventing malicious input, it

safeguards the application against vulnerabilities like SQL injection and cross-site
scripting (XSS), thereby fortifying the overall security posture.

Furthermore, regex helps improve data quality by rejecting invalid or improperly

formatted data, enhancing the reliability of data-driven processes and analytical
outcomes.

Lastly, regex facilitates efficient and swift validation of user input, especially vital
when dealing with substantial datasets, thus reducing the computational load
associated with error checking.
 WHAT IS REGULAR EXPRESSION ?

A regular expression is a pattern of characters. The pattern is used for searching and
replacing characters in strings. The RegExp Object is a regular expression with added
Properties and Methods. A regular expression (regex) is a pattern that is used to match
and select elements based on their attribute values. Regular expressions are typically
used in attribute selectors to target elements that have specific attribute values that
match the pattern. CSS regular expressions can be quite powerful for selecting
elements with attribute values that follow specific patterns.

Syntax: /pattern/modifier(s);

➢ Features of using Regular Expression:

▪ Precise Selection: Regular expression-like patterns in attribute selectors allow

you to precisely target and style elements based on patterns within their attribute
values. This can be useful for selecting specific elements in complex HTML
documents.

▪ Flexibility: You can create more flexible and dynamic selectors that adapt to
different variations of attribute values, making your CSS more versatile.

▪ Reduces the Need for Complex HTML Structure: Regular expression-like

selectors can reduce the reliance on specific HTML element classes or IDs,
making your stylesheets more adaptable to different HTML structures.

▪ Efficiency: When used correctly, these selectors can make your CSS more
efficient by reducing the need for excessive class or ID attributes, resulting in
cleaner and more concise code.

▪ Consistency: Regular expression-like selectors can help maintain a consistent

design by applying styles to elements that match specific patterns, regardless of
their location in the document.
 WHAT IS VALIDATION ?

Validation typically refers to the process of ensuring that the CSS code you've written
adheres to the CSS specification and is free of syntax errors or other issues that might
cause rendering problems in web browsers. CSS validation helps maintain the quality
and consistency of your stylesheets. Validating your CSS code is important because
it can help you catch and correct errors before they cause rendering problems in
different web browsers. Ensuring that your CSS is well-formed and follows the
specifications can contribute to a more reliable and consistent display of your web
content across various devices and browsers.

➢ Features of using Validation:

▪ Error Prevention: CSS validation helps prevent syntax errors and issues in
your stylesheets. This reduces the risk of rendering problems in different web
browsers and ensures that your CSS code is free from common mistakes.

▪ Cross-Browser Compatibility: Valid CSS is more likely to render consistently

across various web browsers, reducing the need for browser-specific hacks or
workarounds. This ensures a better user experience for your website visitors.

▪ Improved Code Quality: CSS validation encourages best practices and

adherence to CSS specifications, resulting in cleaner, more maintainable, and
semantically correct code.

▪ Faster Debugging: Valid CSS is easier to debug and troubleshoot. Validation

tools can help pinpoint the exact location of errors in your code, saving time
during the debugging process.

▪ Accessibility: Valid CSS can contribute to improved web accessibility by

ensuring that your styles do not interfere with screen readers or other assistive
technologies.
 WHAT ARE VALIDATION RULES ?

Validation rules refer to guidelines and specifications set by the World Wide Web
Consortium (W3C) and other standardization bodies to ensure that your CSS code
follows correct syntax and adheres to best practices. These rules are crucial for
creating well-structured and reliable stylesheets. Some key validation rules in CSS
include:

1.Syntax Rules: These rules ensure that your CSS code is written correctly, with the
proper use of selectors, properties, and values.
For example:
▪ Proper use of curly braces {} to enclose style declarations.
▪ Correct placement of colons : between properties and values.
▪ Semicolons ; to separate multiple declarations.

2.Property and Value Rules: Validation checks that the properties and values you
use are supported by the CSS specifications and that they are used appropriately.
For example:
▪ Using valid property names and values.
▪ Ensuring that properties and values are applicable to the selected elements.

3.Selector Rules: These rules govern the use of selectors to target HTML elements.
They include:
▪ Valid selector syntax, such as classes (‘.classname’) and IDs (‘#idname’).
▪ Ensuring that selectors are used correctly within the CSS document.

4.Cascading and Specificity Rules: Validation rules ensure that the cascade
(priority) and specificity mechanisms are correctly implemented.
For example:
▪ Understanding the specificity of selectors and how they affect style application.
▪ Comprehending the order of importance between styles.

5.Vendor Prefix Rules: Some CSS properties may require vendor-specific prefixes
for browser compatibility. Validation rules may indicate whether vendor prefixes are
used correctly.
 ADVANTAGES

▪ Real-time Feedback: JavaScript enables real-time validation as user type,

offering immediate feedback, which enhances the user experience.

▪ Reduced Server Load: Client-side validation using JavaScript reduces the

number of requests to the server, resulting in faster response times.

▪ Improved Data Quality: Validating input on the client side ensures that data
meets the required format and rules, reducing the likelihood of incorrect data
submissions.

▪ Enhanced User Experience: Providing users with instant feedback on

validation errors minimizes frustration and helps them complete forms more
accurately.

▪ Increased Security: User input validation is a crucial defense against SQL

injection and other security vulnerabilities.
 DISADVANTAGES

▪ Bypassing Client-Side Validation: Savvy users can bypass client-side

validation by disabling JavaScript, potentially submitting invalid or malicious
data.

▪ Additional Development Effort: Implementing client-side validation requires

additional development effort and maintenance.

▪ Duplication of Validation Rules: Validation rules should be enforced on the

server as well to ensure data integrity, resulting in rule duplication.
 IMPLEMENTATION

▪ HTML Form: Create an HTML form with input fields.

▪ JavaScript Validation: Implement JavaScript functions to validate user input

using regular expressions.

▪ Event Listeners: Attach event listeners to input fields to trigger validation

functions when users interact with the form.

▪ Feedback: Provide real-time feedback to users by displaying validation

messages or highlighting invalid input.

▪ Server-Side Validation: Always complement client-side validation with

server-side validation to ensure data integrity and security.

▪ Error Handling: Handle validation errors gracefully, informing users of issues

and guiding them to correct their input.
CODE
RESULT
 CONCLUSION

Utilizing JavaScript and regular expressions for user input validation offers numerous
advantages, including real-time feedback, enhanced user experience, and improved
data quality. However, it comes with the drawback of potential bypassing by users
and additional development effort. To maximize security and reliability, a
combination of client-side and server-side validation is recommended.
 REFERENCES

1."HTML and CSS: Design and Build Websites" by Jon Duckett (2020).

2. "JavaScript and JQuery: Interactive Front-End Web Development" by

Jon Duckett (2020).

3."Eloquent JavaScript" by Marijn Haverbeke (2021).