form validation – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Thu, 31 Aug 2023 18:49:05 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Create Website with Login & Registration Form in HTML CSS and JavaScript https://www.codingnepalweb.com/create-website-login-registration-form-html/ https://www.codingnepalweb.com/create-website-login-registration-form-html/#respond Thu, 31 Aug 2023 18:33:30 +0000 https://www.codingnepalweb.com/?p=5729 Create Website with Login & Registration Form in HTML CSS and JavaScript

If you’re new to web development, creating a website with login and registration forms is an excellent way to learn and practice basic skills like designing a navigation menu bar, creating a website homepage, and building login and registration forms.

In this blog post, I’ll guide you through the process of creating a responsive website with login and registration forms using HTML, CSS, and JavaScript. By completing this project, you’ll gain practical experience and learn essential web development concepts like DOM manipulation, event handling, conditional statements, and more.

In this project, the website’s homepage features a navigation bar and a login button. When you click on the button, a login form will popup with a cool blurred background effect. The form has an image on the left and input fields on the right side. If you want to sign up instead, simply click on the sign-up link and you’ll be taken to the registration form.

The website’s navigation bar and forms are completely responsive. This means that the content will adjust to fit any screen size. On a smaller screen, the navigation bar will pop up from the right side when the hamburger button is clicked and in the forms the left image section will remain hidden.

Video Tutorial of Website with Login & Registration Form

If you enjoy learning through video tutorials, the above YouTube video is an excellent resource. In this video, I’ve explained each line of code and included informative comments to make the process of creating your own website with login and registration forms beginner-friendly and easy to follow.

However, if you like reading blog posts or want a step-by-step guide for this project, you can continue reading this post. By the end of this post, you’ll have your own website with forms that are simple to customize and implement into your other projects.

Steps to Create Website with Login & Registration Form

To create a responsive website with login and registration forms using HTML, CSS, and vanilla JavaScript, follow these simple step-by-step instructions:

  1. First, create a folder with any name you like. Then, make the necessary files inside it.
  2. Create a file called index.html to serve as the main file.
  3. Create a file called style.css to hold the CSS code.
  4. Create a file called script.js to hold the JavaScript code.
  5. Finally, download the Images folder and place it in your project directory. This folder contains all the images you’ll need for this project.

To start, add the following HTML codes to your index.html file. These codes include all essential HTML elements, such as header, nav, ul, form, and more for the project.

<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website with Login and Registration Form | CodingNepal</title>
    <!-- Google Fonts Link For Icons -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <header>
        <nav class="navbar">
            <span class="hamburger-btn material-symbols-rounded">menu</span>
            <a href="#" class="logo">
                <img src="images/logo.jpg" alt="logo">
                <h2>CodingNepal</h2>
            </a>
            <ul class="links">
                <span class="close-btn material-symbols-rounded">close</span>
                <li><a href="#">Home</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Courses</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Contact us</a></li>
            </ul>
            <button class="login-btn">LOG IN</button>
        </nav>
    </header>

    <div class="blur-bg-overlay"></div>
    <div class="form-popup">
        <span class="close-btn material-symbols-rounded">close</span>
        <div class="form-box login">
            <div class="form-details">
                <h2>Welcome Back</h2>
                <p>Please log in using your personal information to stay connected with us.</p>
            </div>
            <div class="form-content">
                <h2>LOGIN</h2>
                <form action="#">
                    <div class="input-field">
                        <input type="text" required>
                        <label>Email</label>
                    </div>
                    <div class="input-field">
                        <input type="password" required>
                        <label>Password</label>
                    </div>
                    <a href="#" class="forgot-pass-link">Forgot password?</a>
                    <button type="submit">Log In</button>
                </form>
                <div class="bottom-link">
                    Don't have an account?
                    <a href="#" id="signup-link">Signup</a>
                </div>
            </div>
        </div>
        <div class="form-box signup">
            <div class="form-details">
                <h2>Create Account</h2>
                <p>To become a part of our community, please sign up using your personal information.</p>
            </div>
            <div class="form-content">
                <h2>SIGNUP</h2>
                <form action="#">
                    <div class="input-field">
                        <input type="text" required>
                        <label>Enter your email</label>
                    </div>
                    <div class="input-field">
                        <input type="password" required>
                        <label>Create password</label>
                    </div>
                    <div class="policy-text">
                        <input type="checkbox" id="policy">
                        <label for="policy">
                            I agree the
                            <a href="#" class="option">Terms & Conditions</a>
                        </label>
                    </div>
                    <button type="submit">Sign Up</button>
                </form>
                <div class="bottom-link">
                    Already have an account? 
                    <a href="#" id="login-link">Login</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Next, add the following CSS codes to your style.css file to apply visual styling to your website and forms. You can experiment with different CSS properties like colors, fonts, and backgrounds to give a unique touch to your website.

/* Importing Google font - Open Sans */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
}

body {
    height: 100vh;
    width: 100%;
    background: url("images/hero-bg.jpg") center/cover no-repeat;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    padding: 0 10px;
}

.navbar {
    display: flex;
    padding: 22px 0;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: space-between;
}

.navbar .hamburger-btn {
    display: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.5rem;
}

.navbar .logo {
    gap: 10px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.navbar .logo img {
    width: 40px;
    border-radius: 50%;
}

.navbar .logo h2 {
    color: #fff;
    font-weight: 600;
    font-size: 1.7rem;
}

.navbar .links {
    display: flex;
    gap: 35px;
    list-style: none;
    align-items: center;
}

.navbar .close-btn {
    position: absolute;
    right: 20px;
    top: 20px;
    display: none;
    color: #000;
    cursor: pointer;
}

.navbar .links a {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    transition: 0.1s ease;
}

.navbar .links a:hover {
    color: #19e8ff;
}

.navbar .login-btn {
    border: none;
    outline: none;
    background: #fff;
    color: #275360;
    font-size: 1rem;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 3px;
    cursor: pointer;
    transition: 0.15s ease;
}

.navbar .login-btn:hover {
    background: #ddd;
}

.form-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    max-width: 720px;
    background: #fff;
    border: 2px solid #fff;
    transform: translate(-50%, -70%);
}

