Register Form with Username Availability Checker

Enhance user experience on your register form with a username availability checker. Learn how to implement a form feature that checks username availability in real-time.

Preview
Code

<div class="login-card">
  <img
    src="https://pub-static.fotor.com/assets/projects/pages/5ff61721271e45d2b9bbc6dbbd4b14c7/300w/purple-cute-school-girl-78a8ba2c107c4ce1bb7e5a3de0ed9528.jpg"
  />
  <h2>Register</h2>
  <h3>Enter your credentials</h3>
  <form class="login-form">
    <div class="username">
      <input
        spellcheck="false"
        class="control"
        type="text"
        placeholder="Username"
        onkeyup="handleChange(event)"
        onkeydown="handleStartTyping()"
      />
      <div id="spinner" class="spinner"></div>
    </div>
    <div id="alert" class="alert">Username already exists</div>
    <input
      spellcheck="false"
      class="control"
      id="password"
      type="password"
      placeholder="Password"
    />
    <button class="control" type="button">Register</button>
  </form>
</div>

* {
  box-sizing: border-box;
}

html,
body,
.wrapper {
  height: 100%;
}

@keyframes rotate {
  100% {
    background-position: 0% 50%;
  }
}

body {
  display: grid;
  place-items: center;
  margin: 0;
  background-color: #000000;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/es6-signups/ef99c2e743e35ab2ae93e5fca51777094fe00ec6/signup-1/bbblurry.svg");
  background-repeat: no-repeat;
  background-size: 300vh;
  font-family: "Euclid Circular A";
  color: #3a334e;
  animation: rotate 5s infinite alternate linear;
}

button {
  background: transparent;
  border: 0;
  cursor: pointer;
}

.control {
  border: 0;
  border-radius: 8px;
  outline: none;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: transparent;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #5a4f79;
  margin: 8px 0;
  font-family: inherit;
  text-align: left;
  font-size: 16px;
  transition: 0.4s;
}

.login-card {
  width: 400px;
  padding: 100px 30px 64px;
  border-radius: 1.25rem;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  backdrop-filter: blur(10px);
}

.login-card > h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 0 0 6px;
  color: #f9f9f9;
}

.login-card img {
  width: 120px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 5px;
}

.login-card > h3 {
  color: #837f90;
  margin: 0 0 40px;
  font-weight: 500;
  font-size: 1rem;
}

.login-form {
  width: 100%;
  margin: 0;
  display: grid;
}

.login-form input.control::placeholder {
  color: #aaa7bc;
}

.login-form > button.control {
  cursor: pointer;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: #f9f9f9;
  color: #000000;
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
  transition: all 0.375s;
}

.username {
  position: relative;
}

@keyframes spin {
  100% {
    rotate: 1turn;
  }
}

.spinner {
  position: absolute;
  top: 50%;
  right: 16px;
  translate: 0 -50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid #ccc9e1;
  border-top-color: #8f44fd;
  opacity: 0;
  animation: spin 1s infinite linear;
}

.spinner.visible {
  opacity: 1;
}

.alert {
  overflow: hidden;
  text-align: left;
  padding: 0 16px;
  color: #ff3e72;
  height: 0;
  transition: 0.3s;
}

.alert.visible {
  height: 32px;
}

const usernames = ["david", "david1", "david2"];

const spinner = document.getElementById("spinner"),
  alert = document.getElementById("alert");

const updateUi = (value) => {
  console.log("value", value);
  spinner.classList.remove("visible");

  const usernameExists = usernames.some((u) => u === value);

  console.log("usernames", usernames);
  console.log("usernameExists", usernameExists);

  if (usernameExists) {
    alert.classList.add("visible");
  } else {
    alert.classList.remove("visible");
  }
};

const debounce = (callback, time) => {
  let interval;
  return (...args) => {
    clearTimeout(interval);
    interval = setTimeout(() => {
      callback.apply(null, args);
    }, time);
  };
};

const handleStartTyping = () => {
  spinner.classList.add("visible");
};

const handleChange = debounce((input) => {
  const { value } = input.target;

  updateUi(value);
}, 500);

Enhance your website's registration process with a form that includes a username availability checker. This tutorial will guide you through creating and customizing a registration form using HTML, CSS, and JavaScript to provide real-time feedback on username availability.

Step 1: Copy the Code Snippet

Start by copying the provided HTML, CSS, and JavaScript code snippets. This includes the structure and basic styles required to create a functional registration form with a username availability checker.

Step 2: Link CSS

Ensure the styles.css file is correctly linked in your HTML document. Add the following <link> tag within the <head> section to import the CSS styles:

<link rel="stylesheet" href="styles.css">