.show-popup .form-popup {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.1s;
}

.form-popup .close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #878484;
    cursor: pointer;
}

.blur-bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    height: 100%;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: 0.1s ease;
}

.show-popup .blur-bg-overlay {
    opacity: 1;
    pointer-events: auto;
}

.form-popup .form-box {
    display: flex;
}

.form-box .form-details {
    width: 100%;
    color: #fff;
    max-width: 330px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login .form-details {
    padding: 0 40px;
    background: url("images/login-img.jpg");
    background-position: center;
    background-size: cover;
}

.signup .form-details {
    padding: 0 20px;
    background: url("images/signup-img.jpg");
    background-position: center;
    background-size: cover;
}

.form-box .form-content {
    width: 100%;
    padding: 35px;
}

.form-box h2 {
    text-align: center;
    margin-bottom: 29px;
}

form .input-field {
    position: relative;
    height: 50px;
    width: 100%;
    margin-top: 20px;
}

.input-field input {
    height: 100%;
    width: 100%;
    background: none;
    outline: none;
    font-size: 0.95rem;
    padding: 0 15px;
    border: 1px solid #717171;
    border-radius: 3px;
}

.input-field input:focus {
    border: 1px solid #00bcd4;
}

.input-field label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #4a4646;
    pointer-events: none;
    transition: 0.2s ease;
}

.input-field input:is(:focus, :valid) {
    padding: 16px 15px 0;
}

.input-field input:is(:focus, :valid)~label {
    transform: translateY(-120%);
    color: #00bcd4;
    font-size: 0.75rem;
}

.form-box a {
    color: #00bcd4;
    text-decoration: none;
}

.form-box a:hover {
    text-decoration: underline;
}

form :where(.forgot-pass-link, .policy-text) {
    display: inline-flex;
    margin-top: 13px;
    font-size: 0.95rem;
}

form button {
    width: 100%;
    color: #fff;
    border: none;
    outline: none;
    padding: 14px 0;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 3px;
    cursor: pointer;
    margin: 25px 0;
    background: #00bcd4;
    transition: 0.2s ease;
}

form button:hover {
    background: #0097a7;
}

.form-content .bottom-link {
    text-align: center;
}

.form-popup .signup,
.form-popup.show-signup .login {
    display: none;
}

.form-popup.show-signup .signup {
    display: flex;
}

.signup .policy-text {
    display: flex;
    margin-top: 14px;
    align-items: center;
}

.signup .policy-text input {
    width: 14px;
    height: 14px;
    margin-right: 7px;
}

@media (max-width: 950px) {
    .navbar :is(.hamburger-btn, .close-btn) {
        display: block;
    }

    .navbar {
        padding: 15px 0;
    }

    .navbar .logo img {
        display: none;
    }

    .navbar .logo h2 {
        font-size: 1.4rem;
    }

    .navbar .links {
        position: fixed;
        top: 0;
        z-index: 10;
        left: -100%;
        display: block;
        height: 100vh;
        width: 100%;
        padding-top: 60px;
        text-align: center;
        background: #fff;
        transition: 0.2s ease;
    }

    .navbar .links.show-menu {
        left: 0;
    }

    .navbar .links a {
        display: inline-flex;
        margin: 20px 0;
        font-size: 1.2rem;
        color: #000;
    }

    .navbar .links a:hover {
        color: #00BCD4;
    }

    .navbar .login-btn {
        font-size: 0.9rem;
        padding: 7px 10px;
    }
}

@media (max-width: 760px) {
    .form-popup {
        width: 95%;
    }

    .form-box .form-details {
        display: none;
    }

    .form-box .form-content {
        padding: 30px 20px;
    }
}

After applying the styles, load the webpage in your browser to view your website. The forms are currently hidden and will only appear later using JavaScript. Now, you will only see the website with the navigation bar and hero image.

Finally, add the following JavaScript code to your script.js file. The code contains click event listeners which can toggle classes on various HTML elements. Although the code is simple and easy to understand, it is recommended to watch the video tutorial above, pay attention to the code comments, and experiment with the code for better understanding.

const navbarMenu = document.querySelector(".navbar .links");
const hamburgerBtn = document.querySelector(".hamburger-btn");
const hideMenuBtn = navbarMenu.querySelector(".close-btn");
const showPopupBtn = document.querySelector(".login-btn");
const formPopup = document.querySelector(".form-popup");
const hidePopupBtn = formPopup.querySelector(".close-btn");
const signupLoginLink = formPopup.querySelectorAll(".bottom-link a");

// Show mobile menu
hamburgerBtn.addEventListener("click", () => {
    navbarMenu.classList.toggle("show-menu");
});

// Hide mobile menu
hideMenuBtn.addEventListener("click", () =>  hamburgerBtn.click());

// Show login popup
showPopupBtn.addEventListener("click", () => {
    document.body.classList.toggle("show-popup");
});

// Hide login popup
hidePopupBtn.addEventListener("click", () => showPopupBtn.click());

// Show or hide signup form
signupLoginLink.forEach(link => {
    link.addEventListener("click", (e) => {
        e.preventDefault();
        formPopup.classList[link.id === 'signup-link' ? 'add' : 'remove']("show-signup");
    });
});

Conclusion and Final words

In conclusion, creating a website’s homepage that features forms is a hands-on experience to learn various website components and fundamental web development concepts. I believe that by following the steps outlined in this blog post, you’ve successfully created your own website with login and registration forms using HTML, CSS, and JavaScript.

To further improve your web development skills, I recommend you try recreating other websites and login form projects available on this website. This will give you a better understanding of how HTML, CSS, and JavaScript are used to create unique website components.

If you encounter any problems while creating your website with forms, you can download the source code files for this project for free by clicking the Download button. Additionally, you can view a live demo of it by clicking the View Live button.

]]> https://www.codingnepalweb.com/create-website-login-registration-form-html/feed/ 0 How to Create Netflix Login Page in HTML and CSS https://www.codingnepalweb.com/create-netflix-login-page-html-css/ https://www.codingnepalweb.com/create-netflix-login-page-html-css/#respond Mon, 03 Jul 2023 14:53:09 +0000 https://www.codingnepalweb.com/?p=5646 How to a Create Netflix Login Page in HTML and CSS only

As one of the most popular streaming platforms worldwide, Netflix has a user-friendly login page that captures our attention with its sleek and intuitive design. Have you ever wondered how they create such a visually appealing login page? Well, Look no further!

In this beginner-friendly blog post, I’ll walk you through the process of creating a responsive Netflix login page using only HTML and CSS. You’ll learn how to create interactive and responsive forms, position elements on the page, and style them to match the Netflix aesthetic.

By the end of this blog post, you’ll understand how HTML and CSS work together to create a visually appealing and user-friendly form that looks great on all devices. So, let’s waste no time and start the steps to creating a Netflix login form page!

Steps To Create Netflix Login Page in HTML and CSS

To create a Netflix login or sign-in page using HTML and CSS, follow these step-by-step instructions:

  • Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  • Create an index.html file. The file name must be index and its extension .html
  • Create a style.css file. The file name must be style and its extension .css
  • Download and place the Images folder in your project directory. This folder includes the Netflix logo and the hero background image.

To start, add the following HTML codes to your index.html file: This code includes various elements such as navigation, headings, paragraphs, a form, input fields, a button, and links. I’ve also included default form validation using the required attribute in the input elements.

<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Netflix Login Page | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <a href="#"><img src="images/logo.svg" alt="logo"></a>
    </nav>
    <div class="form-wrapper">
        <h2>Sign In</h2>
        <form action="#">
            <div class="form-control">
                <input type="text" required>
                <label>Email or phone number</label>
            </div>
            <div class="form-control">
                <input type="password" required>
                <label>Password</label>
            </div>
            <button type="submit">Sign In</button>
            <div class="form-help"> 
                <div class="remember-me">
                    <input type="checkbox" id="remember-me">
                    <label for="remember-me">Remember me</label>
                </div>
                <a href="#">Need help?</a>
            </div>
        </form>
        <p>New to Netflix? <a href="#">Sign up now</a></p>
        <small>
            This page is protected by Google reCAPTCHA to ensure you're not a bot. 
            <a href="#">Learn more.</a>
        </small>
    </div>
</body>
</html>

Next, add the following CSS codes to your style.css file to achieve a design that looks like the Netflix login page. This code includes different styles for elements such as color, font, background, border, etc., and makes the page responsive for all devices. Feel free to customize these styles according to your preferences.

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

body {
    background: #000;
}

body::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    background: url("images/hero-img.jpg");
    background-position: center;
}

nav {
    position: fixed;
    padding: 25px 60px;
    z-index: 1;
}

nav a img {
    width: 167px;
}

.form-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 4px;
    padding: 70px;
    width: 450px;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, .75);
}

.form-wrapper h2 {
    color: #fff;
    font-size: 2rem;
}

.form-wrapper form {
    margin: 25px 0 65px;
}

form .form-control {
    height: 50px;
    position: relative;
    margin-bottom: 16px;
}

.form-control input {
    height: 100%;
    width: 100%;
    background: #333;
    border: none;
    outline: none;
    border-radius: 4px;
    color: #fff;
    font-size: 1rem;
    padding: 0 20px;
}

.form-control input:is(:focus, :valid) {
    background: #444;
    padding: 16px 20px 0;
}

.form-control label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    pointer-events: none;
    color: #8c8c8c;
    transition: all 0.1s ease;
}

.form-control input:is(:focus, :valid)~label {
    font-size: 0.75rem;
    transform: translateY(-130%);
}

form button {
    width: 100%;
    padding: 16px 0;
    font-size: 1rem;
    background: #e50914;
    color: #fff;
    font-weight: 500;
    border-radius: 4px;
    border: none;
    outline: none;
    margin: 25px 0 10px;
    cursor: pointer;
    transition: 0.1s ease;
}

form button:hover {
    background: #c40812;
}

.form-wrapper a {
    text-decoration: none;
}

.form-wrapper a:hover {
    text-decoration: underline;
}

.form-wrapper :where(label, p, small, a) {
    color: #b3b3b3;
}

form .form-help {
    display: flex;
    justify-content: space-between;
}

form .remember-me {
    display: flex;
}

form .remember-me input {
    margin-right: 5px;
    accent-color: #b3b3b3;
}

form .form-help :where(label, a) {
    font-size: 0.9rem;
}

.form-wrapper p a {
    color: #fff;
}

.form-wrapper small {
    display: block;
    margin-top: 15px;
    color: #b3b3b3;
}

.form-wrapper small a {
    color: #0071eb;
}

@media (max-width: 740px) {
    body::before {
        display: none;
    }

    nav, .form-wrapper {
        padding: 20px;
    }

    nav a img {
        width: 140px;
    }

    .form-wrapper {
        width: 100%;
        top: 43%;
    }

    .form-wrapper form {
        margin: 25px 0 40px;
    }
}

Conclusion and Final Words

In conclusion, creating a Netflix-inspired login page can be a valuable project for beginner web developers. It provides a great opportunity to dive into various aspects of web development, such as creating responsive forms, styling elements, and even incorporating floating label input animations.

By following the steps outlined in this post, I hope you’re able to create a responsive Netflix login page using only HTML and CSS. To understand the code better, you should experiment with it. To further enhance your web development skills, I recommend you try recreating the other login form designs that are available on this website.