Also, add the following <script> tag before the closing </body> tag to link your custom JavaScript file:
```
<script src="script.js"></script>
```

Step 3: Customize and Make it Yours

Customize the registration form to match your website's theme and functionality requirements. Modify the HTML structure to include additional fields or elements, adjust CSS styles (styles.css) for colors, sizes, and form element designs, and enhance JavaScript logic (script.js) for more sophisticated username availability checking and other form validations.

By following these steps, you can implement and personalize a registration form with a username availability checker using HTML, CSS, and JavaScript, providing a better user experience on your website.

Code Explanation

HTML Code

Card Container (`<div class="login-card">`):

A div element that serves as the container for the registration card.

Profile Image (`<img>`):

An img element that displays a profile picture at the top of the card.
src attribute points to the image URL.

Heading 2 (`<h2>`Register`</h2>`):

An h2 element that displays the title "Register."

Subheading 3 (`<h3>`Enter your credentials`</h3>`):

An h3 element that provides a subheading "Enter your credentials."

Form (`<form class="login-form">`):

A form element with the class login-form that contains the input fields and button.

Username Input Container (`<div class="username">`):

A div element that contains the username input field and a spinner.
Username Input Field (<input>):
- An input element for the username input.
- spellcheck="false" disables spell checking.
- class="control" applies styling.
- type="text" specifies that it's a text input.
- placeholder="Username" displays a placeholder text.
- onkeyup="handleChange(event)" calls the handleChange function when a key is released.
- onkeydown="handleStartTyping()" calls the handleStartTyping function when a key is pressed.
Spinner (<div id="spinner" class="spinner"></div>):
- A div element with an id of spinner and class spinner for indicating loading or validation status.

Alert Message (`<div id="alert" class="alert">`Username already exists`</div>`):

A div element with an id of alert and class alert that displays the message "Username already exists."

Password Input Field (`<input>`):

An input element for the password input.
spellcheck="false" disables spell checking.
class="control" applies styling.
id="password" assigns an ID for further referencing.
type="password" specifies that it's a password input.
placeholder="Password" displays a placeholder text.

Register Button (`<button class="control" type="button">`Register`</button>`):

A button element with class control and type="button" that displays the text "Register."

CSS Code

Global Styles

* {
  box-sizing: border-box;
}
html,
body,
.wrapper {
  height: 100%;
}

*: Applies box-sizing: border-box to all elements to include padding and border in the element's total width and height.
html, body, wrapper: Sets the height to 100% for the entire document and a potential wrapper element.

Keyframes for Animation

@keyframes rotate {
  100% {
    background-position: 0% 50%;
  }
}

@keyframes rotate: Defines an animation named rotate that moves the background position.

Body Styling

body {
  display: grid;
  place-items: center;
  margin: 0;
  background-color: #000000;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/es6-signups/ef99c2e743e35ab2ae93e5fca51777094fe00ec6/signup-1/bbblurry.svg");
  background-repeat: no-repeat;
  background-size: 300vh;
  font-family: "Euclid Circular A";
  color: #3a334e;
  animation: rotate 5s infinite alternate linear;
}

display: grid; place-items: center;: Centers content both vertically and horizontally.
background-color: #000000;: Sets the background color to black.
background-image: url(...);: Sets a background image.
background-repeat: no-repeat; background-size: 300vh;: Ensures the background image doesn't repeat and scales it to 300 times the viewport height.
animation: rotate 5s infinite alternate linear;: Applies the rotate animation to the background.

Button Styling

button {
  background: transparent;
  border: 0;
  cursor: pointer;
}

background: transparent;: Sets a transparent background.
border: 0;: Removes the border.
cursor: pointer;: Changes the cursor to a pointer on hover.

Control Class Styling

.control {
  border: 0;
  border-radius: 8px;
  outline: none;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: transparent;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #5a4f79;
  margin: 8px 0;
  font-family: inherit;
  text-align: left;
  font-size: 16px;
  transition: 0.4s;
}

border: 0; outline: none;: Removes default border and outline.
width: 100%; height: 56px;: Sets the dimensions.
padding: 0 16px;: Adds padding.
background: transparent;: Sets a transparent background.
border: 1px solid rgba(255, 255, 255, 0.2);: Adds a semi-transparent border.
color: #5a4f79;: Sets the text color.
margin: 8px 0;: Adds vertical margin.
font-family: inherit; text-align: left; font-size: 16px;: Inherits the font family, aligns text to the left, and sets the font size.
transition: 0.4s;: Adds a transition effect.

Login Card Styling