If you encounter any problems while creating your Netflix login page, you can download the source code files for this Netflix login or sign-in page project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

]]> https://www.codingnepalweb.com/create-netflix-login-page-html-css/feed/ 0 How to Implement Form Validation in HTML CSS and JavaScript https://www.codingnepalweb.com/implement-form-validation-html-javascript/ https://www.codingnepalweb.com/implement-form-validation-html-javascript/#respond Thu, 25 May 2023 10:08:50 +0000 https://www.codingnepalweb.com/?p=5492 How to Implement Form Validation in HTML CSS and JavaScript

Forms play a crucial role in web development, allowing users to input and submit their data. However, ensuring the accuracy and integrity of the data is essential. This is where form validation comes into play.

Form validation involves ensuring that the data entered by users in a form meets specific criteria and is valid. Its primary purpose is to prevent the submission of incomplete or invalid data.

This blog post is designed to guide beginner web developers through the process of form validation using HTML, CSS, and JavaScript. You will start from scratch, learning how to create a responsive form using HTML and CSS. Then, we will dive into the world of form validation and explore how to apply it effectively using JavaScript.

Additionally, you’ll also learn how to show or hide password visibility on the toggle button click. To see a live demo of this form validation in action, scroll to the bottom of this page and click on the View Live Demo button.

Steps For Creating Form Validation in HTML

To create a form and do the validation using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create an thank-you.html file. The file name must be index and its extension .html
  4. Create a style.css file. The file name must be style and its extension .css
  5. Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file to create a basic form layout: This form includes full name, email, password, date of birth, and gender fields, but you can add or remove fields as desired.

<!DOCTYPE html>
<!-- Website - www.codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation in HTML | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link For Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
  </head>
  <body>
    <form action="thank-you.html">
      <h2>Form Validation</h2>
      <div class="form-group fullname">
        <label for="fullname">Full Name</label>
        <input type="text" id="fullname" placeholder="Enter your full name">
      </div>
      <div class="form-group email">
        <label for="email">Email Address</label>
        <input type="text" id="email" placeholder="Enter your email address">
      </div>
      <div class="form-group password">
        <label for="password">Password</label>
        <input type="password" id="password" placeholder="Enter your password">
        <i id="pass-toggle-btn" class="fa-solid fa-eye"></i>
      </div>
      <div class="form-group date">
        <label for="date">Birth Date</label>
        <input type="date" id="date" placeholder="Select your date">
      </div>
      <div class="form-group gender">
        <label for="gender">Gender</label>
        <select id="gender">
          <option value="" selected disabled>Select your gender</option>
          <option value="Male">Male</option>
          <option value="Female">Female</option>
          <option value="Other">Other</option>
        </select>
      </div>
      <div class="form-group submit-btn">
        <input type="submit" value="Submit">
      </div>
    </form>

    <script src="script.js"></script>
  </body>
</html>

Next, add the following HTML codes to your thank-you.html file: When the user fills out the form with valid data, they will be redirected to this HTML page. This page includes only a heading that says, “Thank you for filling out the form correctly.”.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thanks page</title>
</head>
<body>
    <h1>Thank you for filling out the form correctly.</h1>
</body>
</html>

Next, add the following CSS codes to your style.css file to style the form and make it responsive and beautiful. You can customize this code to your liking by adjusting the color, font, size, and other CSS properties.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  min-height: 100vh;
  background: #1BB295;
}

form {
  padding: 25px;
  background: #fff;
  max-width: 500px;
  width: 100%;
  border-radius: 7px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
}

form h2 {
  font-size: 27px;
  text-align: center;
  margin: 0px 0 30px;
}

form .form-group {
  margin-bottom: 15px;
  position: relative;
}

form label {
  display: block;
  font-size: 15px;
  margin-bottom: 7px;
}

form input,
form select {
  height: 45px;
  padding: 10px;
  width: 100%;
  font-size: 15px;
  outline: none;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #bfbfbf;
}

form input:focus,
form select:focus {
  border-color: #9a9a9a;
}

form input.error,
form select.error {
  border-color: #f91919;
  background: #f9f0f1;
}

form small {
  font-size: 14px;
  margin-top: 5px;
  display: block;
  color: #f91919;
}

form .password i {
  position: absolute;
  right: 0px;
  height: 45px;
  top: 28px;
  font-size: 13px;
  line-height: 45px;
  width: 45px;
  cursor: pointer;
  color: #939393;
  text-align: center;
}

.submit-btn {
  margin-top: 30px;
}

.submit-btn input {
  color: white;
  border: none;
  height: auto;
  font-size: 16px;
  padding: 13px 0;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 500;
  text-align: center;
  background: #1BB295;
  transition: 0.2s ease;
}

.submit-btn input:hover {
  background: #179b81;
}

Finally, add the following JavaScript code to your script.js file to enable form validation, display appropriate error messages, and implement the toggle functionality for password visibility.

// Selecting form and input elements
const form = document.querySelector("form");
const passwordInput = document.getElementById("password");
const passToggleBtn = document.getElementById("pass-toggle-btn");

// Function to display error messages
const showError = (field, errorText) => {
    field.classList.add("error");
    const errorElement = document.createElement("small");
    errorElement.classList.add("error-text");
    errorElement.innerText = errorText;
    field.closest(".form-group").appendChild(errorElement);
}

// Function to handle form submission
const handleFormData = (e) => {
    e.preventDefault();

    // Retrieving input elements
    const fullnameInput = document.getElementById("fullname");
    const emailInput = document.getElementById("email");
    const dateInput = document.getElementById("date");
    const genderInput = document.getElementById("gender");

    // Getting trimmed values from input fields
    const fullname = fullnameInput.value.trim();
    const email = emailInput.value.trim();
    const password = passwordInput.value.trim();
    const date = dateInput.value;
    const gender = genderInput.value;

    // Regular expression pattern for email validation
    const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

    // Clearing previous error messages
    document.querySelectorAll(".form-group .error").forEach(field => field.classList.remove("error"));
    document.querySelectorAll(".error-text").forEach(errorText => errorText.remove());

    // Performing validation checks
    if (fullname === "") {
        showError(fullnameInput, "Enter your full name");
    }
    if (!emailPattern.test(email)) {
        showError(emailInput, "Enter a valid email address");
    }
    if (password === "") {
        showError(passwordInput, "Enter your password");
    }
    if (date === "") {
        showError(dateInput, "Select your date of birth");
    }
    if (gender === "") {
        showError(genderInput, "Select your gender");
    }

    // Checking for any remaining errors before form submission
    const errorInputs = document.querySelectorAll(".form-group .error");
    if (errorInputs.length > 0) return;

    // Submitting the form
    form.submit();
}

// Toggling password visibility
passToggleBtn.addEventListener('click', () => {
    passToggleBtn.className = passwordInput.type === "password" ? "fa-solid fa-eye-slash" : "fa-solid fa-eye";
    passwordInput.type = passwordInput.type === "password" ? "text" : "password";
});

// Handling form submission event
form.addEventListener("submit", handleFormData);

Conclusion and Final Words

In conclusion, we started creating the structure of the form using HTML, defining the necessary input fields and their attributes. Then, we used CSS to apply styles to elements such as form fields, labels, and buttons. And last, we used JavaScript to implement form validation logic to ensure that users input valid data.

By following the instructions in this blog post, you should now have a functional form with validation features. For further enhancement of your web development skills, I encourage you to explore and experiment with the various types of forms and form validations provided on this website.

If you encounter any difficulties while creating your form or your code is not working as expected, you can download the source code files for this form for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

]]> https://www.codingnepalweb.com/implement-form-validation-html-javascript/feed/ 0 25+ Free Login & Registration Form Templates in HTML & CSS https://www.codingnepalweb.com/free-login-registration-form-html-css/ https://www.codingnepalweb.com/free-login-registration-form-html-css/#respond Tue, 22 Nov 2022 21:11:21 +0000 https://www.codingnepalweb.com/?p=4143 16 Free Login & Registration Form Templates in HTML & CSS

Login and registration forms play a vital role in the functionality of any website or application. They enable users to create accounts and gain access to the various features offered by the site. While there are numerous approaches to designing these forms, some designs stand out for their creativity and user engagement.

In case you’re unfamiliar, a login form refers to the section on a website or app where users input their login credentials (username and password) to access protected content. On the other hand, a registration form is an area where users are prompted to provide their personal information and details to create a new account.

In this blog post, I will showcase 25+ creative login and registration form designs created using HTML, CSS, and JavaScript. These forms will inspire you to create your own unique and stylish logins. Each form in the list includes a video tutorial and source codes that you can use for free.

So, without further delay, let’s dive into the list of login and registration form designs.

1. Simple Login Form with Icons in HTML

Simple Login Form in HTML

This is the most simple and perfect Login Form Design that I have created in HTML and CSS. As you can see in the given preview of this login form there is a title, some input fields for email or phone number and password with icons, a forget password and Signup link, and a button.

To boost your skills in HTML and CSS this Login Form could be really helpful for you. For the video tutorial and all the HTML and CSS source code for this Login Form, you can visit the given link.

2. Simple Registration Form in HTML

Simple Registration Form in HTML

I would highly recommend you learn to create this Registration Form which I have created in HTML and CSS. As you can see on the Registration Form I have added Input Fields which are for entering the name, email, password, and confirm password. Also, there is a checkbox to check and uncheck to accept terms and conditions and a button.

This Registration Form will definitely help to boost your skills in HTML and CSS. You should try to create this Registration Form. To create this Registration Form, I have used basic HTML and CSS code and I believe you can easily create this Signup Form. For the Video tutorial and source code for this Registration Form, you can visit the given link.

3. Login Form with Floating Label Animation

Login Form with Floating Label Animation

I have created this Login Form using HTML and CSS. In this Login Form, I have added some extra features like the input field’s label-up animation while you focus on it, remember me checkbox, and of course the UI design.

This Login From is also created using basic HTML and CSS code so should definitely try to learn to create this beautiful Login Form. While creating this Login you will learn to give gradient colors on the Login Form and animation also. The video tutorial link and the source code link for this Login From are given below.

4. Responsive Registration Form in HTML

Responsive Registration Form in HTML

As you can see on this Registration Form I have added many input fields to input different details like name, email, username, password, and many more. I have also added a radio button to choose gender and a button.

If you want to create a perfect Responsive Registration Form in HTML and CSS then it could be best for you. By creating this Registration Form, you will learn to use CSS flexbox, create your own radio buttons, and make Registration Responsive. The video tutorial and Source code links for this Responsive Registration Form are given below.

5. Login Form with Social Media Login Option

Login Form with Social Media Login Option

As you can see in the image of the Login Form. There are two types of login option user can get, one is they can log in by using email and password and with Twitter or Facebook. We can easily find this type of login option in the modern Login Form.

If you want to create a modern Login Form Design with Twitter and Facebook Login options in HTML and CSS, then this project could be suitable for you. For the video tutorial and source code for this Login Form, you can visit the given link.

 6. Responsive Login and Registration Form

Responsive Login and Registration Form

This is the most important Form Design that every web designer and application designer should learn. This is mostly used on every website and application. I have created this Login and Registration switchable Login and Registration Form in HTML and CSS.

This type of combined form is used, for example, if the user already has login details then they can use that login form, and if the user is now then they can click on the SignUp link and get registered. The source code and video code link for this Login & Registration Form links are provided below.

7. Responsive Flip Effect Login and Registration Form

Responsive Login and Registration Form in HTML

This Login and Registration Form is created in HTML and CSS. The main feature of this Login and Sign Up form is its flippable feature. Let me be clear, the left image you can see on this Login and Registration Form is the flip on the right side and left side.