.login-card {
  width: 400px;
  padding: 100px 30px 64px;
  border-radius: 1.25rem;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  backdrop-filter: blur(10px);
}

width: 400px;: Sets the width.
padding: 100px 30px 64px;: Adds padding.
border-radius: 1.25rem;: Rounds the corners.
background: rgba(0, 0, 0, 0.5);: Adds a semi-transparent black background.
text-align: center;: Centers text.
backdrop-filter: blur(10px);: Applies a blur effect to the background.

Headings in Login Card

.login-card > h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 0 0 6px;
  color: #f9f9f9;
}
.login-card > h3 {
  color: #837f90;
  margin: 0 0 40px;
  font-weight: 500;
  font-size: 1rem;
}

Styles the h2 and h3 elements inside .login-card with specific font sizes, weights, margins, and colors.

Image in Login Card

.login-card img {
  width: 120px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 5px;
}

Styles the img element inside .login-card with specific width, border-radius, border, and padding.

Login Form Styling

.login-form {
  width: 100%;
  margin: 0;
  display: grid;
}

width: 100%; margin: 0;: Sets the width and removes margin.
display: grid;: Uses a grid layout for form elements.

Placeholder and Button Styling in Login Form

.login-form input.control::placeholder {
  color: #aaa7bc;
}
.login-form > button.control {
  cursor: pointer;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: #f9f9f9;
  color: #000000;
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
  transition: all 0.375s;
}

Styles the placeholder text in input.control and the button.control inside the .login-form with specific colors, dimensions, backgrounds, font properties, and transitions.

Username Container

.username {
  position: relative;
}

position: relative;: Positions the username container relative to its normal position, enabling absolute positioning of child elements.

Keyframes for Spinner Animation

@keyframes spin {
  100% {
    rotate: 1turn;
  }
}

@keyframes spin: Defines an animation named spin that rotates an element one full turn (360 degrees).

Spinner Styling

.spinner {
  position: absolute;
  top: 50%;
  right: 16px;
  translate: 0 -50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid #ccc9e1;
  border-top-color: #8f44fd;
  opacity: 0;
  animation: spin 1s infinite linear;
}
.spinner.visible {
  opacity: 1;
}

Styles the .spinner element with positioning, dimensions, border properties, and an animation.
.spinner.visible: Changes the opacity to 1 when the visible class is added, making the spinner visible.

Alert Message Styling

.alert {
  overflow: hidden;
  text-align: left;
  padding: 0 16px;
  color: #ff3e72;
  height: 0;
  transition: 0.3s;
}
.alert.visible {
  height: 32px;
}

Styles the .alert element with text alignment, padding, color, initial height, and a transition effect.
.alert.visible: Sets the height to 32px when the visible class is added, making the alert message visible.

JavaScript Code

Variables

const usernames = ["david", "david1", "david2"];

usernames: An array of existing usernames to check against the user's input.

const spinner = document.getElementById("spinner"),
  alert = document.getElementById("alert");

spinner: A reference to the DOM element with the ID spinner, which displays a loading spinner.
alert: A reference to the DOM element with the ID alert, which shows an alert message if the username already exists.

Function: updateUi

const updateUi = (value) => {
  console.log("value", value);
  spinner.classList.remove("visible");
  const usernameExists = usernames.some((u) => u === value);
  console.log("usernames", usernames);
  console.log("usernameExists", usernameExists);
  if (usernameExists) {
    alert.classList.add("visible");
  } else {
    alert.classList.remove("visible");
  }
};

updateUi(value): Updates the UI based on whether the username exists.
Logs the input value to the console.
Hides the spinner by removing the visible class.
Checks if the input value exists in the usernames array using the some method.
Logs the usernames array and the result of the check (usernameExists) to the console.
Adds the visible class to the alert if the username exists, otherwise removes it.

Function: debounce

const debounce = (callback, time) => {
  let interval;
  return (...args) => {
    clearTimeout(interval);
    interval = setTimeout(() => {
      callback.apply(null, args);
    }, time);
  };
};

debounce(callback, time): Creates a debounced version of the given callback function.
interval: A variable to store the timeout ID.
Returns a function that clears the previous timeout and sets a new one, delaying the callback execution by the specified time.

Function: handleStartTyping

const handleStartTyping = () => {
  spinner.classList.add("visible");
};

handleStartTyping(): Shows the spinner by adding the visible class when the user starts typing.

Function: handleChange

const handleChange = debounce((input) => {
  const { value } = input.target;
  updateUi(value);
}, 500);

handleChange: A debounced function to handle input changes.
Extracts the value from the input event.
Calls updateUi(value) to update the UI.
The function is debounced to only execute after the user has stopped typing for 500 milliseconds.