If you click on the SignUp now link, then the image field left side and the Registration Form appear obviously Login Form section gets disappears. Similarly, on the Registration Form also. If you are looking for the video tutorial and source code for this Login and Registration Form then links are given below.

8. Responsive Multi Pages Registration Form in HTML

https://www.codingnepalweb.com/wp-content/uploads/2022/11/Responsive-Login-and-Registration-Form-in-HTML.png

This is the multipage form that you will learn to create. To create this Multi-pages Registration Form is created from HTML CSS and JavaScipt. As you can see on the image of this Registration Form there are lots of input fields with a button at the bottom. To go to the next page you have to fill in all the input fields.

After you fill in all the details in the required input fields and click on the next button another Registration Page appears and a submit and the back button also. Visit the following links for the video tutorial and HTML CSS and JavaScript code for this Multi-pages Registration Form.

9 . Multi-Step Registration Form with Progress Bar

Multi-Step Registration From

This is the advanced version of the Registration Form with having best user interface and experience. The world’s number one company Google has also this type of multi-step registration feature which we can see while creating our google account.

In this Registration Form, you have to fill in only two input fields at a time and click on the next button for further. You can easily create this Multi-Step Registration using some HTML CSS and JavaScript code. For the video tutorial and Source code for this Registration Form, you may visit the given links

10. Login & Registration Form in HTML CSS

Login & Registration Form in HTML CSS

This is the best Login and Signup Form I have ever created in HTML CSS and JavaScript. As you can see on this Login and Registration Form, it has all the features that a Login and Signup Form should have such as login and signup option through social media like Facebook and Google, password show and hides feature, and many more.

You must try to create this Login and Signup Form in HTML CSS and JavaScript. This Login and Registration Form will help you to boost your skills in UI/Ux design and of course in HTML CSS and JavaScript. You can get video tutorials and source code links for this Login and Signup Form below.

11.  Popup Login Form in HTML and CSS

Popup Login Form HTML CSS

This is the most unique Login Form Design on the list. The feature that makes this Login Form different is its popup animation. Basically, at first, you will have a button, when you click on the button this Login Form will appear. To close the Login Form you have to click on the close icon which is situated in the top right corner.

To create this Login Form I have used HTML and CSS. So even if you are a beginner at HTML and CSS then also you can create this Popup Login Form. Links for the Video tutorial and source code to this Popup Login Form, you can without below.

12. Login Form with Glowing Border Animation

Login Form with Glowing Border Animation

This Login From could be best for gaming websites because of its gaming vibes color combination and animation. While you focus on the input field or start typing each input field’s border starts glowing smoothly.

If you are looking for an animated Login Form with simple HTML and CSS code then this Login Form could fulfill your desire. To get the video tutorial and source code file for this animated Login Form, you can visit the given links

13. Neumorphism Login Form in HTML CSS

Neumorphism Login Form in HTML CSS

This Login Form is Fully Based on neumorphism UI. As you can see in the given image all the section form has different and interesting color and shadows. If you are looking for a Login Form with a neumorphims user interface then you should try this Login Form.

This Login From is created in HTML and CSS without any bootstrap code because I prefer to create designs in Pure CSS. If you have liked this neumorphism Login Form then the video tutorial and source code links are available below.

14. Glassmorphism Login Form in HTML CSS

Glassmorphism Login Form in HTML CSS

If you are looking for glassmorphism Login Form then here it is. This is the simple Login Form with the glass user interface which you have seen in the image. To create this Login Form I have used HTML CSS & JavaScript. It also has a password show and hides feature.

This is the beginner-friendly Login Form that can help to boost your skills in HTML CSS & JavaScript. Also, from this form, you will learn to create a glass effect. The video tutorial and source code link for this glassmorphism Login Form is given below.

15. Login Form Validation with Shake Effect

Login Form with Validate Email & Password

This is the best Login Form in the list with having feature of Email Address and Password Validation. If you enter an invalid email or password then those input fields shake with the red error message.

I would highly recommend you try to create this Login Form if you are learning HTML CSS and JavaScript. You can easily create this Login From with your basic HTML CSS & JavaScript knowledge.

For the source code and video tutorial link for this Login Form with Validation Feature, check below.

16. Form with Email & Password Validation in JS

Form with Email & Password Validation in JS

This is the best Registration form in the list that I have created in HTML CSS and JavaScript. The unique feature of this Registration From is that it can validate your email, and password and also confirm whether that created passwords are matched or not. It has also a password show and hides feature.

If you want to create a Registration Form in HTML CSS and JavaScript and have basic on it then also this Registration Form could be best for you. Do visit the given links for the video tutorial and source code of this Registration Form.

17. School Registration Form in HTML and CSS

School Registration Form in HTML and CSS

This registration form was created using HTML and CSS and consists of a single page. The form includes multiple fields such as name, address, email, phone number, gender, date of birth, and various others, which are displayed as input boxes.

If you are new to front-end development and wish to build a school registration form using HTML and CSS, this registration form template would be highly suitable for you. You can access the source code and live demo of this form by clicking the provided buttons.

18. Animated Login Registration Form in HTML CSS

Animated Login Registration Form in HTML CSS

This is a login and registration form template created using HTML, CSS, and JavaScript. The initial page that appears is a login form containing input fields. Clicking the signup button grants users access to the registration page.

If you are seeking a login and registration form with a modern UI and UX design, this form template might fulfill your requirements. By clicking the provided buttons, you can access the source code and live demo of this form.

19. Login Form with Facebook and Twitter Buttons

Login form with Facebook and Twitter Buttons

This login form design is considered one of the best, as it provides the convenience of Facebook and Twitter login options for users. The form is created using HTML and CSS, ensuring a visually appealing design.

If you require a login form that includes options like Facebook or Twitter login, this form template could be suitable for your needs. By clicking the provided buttons, you can access the source code and live demo of this form.

20. Website with Login Registration Form in HTML CSS

Website with login registration form in HTML CSSThis template offers a website that features both a login and registration form. The website includes a navigation bar with various navigation links. To display the login form, there is a dedicated button, and to access the registration form, users need to click on the signup button within the login form. The entire design has been created using HTML and CSS.

If you are looking for a website that includes a login and registration form, this template is designed to meet your requirements. By clicking the provided buttons, you can access the source code and live demo of this form.

21. Login and Signup Form with Sliding Animation

Login & Registration Form HTML & CSS

This login and signup form is made using HTML, CSS, and JavaScript. The login form has email and password input fields, whereas the signup form has three input fields: email, password, and confirm password. Users can access the signup form by clicking on the signup tab. There is a sliding animation when switching from login to signup or signup to login.

If you are searching for a login and signup form with sliding animation, this form template created using HTML, CSS, and JavaScript, might fulfill your requirements. By clicking the provided buttons, you can access the source code and live demo of this form.

22. Gradient Background Login Form HTML and CSS

Animated Login Form using HTML CSS & JavaScript

This attractive gradient login form is designed using HTML and CSS. Its main feature is the inclusion of Facebook and Google login buttons, which provide multiple login options for the user. The gradient background makes the login form more visually appealing.

If you are in search of a visually appealing login form that offers Facebook and Google login options, then this login form template is exactly what you need. By simply clicking the provided buttons, you can conveniently access the source code and live demo of this form.

23. Login Form with Icons in HTML and CSS

Cool Login Form in HTML CSS & JavaScript

This login form template built using HTML and CSS is considered one of the simple but useful form design. Its unique feature of a toggle option for showing and hiding information adds to its appeal and interest.

If you are looking for a login form template that includes a feature to show and hide passwords, then this particular template could fulfill your requirements. By clicking the provided buttons, you can easily access the source code and live demo of this form.

24. Simple Login Form with Floating Label Animation

Login Page in HTML and CSS

This login form is built using HTML and CSS. Additionally, it features an input label animation that moves up when the input field is in focus. In short, you can say this form has floating label animation.

If you are in search of a login form template with floating label animation then this form can meet your requirements. By clicking the buttons provided, you can easily access the source code and live demo of this form.

25. Login Form Validation in HTML CSS & JavaScript

Login Form Validation in HTML CSS & JavaScript

This simple login form is created using HTML, CSS, and JavaScript, and its key feature is the validation of the email and password entered by the user. If the user’s entered email or password does not match the validation criteria, then a custom error message will be shown.

If you are looking for a simple login form that validates the email and password entered by the user, then this login form could be the right match for your needs. By clicking the provided buttons, you can conveniently access the source code and live demo of this form.

26. Signup Form with Validation Feature in HTML

How to Implement Form Validation in HTML CSS and JavaScript only

This form uses HTML, CSS, and JavaScript to provide seamless validation and password visibility toggle functionalities. When users attempt to submit the form with invalid or incomplete data, informative error messages appear below the respective fields, guiding them toward accurate inputs.

Whether you’re a newbie web developer seeking to learn or in need of a reliable signup form for various purposes, this form is an ideal choice. Its user-friendly design and validation features make it a valuable asset for your projects.

Conclusion and Final Words

I hope you enjoyed this blog post showcasing 25+ creative login and registration forms. If you are looking for more inspiration, be sure to check out this website for a variety of other form templates.

If you’re just starting your journey in web development, I recommend checking out our post on the Top 12 Beginner-Friendly Website Templates in HTML, CSS, and JavaScript. These designs are tailored to newcomers, helping you improve your skills while creating stunning websites.

Feel free to share this blog with fellow enthusiasts. Thank you for visiting!

]]> https://www.codingnepalweb.com/free-login-registration-form-html-css/feed/ 0 How to Validate Email & Password in HTML CSS JavaScript https://www.codingnepalweb.com/javascript-email-password-validation/ https://www.codingnepalweb.com/javascript-email-password-validation/#respond Wed, 17 Aug 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4164 How to Validate Email & Password in HTML CSS JavaScript

Hello friend, I hope you are doing and creating creative pieces of stuff. Today in this blog, you will learn How to Validate Email & Password in HTML CSS JavaScript. Although, I have a separate blog about Email Validation, Password Validation, and Password Show Hide, this time I’m going to add all these sections in one form.

Email and Password Validation means the process of verifying the email address and the strength of the password the user has input. And, the password show hide means showing and hiding the password while clicking on the icon for security purposes.

Have a quick look at the given image of our project Email and Password Validation. On the left side form, you can see three input blank input fields and one button. On another right-side form, you can see I have filled in some invalid data, that’s why there is some red-colored text with an error message.

Actually when we put inaccurate data on the input field or directly click on the button then those errors appear with an error message. On the password field, on the right side, we can see the eye icon. When we click on the icon, it helps us to show the characters that we filled. The confirm password field will check the created password and the confirmed password is matching or not.

Rather than theoretically, I would highly recommend you to watch the given video tutorial of our project [How to Validate Email & Password in HTML CSS JavaScript], in that video, I have shown a demo of this project and all the HTML CSS & JavaScript code that I have used to validate this email and password and of course password show and hide feature.

Email and Password Validation in HTML CSS & JavaScript

I have provided all the HTML CSS & JavaScript code that I have used to Validate Email, Password, and Show/Hide passwords. Before getting into the source code file, Let me explain the given video tutorial on this form validation briefly.

As you have seen in the video tutorial. At first, there was a signup form with three empty input fields and a button. When I clicked on the button without filling in the required date, a red error message appeared. After that when I started to enter my valid data the error message disappeared. Also, we could show and hide passwords by clicking on the eye icon. The email required proper valid email formation and the create password field needs the combination of numbers, special symbols, capital, and small letter. Basically, we need not put eight characters by mixing all those characters.

To make this sign-up form I have used HTML and CSS to validate the form and to show and hide the password,  I have used some JavaScript code.

I accept, now you can create this type of form and validate email and password using HTML CSS and JavaScript, and also show and hide passwords while clicking on the eye icon with changing icon. If you are feeling complicated, I have provided all the HTML CSS and JavaScript code below.

You Might Like This:

Email & Password Validation [Source Code]

To get the following HTML CSS and JavaScript code for the Email & Password Validation, you need to create three files one is an HTML file and another is a CSS file and a JavaScript file. After creating these three files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Email and Password Validation</title>

    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css" />

    <!-- Boxicons CSS -->
    <link
      href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container">
      <header>Signup</header>
      <form action="https://www.codinglabweb.com/">
        <div class="field email-field">
          <div class="input-field">
            <input type="email" placeholder="Enter your email" class="email" />
          </div>
          <span class="error email-error">
            <i class="bx bx-error-circle error-icon"></i>
            <p class="error-text">Please enter a valid email</p>
          </span>
        </div>
        <div class="field create-password">
          <div class="input-field">
            <input
              type="password"
              placeholder="Create password"
              class="password"
            />
            <i class="bx bx-hide show-hide"></i>
          </div>
          <span class="error password-error">
            <i class="bx bx-error-circle error-icon"></i>
            <p class="error-text">
              Please enter atleast 8 charatcer with number, symbol, small and
              capital letter.
            </p>
          </span>
        </div>
        <div class="field confirm-password">
          <div class="input-field">
            <input
              type="password"
              placeholder="Confirm password"
              class="cPassword"
            />
            <i class="bx bx-hide show-hide"></i>
          </div>
          <span class="error cPassword-error">
            <i class="bx bx-error-circle error-icon"></i>
            <p class="error-text">Password don't match</p>
          </span>
        </div>
        <div class="input-field button">
          <input type="submit" value="Submit Now" />
        </div>
      </form>
    </div>

    <!-- JavaScript -->
   <script src="js/script.js"></script>
  </body>
</html>


/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4070f4;
}
.container {
  position: relative;
  max-width: 370px;
  width: 100%;
  padding: 25px;
  border-radius: 8px;
  background-color: #fff;
}
.container header {
  font-size: 22px;
  font-weight: 600;
  color: #333;
}
.container form {
  margin-top: 30px;
}
form .field {
  margin-bottom: 20px;
}
form .input-field {
  position: relative;
  height: 55px;
  width: 100%;
}
.input-field input {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  border-radius: 8px;
  padding: 0 15px;
  border: 1px solid #d1d1d1;
}
.invalid input {
  border-color: #d93025;
}
.input-field .show-hide {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #919191;
  cursor: pointer;
  padding: 3px;
}
.field .error {
  display: flex;
  align-items: center;
  margin-top: 6px;
  color: #d93025;
  font-size: 13px;
  display: none;
}
.invalid .error {
  display: flex;
}
.error .error-icon {
  margin-right: 6px;
  font-size: 15px;
}
.create-password .error {
  align-items: flex-start;
}
.create-password .error-icon {
  margin-top: 4px;
}
.button {
  margin: 25px 0 6px;
}
.button input {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  background-color: #4070f4;
  cursor: pointer;
  transition: all 0.3s ease;
}
.button input:hover {
  background-color: #0e4bf1;
}

const form = document.querySelector("form"),
  emailField = form.querySelector(".email-field"),
  emailInput = emailField.querySelector(".email"),
  passField = form.querySelector(".create-password"),
  passInput = passField.querySelector(".password"),
  cPassField = form.querySelector(".confirm-password"),
  cPassInput = cPassField.querySelector(".cPassword");

// Email Validtion
function checkEmail() {
  const emaiPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
  if (!emailInput.value.match(emaiPattern)) {
    return emailField.classList.add("invalid"); //adding invalid class if email value do not mathced with email pattern
  }
  emailField.classList.remove("invalid"); //removing invalid class if email value matched with emaiPattern
}

// Hide and show password
const eyeIcons = document.querySelectorAll(".show-hide");

eyeIcons.forEach((eyeIcon) => {
  eyeIcon.addEventListener("click", () => {
    const pInput = eyeIcon.parentElement.querySelector("input"); //getting parent element of eye icon and selecting the password input
    if (pInput.type === "password") {
      eyeIcon.classList.replace("bx-hide", "bx-show");
      return (pInput.type = "text");
    }
    eyeIcon.classList.replace("bx-show", "bx-hide");
    pInput.type = "password";
  });
});

// Password Validation
function createPass() {
  const passPattern =
    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

  if (!passInput.value.match(passPattern)) {
    return passField.classList.add("invalid"); //adding invalid class if password input value do not match with passPattern
  }
  passField.classList.remove("invalid"); //removing invalid class if password input value matched with passPattern
}

// Confirm Password Validtion
function confirmPass() {
  if (passInput.value !== cPassInput.value || cPassInput.value === "") {
    return cPassField.classList.add("invalid");
  }
  cPassField.classList.remove("invalid");
}

// Calling Funtion on Form Sumbit
form.addEventListener("submit", (e) => {
  e.preventDefault(); //preventing form submitting
  checkEmail();
  createPass();
  confirmPass();

  //calling function on key up
  emailInput.addEventListener("keyup", checkEmail);
  passInput.addEventListener("keyup", createPass);
  cPassInput.addEventListener("keyup", confirmPass);

  if (
    !emailField.classList.contains("invalid") &&
    !passField.classList.contains("invalid") &&
    !cPassField.classList.contains("invalid")
  ) {
    location.href = form.getAttribute("action");
  }
});

If you face any difficulties while creating your Form Validation or your code is not working as expected, you can download the source code files for this Email Password Validation for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

 

]]> https://www.codingnepalweb.com/javascript-email-password-validation/feed/ 0