One of the most common elements where you’ll need to apply user input validation is via a form. This could be a user sign up form, a contact us form, or a simple questionnaire.

Outcomes of the Tutorial

By the end of this article , you will be able to:

• Understand common issues with form validation.
• How to utilise the Yup schema validation library alongside the Formik form library.
• How to build a form in React with full validation (same principles apply for React Native, with different component syntax).

Contents

• What is Validation?
• The Object to Be Validated
• Introducing Yup and Formik
• How to Add Validation to a Form
• Conclusion

What is Validation?

Validation is defined as:

the action of checking or proving the validity or accuracy of something.

But what does that mean in computer speak? This could be a multitude of things, but the premise still stands. You could be validating a variable value or an object against a pre-determined set of rules or regulations.

Examples of validation rules could be:

• Password must be at least 8 characters and contain a special character.
• Username must be unique.
• Date of birth must be received as a string, in a particular format, for example ISO8601

Let’s use the example of a user registration form on a website.

The Object to Be Validated

The form will comprise of several inputs to form a UserRegistration object. Like so‌:

interface UserRegistration {
  firstName: string;
  surname: string;
  email: string;
  dob: string;
}

Above is an interface (contract) for a UserRegistration object. It simply defines some key user information which needs to be collected, with all values being a string value.

While languages like TypeScript are useful for ensuring that we pass the correct types to functions throughout our application, they do not inherently validate the actual content or values within those types. TypeScript guarantees that a variable is of a specific type, such as a string or a number, but it does not verify if the content of that string or number meets specific criteria or constraints.

What If We Didn't Validate the Values?

Ok, before we move onto how to validate, let's look at what could happen if we don't validate.

Without validation, a user could input the following values:

Firstname: 1231301‌
‌Surname: Hello##test_101‌
‌Email: user_123@@email.to@.com‌
‌DoB: 10+12+1909

These values may seem perfectly acceptable, and your front end might allow them to be submitted without any issues. And the API will likely accept these values initially.

But when the API attempts to parse these values (converting) during the request processing, it will encounter errors and fail to process the request correctly.

There are several negative consequences to this approach:

1. Increased Server Load: The front end is making multiple invalid requests to the server, which unnecessarily strains the server. This extra load could have been avoided.
2. Potentially Higher Costs: The cost of handling these invalid requests can increase significantly, depending on your hosting plan and server configuration. Each invalid request consumes server resources that could be used more efficiently.
3. Poor User Experience (UX): Users will likely become frustrated if they repeatedly enter details, submit the form, and then receive error messages indicating that their inputs are invalid. This can lead to a negative perception of the application.

To mitigate these issues and reduce the number of invalid requests, we can implement 'client-side validation' to ensure that the data meets the required criteria before sending the API request.

Introducing Yup and Formik

Yup and Formik are both libraries which you can add to any React or React Native application via npm or yarn.

Yup is a schema building library that allows you to build schemas for validation at runtime. It has a plethora of extension functions which can set rulesets, transform values, and return validation messages right out the box.

Let's take a look at an example of a Yup schema for our user form:‌

import * as Yup from 'yup';

// If using Typescript, you can utilise a wrapper function to enforce strict typing

const createYupSchema = <T extends object>(schema: Yup.ObjectSchema<T>): Yup.ObjectSchema<T> => schema;

export const userFormSchema = createYupSchema<UserInput>(
  Yup.object().shape({
    firstname: Yup.string().required('First name is required'),
    surname: Yup.string().required('Surname is required'),
    email: Yup.string().email('Invalid email format').required('Email is required'),
    dob: Yup.string().required('Date of Birth is required'),
  })
);

// JS Version
export const validationSchema = Yup.object({
  firstname: Yup.string().required('First name is required'),

  surname: Yup.string().required('Surname is required'),
  email: Yup.string().email('Invalid email format').required('Email is required'),
  dob: Yup.date().required('Date of Birth is required')
});

We're creating a Yup object (schema) which contains all of our Keys for our UserInput interface.

Schema Parts:

• key: the key which will be used later for the name of our element (as we're using TypeScript, this needs to match the object key name).
• ruleset: for all keys, apply a ruleset. A ruleset must start with a typing declaration, that is Yup.string() or Yup.number() and so on. You can then chain your other validation functions.

Using TypeScript ensures that we match the schema type to our interface types.

For example, if we try and do this:

firstname: Yup.date().required();

it will throw a TypeScript error complaining that firstname cannot be validated as if it was a date, as the type of firstname is a string.

How to Add Validation to a Form

This is where our Formik library comes in and makes things much easier than validating a form and implementing error handling manually.

Formik is a library which encapsulates a <Form/> component. It allows us to create richer forms in React and React Native, giving us access to features like form state, error handling, validation, and processing of form submissions much more efficiently.

You can access a pre-built version of a UserForm utilising Yup, Formik, and React (Vite) at my GitHub here. Simply clone the GitHub repository and follow the README.md instructions. ‌

<Formik
        initialValues={initialValues}
        validationSchema={userFormSchema}
        onSubmit={onSubmit}
      >
        {({ isValid, dirty, isSubmitting }) => (
          <Form>
            <div className="form-control">
              <label htmlFor="firstName">First Name</label>
              <Field type="text" id="firstName" name="firstName" />
              <ErrorMessage name="firstName" component="div" className="error" />
            </div>

            <div className="form-control">
              <label htmlFor="surname">Surname</label>
              <Field type="text" id="surname" name="surname" />
              <ErrorMessage name="surname" component="div" className="error" />
            </div>

            <div className="form-control">
              <label htmlFor="email">Email</label>
              <Field type="email" id="email" name="email" />
              <ErrorMessage name="email" component="div" className="error" />
            </div>

            <div className="form-control">
              <label htmlFor="dob">Date of Birth</label>
              <Field type="date" id="dob" name="dob" />
              <ErrorMessage name="dob" component="div" className="error" />
            </div>

            <button type="submit" disabled={isSubmitting || !isValid}>Submit</button>
          </Form>
        )}
      </Formik>

In this code, we've utilsed the <Formik/> library component, which wraps around our standard <Form/> element. We pass the following properties to the component:

• **initialValues** – these are the required initial values of your form (that is when the form renders what values your inputs will have).‌
• validationSchema – this is probably the most important for this tutorial. Bear in mind this is an optional property, as it's not needed to utilise the <Formik/> component, but for any validation it is. ‌
  ‌‌
  ‌We're going to import our userFormSchema we created in the previous step. This is going to tell the form, when validating inputs within this form utilise these schemas. ‌
• onSubmit – a straightforward function to run on clicking your button / submitting the form. The values of the form will automatically be passed to this function.‌

You can wrap the form within a "render prop" function also to utilise some of the exposed props from Formik within your form. You can learn about render props more here.

{({ isValid, isSubmitting }) => (

Note: This is not required if you don't want to utilise any of the underlying Formik properties within the form itself. You can simply remove and place your opening <Form> tag in its place. ‌
‌‌
‌But using this render prop allows you to access properties exposed from the Formik component within your <Form/> element. You can see that we are utilising theisValid and isSubmitting properties to control the state of our submit button.

Continuing on with analyzing the code:

• **isValid** – a boolean value which Formik controls based on our schema validation result.
• **isSubmitting** – A boolean flag indicating if a form is mid-submission. This flag is very useful when wanting to disable a button, to prevent multiple clicks meaning multiple submissions of the form.

We can use these values to control the enablement of the submit button like so:

<button type="submit" disabled={isSubmitting || !isValid}>Submit</button>

Input Fields

It's important to note that when using Formik and Yup, in order for the validation to work, the names of the input fields need to match the Yup schema keys exactly (case sensitive) – otherwise the validation rules won't be registered.

Example:‌

<Field type="email" id="email" name="email" />
<ErrorMessage name="email" component="div" className="error" />

We've defined this field is to be used for an email input, and given it the matching name of "email" to our a userFormSchema definition.

Underneath, we code our Formik <ErrorMessage/> component, again passing in the name of 'email', matching our schema. Using the name property we are able to link our input, error message, and validation schemas all together.

If there are any issues with validating the input field, the error message will show any defined error messages – otherwise it will fallback to a default message, e.g "firstname is a required field". This can be less user friendly, so I'd recommend always passing a custom message.

You'll also notice, that when we lose focus or when typing (after first validation has run), it will automatically run validation again. You can overwrite this functionality by setting the validateOnBlur and the validateOnChange flags (true / false).

As an example, it will look like this in its error state.:

Image: Invalid Formik form showing error state

‌Once we've entered values for all inputs, and our validation has passed (you can see the submit button is now enabled), we can submit.‌

Further Validation and Formik Features‌

You've now seen how easy Yup and Formik can make creating a form. It has full validation and even error handling, meaning you can have a fully functioning user friendly form built in just a few minutes.

But what if you want to add more complex validation to a much larger / complicated form? Well, let's look at an example:

Let's say we want to validate that the date of birth provided ensures that the user is over the age of 18. We will also add a password field, which will have rules of:

• minimum of 6 letters
• contain a number
• contain a special character

DoB Extra Requirements

We can do this by chaining the test() function onto the string() function of the dob object within our schema.

The test() function allows us to test against custom logic. Update the dob parameter within the userFormSchema to the following:‌

dob: Yup.string()
      .required('Date of Birth is required')
      .test('is-older-than-18', 'You must be at least 18 years old', (value) => {
        if (!value) return false;

        // try to parse the value to date
        const parsedDate = parse(value, 'yyyy-MM-dd', new Date());
        if (!isValid(parsedDate)) return false;

        const today = new Date();
        const eighteenYearsAgo = subYears(today, 18);

        // check if date provided is before or the same as 18 years ago.
        return parsedDate <= eighteenYearsAgo;
      })

We now get the following error when trying to submit a date that is less than 18 years ago. ‌

Image: Invalid input field due to failed date validation

Password Validation

For the password field validation, we can do something like this:‌

password: Yup.string()
    .required('This field is required')
    .min(6, 'Must be at least 6 characters')
    .matches(/[!@#$%^&*(),.?":{}|<>]/, 'Must contain at least one special character')
    .matches(/\d/, 'Must contain at least one number');

Here we use the matches() function, passing in a regular expression to assert against. You could combine these cases into one regular expression, but the benefit of keeping them separate is it allows you to pinpoint which validation rule is failing. It also allows for a more granular error message and maintenance should the rules change in the future.

Other Useful Methods:

• length() – asserts the length of the string / number
• positive() – asserts the number type is a positive number
• email() – asserts that it is a valid email address
• url() – asserts that it is a valid URL
• min() / max() – asserts that the number is at least 'x' and less than 'y'
• ensure() – transforms undefined and null values to an empty string along with setting the default to an empty string.

Conclusion

As you can see, the possibilities with Yup are vast. Then combine this with the Formik library, and you can have rich, efficient, and easy to use forms.

This ease of use makes it so much quicker to get a form up and running on your web or mobile application, allowing you to focus on user experience, design, and business logic.

As always feel free to reach and discuss this article with me on Twitter, and don't forget to drop me a follow to hear about future articles and dev tips.

This comprehensive guide covers various aspects of HTML forms, from how to create and structure forms to JavaScript interaction and form validation.

Understanding how to work with forms programmatically allows you to validate and capture user input, handle submissions, and enhance the overall user experience.

By following the examples and best practices provided in this guide, you'll be equipped with the knowledge necessary to build robust web forms that enhance user experience and facilitate seamless data collection and submission.

Whether you're a beginner or an experienced developer, this guide serves as a valuable resource for understanding and implementing HTML forms effectively in your web projects.

Prerequisites:

A basic understanding of JavaScript fundamentals is recommended to fully comprehend the concepts discussed in this tutorial. Familiarity with HTML forms will also be beneficial for understanding and applying the material covered.

If you're new to JavaScript, it's recommended to acquaint yourself with variables, data types, functions, loops, and basic DOM manipulation techniques before diving into this tutorial. This foundational knowledge will facilitate a smoother learning experience as we explore more advanced topics related to form handling in JavaScript.

Starting Note: For your convenience, all the examples and code discussed here can be accessed on GitHub.

Table of Contents

1. Understanding HTML Forms
   – Introduction to HTML form elements
   – JavaScript and Form Handling
   – Accessing Form Fields
   – Example: Registration Form
2. How to Create Radio Buttons
   – JavaScript to Handle Radio Button Selection
   – Radio Button Change Event
3. Checkboxes
   – How to Check if a Checkbox is Checked
   – How to Get Checkbox Values
   – How to Handle Multiple Checkboxes
   – How to Check / Uncheck All Checkboxes
   – How to Dynamically Generate CheckBoxes
4. Select Element
   – How to Interact with a Select Element
   – How to Access Options with JavaScript
   – How to Handle Multiple Selections
   – Example: Task Manager
5. Difference Between Change and Input Event
6. Conclusion

Before we start, here's something to note:

This is a follow up blog on this DOM and Events Handbook and not cover server-side communication/server-side form handling in this blog as it involves advanced topics such as AJAX (Asynchronous JavaScript and XML), Promises, error handling, and handling asynchronous operations in JavaScript.

In this tutorial, we'll instead focuses on how to work with various form elements including radio buttons, checkboxes, and select elements, as well as dynamically generating and interacting with them using JavaScript.

Delving into server-side communication would extend beyond the scope of this article, which aims to provide a comprehensive understanding of DOM manipulation and event handling within the context of form elements.

Understanding HTML Forms

HTML forms are fundamental elements used for collecting and submitting user data on the web. They enable interaction between users and websites by allowing users to input information, make selections, and submit data to servers for processing.

Introduction to HTML Form Elements

HTML forms are created using the <form> element, which acts as a container for various input elements. Common form elements include text fields, checkboxes, radio buttons, dropdown menus, and buttons.

To reference a form in JS, you can use DOM methods like getElementById() or document.forms. document.forms returns a collection of forms, and you can access a specific form using an index, name, or id.

const form = document.getElementById('signup');
const firstForm = document.forms[0]; // accessing first form
const formByName = document.forms['formName']; // accessing form by name
const formById = document.forms['formId']; // accessing form by id

Let's see a basic example of an HTML form:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br>

  <input type="submit" value="Submit">
</form>

In this example, we have a form with two input fields for username and password, along with a submit button.

Form Structure and Attributes

HTML forms can have various attributes that control their behavior and appearance. Some common attributes include:

• action: Specifies the URL where the form data should be submitted.
• method: Specifies the HTTP method used to send form data (post or get).
• target: Specifies where to display the response after form submission (for example, _self, _blank, _parent, _top).
• name: Assigns a name to the form for identification purposes.

Here's an example of a form with action, method, and target attributes:

<form action="/submit-form" method="POST" name="myForm" target="_blank">
  <!-- Form elements go here -->
</form>

JavaScript and Form Handling

JavaScript uses the HTMLFormElement object to represent a form. This object has properties corresponding to the HTML attributes action and method.

Methods like submit() and reset() are used for submitting and resetting forms.

const form = document.getElementById('signup');
form.action; // returns the action attribute
form.method; // returns the method attribute
form.submit(); // submits the form

JavaScript provides Event Handlers to add interactivity to HTML forms. By leveraging these events, you can execute custom scripts in response to user actions within the form:

Submit Event: A form typically has a submit button, which when clicked, sends the form data to the server. This is achieved using an <input> or <button> element with type="submit".

<input type="submit" value="Sign Up">
// or
<button type="submit">Sign Up</button>

To attach an event listener to the submit event, you use the addEventListener() method. Here's an example:

const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
    // Custom validation and submission logic here
});

In many cases, you may want to intercept the default form submission behavior and execute custom logic before allowing the form to be submitted to the server. You can use preventDefault() for this. Example:

const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
    event.preventDefault(); // Prevents the default form submission
    // Custom validation and submission logic here
});

Without event.preventDefault(), any custom validation and submission logic would still execute within the event listener, but the default form submission behavior would not be prevented.

Reset Event: The reset event is triggered when the form is reset using a reset button or programmatically. We use reset() method to clear all form fields and reset them to their default values.

document.querySelector('form').addEventListener('reset', function(event) {
    // Custom form reset logic here
});

How to Access Form Fields

You can access form fields using DOM methods like getElementsByName(), getElementById(), querySelector(), and so on

The form.elements property stores a collection of form elements. You can access these Elements by index, id, or name. Here's an example:

const form = document.getElementById('signup');
const nameField = form.elements['name']; // accessing element by name
const emailField = form.elements['email']; // accessing element by name
const firstElement = form.elements[0]; // accessing first element by index no.

Once you've accessed a form field, you can use the value property to access its value. Here's an example:

const nameValue = nameField.value;
const emailValue = emailFieldByName.value;

Form Validation

Form validation is an essential aspect of web development that ensures the data submitted by users is accurate and meets specified criteria before being processed by the server. Common validations include checking for empty fields, valid email formats, and so on.

HTML Form Validation

HTML5 provides built-in form validation through various attributes:

• required: Specifies that a field must be filled out.
• pattern: Specifies a regular expression pattern that the input value must match.
• min and max: Specify the minimum and maximum values for an input field.
• maxlength and minlength: Specify the maximum and minimum length of the input
• type: Specifies the type of input expected (for example, email, number, date).

Here's an example of HTML form validation using these attributes:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required minlength="3" maxlength="15"><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br>

  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="18" max="99"><br>

  <input type="submit" value="Submit">
</form>

JavaScript Form Validation

JavaScript allows developers to perform more sophisticated validation logic beyond what HTML attributes offer. Event listeners can be attached to form elements to handle validation dynamically.

Here's a basic example of JavaScript form validation:

const form = document.querySelector('form');

form.addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent form submission

    // Perform custom validation logic
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    if (!emailIsValid(email)) {
        alert('Please enter a valid email address.');
        return;
    }

    if (password.length < 6) {
        alert('Password must be at least 6 characters long.');
        return;
    }

    // If validation passes, submit the form
    form.submit();
});

function emailIsValid(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

In this example, the JavaScript function emailIsValid() uses a regular expression to validate the email format. The submit event listener prevents the form from being submitted if the validation fails, and custom error messages are displayed to the user.

Let's See an Example: Registration Form

Now, let's combine all the concepts we've covered into a complete example of a Registration form with client-side validation using JavaScript:

<!DOCTYPE html>
<html>
  <body>
    <h2>User Registration</h2>
    <form id="registrationForm">
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" />
      </div>
      <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" />
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" />
      </div>
      <div>
        <input type="submit" value="Register" />
      </div>
    </form>

    <div id="errorMessages"></div>
    <script src="script.js"></script>
  </body>
</html>

HTML Structure: We have a simple registration form with fields for username, email, password, and a submit button. There's also a container div (errorMessages) to display validation error messages.

Now let's write JavaScript code to handle form submission and perform client-side validation:

const registrationForm = document.getElementById("registrationForm");
const errorMessages = document.getElementById("errorMessages");

registrationForm.addEventListener("submit", function (event) {
  event.preventDefault();

  const { username, email, password } = registrationForm.elements;

  errorMessages.innerHTML = "";

  if (!username.value.trim()) {
    displayError("Username is required.");
    return;
  }

  if (!email.value.trim() || !isValidEmail(email.value)) {
    displayError("Please enter a valid email address.");
    return;
  }

  if (!password.value.trim() || !isStrongPassword(password.value)) {
    displayError(
      "Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one digit, and one special character."
    );
    return;
  }

  alert("Registration successful!");
  registrationForm.reset();
});

function displayError(message) {
  errorMessages.innerHTML += `<div class="error">${message}</div>`;
}

function isValidEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

function isStrongPassword(password) {
  return /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}$/.test(password);
}

JavaScript Handling: We select the form and the error message container using getElementById. We attach an event listener to the form's submit event. When the form is submitted, we prevent its default behavior using event.preventDefault() to handle form submission manually.

Form Validation: We retrieve the values of username, email, and password.

We perform basic validation: Username must not be empty, Email must be in a valid format, Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one digit, and one special character.

Error Handling: If any validation fails, we display the corresponding error message. Error messages are displayed in the errorMessages div.

Form Reset: Upon successful registration (in this case, a simple alert), we reset the form using registrationForm.reset()

Currently, the code uses an alert to indicate successful registration. In a real scenario, you might want to implement an AJAX call to submit the data to a server for processing and handle the response accordingly But that's not what we're going to discuss, as mentioned at the start of this tutorial.

Overall this example covers form creation, form handling with JavaScript, form validation using regular expressions, and dynamic custom error message display, demonstrating a basic user registration form with client-side validation.

Radio Buttons

Radio buttons are a common form element used to select one option from a set of options. In JavaScript, you can manipulate radio buttons to retrieve user selections and perform actions based on those selections.

How to Create Radio Buttons

You can use radio buttons you want users to select only one option from a set of choices. In HTML, you can create radio buttons using the <input> element with the type attribute set to "radio". A group of radio buttons with the same name attribute forms a radio group.

Here's an example:

<!DOCTYPE html>
<html>
  <body>
    <form id="languageForm">
      <p>Select your favorite programming language:</p>
      <div>
        <input type="radio" name="language" value="JavaScript" id="js" />
        <label for="js">JavaScript</label>
      </div>
      <div>
        <input type="radio" name="language" value="Python" id="python" />
        <label for="python">Python</label>
      </div>
      <div>
        <input type="radio" name="language" value="Java" id="java" />
        <label for="java">Java</label>
      </div>
      <!-- More language options can be added here -->
    </form>
  </body>
</html>

You use the id and for attributes for accessibility, linking the label to the corresponding radio button.

How to Retreive the Selected Radio Button Value

Now, let's discuss how to retrieve the value of the selected radio button using JavaScript.

    <!-- HTML -->
    <button id="btn">Show Selected Language</button>
    <p id="output"></p>

    <script>
      const btn = document.querySelector("#btn");
      const radioButtons = document.querySelectorAll('input[name="language"]');
      const output = document.getElementById("output");

      btn.addEventListener("click", () => {
        let selectedLanguage;
        for (const radioButton of radioButtons) {
          if (radioButton.checked) {
            selectedLanguage = radioButton.value;
            break;
          }
        }
        // Displaying the output:
        output.innerText = selectedLanguage
          ? `You selected ${selectedLanguage}`
          : `You haven't selected any language`;
      });
    </script>

Here's how this the code works: the JavaScript code initializes by selecting the button, radio buttons, and output elements from the HTML document. We add a click event listener to the button element. When the button is clicked, the function inside the event listener is executed.

Inside the click event listener, we iterate over all radio buttons in the radioButtons collection. We check if a radio button is checked using its checked property. If a radio button is checked, we assign its value to the selectedLanguage variable and exit the loop using break.

We update the content of the output element (<p> tag with id output) based on whether a language is selected. If a language is selected (selectedLanguage is truthy), we display a message indicating the selected language. Otherwise, we prompt the user to select a language.

Radio Button Change Event

When a radio button is checked or unchecked, it fires a change event. You can listen to this event using addEventListener(). Inside the event handler, you can access the checked state and value of the radio button using this.checked and this.value.

radioButton.addEventListener('change', function (e) {
  if (this.checked) {
    console.log(this.value);
  }
});

How to Dynamically Generate Radio Buttons

Now, let's explore how to dynamically generate radio buttons using JavaScript. This is useful when you want to create radio button options dynamically based on certain criteria or data.

Suppose we have an array of languages, and we want to dynamically generate radio buttons for each language option:

<!DOCTYPE html>
<html>
  <body>
    <div id="languages"></div>

    <script>
      const languageOptions = ["Python", "Javascript", "C++", "Java"];

      // Generate the radio buttons
      const languages = document.querySelector("#languages");
      languages.innerHTML = languageOptions.map((language) => `
          <div>
              <input type="radio" name="language" value="${language}" id="${language}">
              <label for="${language}">${language}</label>
          </div>`).join(' ');
    </script>
  </body>
</html>

It dynamically generates radio buttons based on the languageOptions array and inserts them into the container element (<div id="languages"></div>). Each radio button has a unique ID and value corresponding to the language name, and the labels are associated with their respective radio buttons using the for attribute.

After dynamically generating the radio buttons, Now let's add change event listeners to them to handle changes in selection.

    <!-- HTML -->
    <div id="languages"></div>
    <div id="languageOutput"></div> // we create this one to fetch our selected language output

    <!-- Generate the radio buttons -->

// Attaching Change Event Listeners
const radioButtons = document.querySelectorAll('input[name="language"]');
for (const radioButton of radioButtons) {
    radioButton.addEventListener('change', showSelectedlanguage);
}        

// Handling the Change Event
function showSelectedlanguage() {
    if (this.checked) {
        document.querySelector('#languageOutput').innerText = `You selected ${this.value}`;
    }
}

Here's what's happening:

• We select all radio buttons with the name attribute set to "language".
• We use a for...of loop to iterate over each radio button and add a change event listener to each radio button. This listener listens for changes in the state of the radio buttons, i.e., when a radio button is selected or deselected.
• We define a function named showSelectedLanguage to handle the change event triggered by selecting a radio button.
• Inside the showSelectedLanguage function, we first check if the current radio button (this) is checked using the checked property. If the radio button is checked, we update the text content of an element with the id languageOutput using document.querySelector('#languageOutput'). This element serves as a placeholder to display the selected language.

This setup ensures that dynamically generated radio buttons have change event listeners attached to them, allowing for dynamic handling of user selections.

Checkboxes

How to Create an HTML Checkbox

Let's first create a checkbox using the <input> element and type attribute set to "checkbox". let's associate it with label for better accessibility.

<label for="agree">
   <input type="checkbox" id="agree" name="agree" value="yes"> I agree to the terms
</label>

How to Check if a Checkbox is Checked

A checkbox in HTML can exist in two states: checked and unchecked. And we can determine which is active using checked property. If it's true, the checkbox is checked – otherwise, it's unchecked. Example:

<!DOCTYPE html>
<html>
<body>
    <label for="agree">
        <input type="checkbox" id="agree" name="agree"> I agree to the terms
    </label>

    <script>
        const checkbox = document.getElementById('agree');
        console.log(checkbox.checked);
    </script>
</body>
</html>

How to Get Checkbox Values

In HTML forms, when a checkbox is checked and the form is submitted, the browser includes the checkbox in the form data with its name attribute as the key and the value attribute (if specified) as the value. But if the checkbox is unchecked, it's not included in the form data at all.

<label for="agree">
    <input type="checkbox" id="agree" name="agree"> I agree to the terms
</label>

<button id="btn">Show Value</button>
<script>
    const checkbox = document.querySelector('#agree');
    const btn = document.querySelector('#btn');
    btn.onclick = () => {
       alert(checkbox.value);
    };
</script>

So basically the point is: When a checkbox is checked and included in form submissions, the browser defaults to sending 'on' as the value if no value attribute is explicitly defined for the checkbox input element. To accurately handle the checked state of a checkbox using JavaScript, use the checked property instead of relying solely on the value attribute.

How to Handle Multiple Checkboxes

Sometimes, you may need to work with multiple checkboxes with the same name and you want to retrieve the values of the selected checkboxes. Here's an example:

<!DOCTYPE html>
<html>
  <body>
    <p>Select your preferred languages:</p>
    <label for="l1">
      <input type="checkbox" name="language" value="C++" id="l1" />C++
    </label>
    <label for="l2">
      <input type="checkbox" name="language" value="Python" id="l2" />Python
    </label>
    <label for="l3">
      <input type="checkbox" name="language" value="Java" id="l3" />Java
    </label>
    <p>
      <button id="btn">Get Selected Languages</button>
    </p>

    <script>
      const btn = document.querySelector("#btn");
      btn.addEventListener("click", () => {
        const checkboxes = document.querySelectorAll(
          'input[name="language"]:checked'
        );
        const selectedLanguages = Array.from(checkboxes).map(
          (checkbox) => checkbox.value
        );
        alert("Selected Languages: " + selectedLanguages.join(", "));
      });
    </script>
  </body>
</html>

In this example, we have checkboxes for selecting preferred programming languages.

• When the button is clicked, it triggers an event listener. Inside the event listener, we select all checkboxes with the name attribute "language" that are checked.
• We then convert the NodeList returned by querySelectorAll() into an array using Array.from().
• Finally, we map over the array to retrieve the values of selected checkboxes and display them using alert().

How to Check / Uncheck All Checkboxes

Now, let's create a functionality to check or uncheck all checkboxes at once:

<!DOCTYPE html>
<html>
  <body>
    <p>
      <button id="btn">Check / Uncheck All</button>
    </p>
    <p>Select your preferred languages:</p>
    <label for="l1">
      <input type="checkbox" name="language" value="C++" id="l1" />C++
    </label>
    <label for="l2">
      <input type="checkbox" name="language" value="Python" id="l2" />Python
    </label>
    <label for="l3">
      <input type="checkbox" name="language" value="Java" id="l3" />Java
    </label>
    <script src="script.js"></script>
  </body>
</html>

Javascript code:

// function to check or uncheck all checkboxes
function check(checked = true) {
  const checkboxes = document.querySelectorAll('input[name="language"]');

  // Iterate through each checkbox
  checkboxes.forEach((checkbox) => {
    // Set the checked property of each checkbox to the value of the 'checked' parameter
    checkbox.checked = checked;
  });
}

// function to check all checkboxes and change button behavior to uncheck all
function checkAll() {
  check();
  this.onclick = uncheckAll;
}

// function to uncheck all checkboxes and change button behavior to check all
function uncheckAll() {
  check(false);
  this.onclick = checkAll;
}

const btn = document.querySelector("#btn");

btn.onclick = checkAll;

In this example, we have a button labeled "Check / Uncheck All".

• When the button is first clicked, it's intended to check all the checkboxes. Therefore, the checkAll function is assigned to handle this action (const btn = document.querySelector("#btn");).
• If the button is clicked again, it unchecks all checkboxes. We define functions check(), checkAll(), and uncheckAll() to handle the checking and unchecking of checkboxes.
• We assign checkAll() to the button's onclick event initially, and then switch between checkAll() and uncheckAll() based on the current state of the checkboxes.

Alternate approach could be:

function checkAll(checked = true) {
  const checkboxes = document.querySelectorAll('input[name="language"]');
  checkboxes.forEach((checkbox) => {
    checkbox.checked = checked;
  });
}

const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {
  // Find the first checkbox with the name attribute set to 'language'
  const firstCheckbox = document.querySelector('input[name="language"]');
  // Check if the first checkbox is checked
  const isChecked = firstCheckbox.checked;
  // Call the checkAll function with the opposite state of the first checkbox
  checkAll(!isChecked);
});

Here, we select the first checkbox with the name "language" to determine its current checked state. Then, we call checkAll() with the opposite state.

How to Dynamically Generate CheckBoxes

<!DOCTYPE html>
<html>
  <body>
    <div id="languages"></div>

    <script>
      const languageOptions = ["Python", "Javascript", "C++", "Java"];

      // Generate the checkboxes
      const html = languageOptions
        .map(
          (language) => `<label for="language-${language}">
                <input type="checkbox" name="language" id="language-${language}" value="${language}"> ${language}
            </label>`
        )
        .join(" ");
      document.querySelector("#languages").innerHTML = html;
    </script>
  </body>
</html>

Here's how it works:

• We define an array languageOptions containing language names.
• We use the map() method to iterate through the languageOptions array and generate an array of HTML strings for each language.
• Each HTML string comprises a label element associated with an input checkbox. The input checkbox includes appropriate attributes such as type, name, id, and value, dynamically derived from the language name.
• We join the array of HTML strings into a single string using join(' ').
• Finally, we set the innerHTML property of the root <div> element with the id languages to the generated HTML string, thereby rendering checkboxes for each programming language.

Select Element:

The <select> element in HTML provides a dropdown list of options for users to choose from. It allows for single or multiple selections. Example:

<select id="cities">
    <option value="JAI">Jaipur</option>
    <option value="DEL">New Delhi</option>
    <option value="UDR">Udaipur</option>
    <option value="MUM">Mumbai</option>
</select>

By default, a <select> element allows for a single selection. To enable multiple selections, add the multiple attribute.

<select id="cities" multiple>

Users can now select multiple fruits by holding down the Ctrl (or Cmd on Mac) key while clicking.

How to Interact with a Select Element:

To interact with a <select> element using JavaScript, we use the HTMLSelectElement type, which provides useful properties like selectedIndex and value. Example:

<script>
const selectElement = document.getElementById('cities');
console.log(selectElement.selectedIndex); // Returns the index of the selected option
console.log(selectElement.value); // Returns the value of the selected option
console.log(selectElement.multiple); // Returns true if multiple selections are allowed
</script>

JavaScript allows you to handle events on the <select> element, such as when a user selects an option. Example:

<button id="btn">Get Selected City</button>
    <script>
      const btn = document.querySelector("#btn");
      const selectElement = document.getElementById("cities");
      btn.onclick = (event) => {
        event.preventDefault();
        const selectedCity =
          selectElement.options[selectElement.selectedIndex].text;
        alert(`Selected city: ${selectedCity}, 
        Index: ${selectElement.selectedIndex}`);
      };
    </script>

Using the value property: The value property represents the value of the selected option. Let's understand it with example:

<select id="cities">
    <option value="">Jaipur</option> 
    <option value="DEL">New Delhi</option>
    <option value="UDR">Udaipur</option>
    <option>Mumbai</option>
</select>

const btn = document.querySelector("#btn");
const selectElement = document.querySelector("#cities");

btn.onclick = (event) => {
    event.preventDefault();
    alert(selectElement.value);
};

• If "Jaipur" is selected, this means we have an empty string since the value attribute is empty in our Html.
• If an option lacks a value attribute, the select box's value property becomes the text of the selected option. Example: if "Mumbai" is selected, the value property is "Mumbai".
• If multiple options are selected, the value property of the select box is derived from the first selected option based on the previous rules.

How to Access Options with JavaScript

The HTMLOptionElement type represents individual <option> elements within a <select> element in JavaScript. It provides properties like index, selected, text, and value to access information about each option.

const selectElement = document.getElementById('cities');
const secondOptionText = selectElement.options[1].text; // Accessing text of the second option
const secondOptionValue = selectElement.options[1].value; // Accessing value of the second option

How to Handle Multiple Selections:

When a <select> element allows multiple selections, you can iterate through its options to find which ones are selected and retrieve their text values.

const selectElement = document.getElementById('cities');
const selectedOptions = Array.from(selectElement.options).filter(option => option.selected);
const selectedValues = selectedOptions.map(option => option.text);

The output will be an array containing text of selected options. We can use option.value to get an array of values instead. Example:

<!DOCTYPE html>
<html>
  <body>
    <select id="cities" multiple>
      <option value="JAI">Jaipur</option>
      <option value="DEL">New Delhi</option>
      <option value="UDR">Udaipur</option>
      <option value="MUM">Mumbai</option>
    </select>

    <button id="btn">Get Selected Cities</button>
    <script>
      const btn = document.querySelector("#btn");
      const selectElement = document.querySelector("#cities");

      btn.onclick = (event) => {
        event.preventDefault();
        const selectedOptions = Array.from(selectElement.options)
          .filter((option) => option.selected)
          .map((option) => option.text);
        alert("Selected City: " + selectedOptions.join(", "));
      };
    </script>
  </body>
</html>

• When the button is clicked, the script collects the selected options by filtering the options based on the selected property. It then maps over the selected options to retrieve their text content.
• Finally, it displays the selected languages in an alert message.

Let's See an Example: Task Manager (Adding and Removing Tasks)

<!DOCTYPE html>
<html>
  <style>
    #container {
      max-width: 540px;
      margin: 50px auto;
    }

    form {
      display: flex;
      flex-direction: column;
    }
  </style>
  <body>
    <div id="container">
      <form>
        <label for="task">Task:</label>
        <input
          type="text"
          id="task"
          placeholder="Enter a task"
          autocomplete="off"
        />

        <button id="btnAdd">Add Task</button>

        <label for="taskList">Task List:</label>
        <select id="taskList" name="taskList" multiple></select>

        <button id="btnRemove">Remove Selected Tasks</button>
      </form>
    </div>
    <script src="script.js"></script>
  </body>
</html>

This HTML structure includes input fields for entering task descriptions, buttons for adding and removing tasks, and a <select> element to display the list of tasks. We added a little css for clarity. Let's see Javascript code now:

const btnAdd = document.querySelector('#btnAdd');
const btnRemove = document.querySelector('#btnRemove');
const taskList = document.querySelector('#taskList');
const taskInput = document.querySelector('#task');

btnAdd.onclick = (e) => {
    e.preventDefault();

    // Validate the task input
    if (taskInput.value.trim() === '') {
        alert('Please enter a task description.');
        return;
    }

    // Create a new task option
    const option = new Option(taskInput.value, taskInput.value);
    taskList.add(option, undefined);

    // Reset the task input
    taskInput.value = '';
    taskInput.focus();
};

btnRemove.onclick = (e) => {
    e.preventDefault();

    // Save the selected tasks
    let selectedTasks = [];

    for (let i = 0; i < taskList.options.length; i++) {
        selectedTasks[i] = taskList.options[i].selected;
    }

    // Remove selected tasks
    let index = taskList.options.length;
    while (index--) {
        if (selectedTasks[index]) {
            taskList.remove(index);
        }
    }
};

Explaination: we select the necessary elements from the HTML and attach event listeners to the "Add Task" and "Remove Selected Tasks" buttons. When the "Add Task" button is clicked, we create a new task option based on the input field value and add it to the <select> element. When the "Remove Selected Tasks" button is clicked, we remove the selected tasks from the <select> element.

Difference Between Change and Input Event

The input event in JavaScript is triggered whenever the value of an input, <select>, or <textarea> element changes. Unlike the change event, which waits for a value to be committed (for example, when an input loses focus), the input event fires continuously as the value changes. The input event basically provides a way to respond to user input in real-time. Example:

<!DOCTYPE html>
<html>
<body>
    <label for="userInput">Enter Your Name:</label>
    <input type="text" id="userInput" placeholder="Your name">
    <p>Your name is: <span id="displayName"></span></p>
</body>
</html>

<script>
    const userInput = document.getElementById('userInput');
    const Name = document.getElementById('displayName');

    userInput.addEventListener('input', function() {
        Name.textContent = userInput.value || 'Guest!';
    });
</script>

• This JavaScript code selects the input field with the ID "userInput" and the span element with the ID "displayName".
• An event listener is attached to the input event of the userInput field.
• When the input event is triggered (for example, when typing in the input field), the event handler updates the text content of the displayName span dynamically to reflect the entered name, or it displays "Anonymous" if the input field is empty.
• Now, if you change 'input' to 'change' here userInput.addEventListener('input', function() like this: userInput.addEventListener('change', function(), the event listener will be triggered only when the input field loses focus after a value has been entered (as opposed to continuously while the value is being changed in real-time).

Conclusion

By understanding the fundamentals of HTML form elements, attributes, and events, you can create dynamic and user-friendly web forms that enhance the user experience.

JavaScript plays a crucial role in handling form submissions, validating user input, and providing real-time feedback to users.

Through practical examples and detailed explanations, in this guide you've learned about working with radio buttons, checkboxes, select elements, and handling multiple selections.

Keep exploring and experimenting with the concepts presented here to create robust and intuitive forms for your web applications.

HTML forms are used to get information from users. They are widely used in webpages or apps for surveys or registration processes.

HTML form basics include the common HTML elements, tags, attributes, concepts, or best practices required for you to create good HTML forms. The collected data is sent to a server for processing.

• Basic Structure of HTML Form
• How to Use HTML Form Elements
• How to Use the HTML Element
• How to Use the HTML Element
• How to Use the HTML
• How to Use the HTML Element
• Form Validation
• Importance of Form Validation
• Types of Form Validation
• Common Validation Techniques
• Form Submission and Methods
• How to Style HTML Forms
• Best Practices and Accessibility
• Conclusion

Basic Structure of HTML Form

You can use the <form> element to create an HTML form

<form action="submit_form" method=" post">
  <label for="name">Name:</label>
  <input type="text" id="name" name=" name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Submit</button>
</form>

The HTML <form> element is a container for several HTML form elements. The <form> element can contain the following:

• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>

How to Use HTML Form Elements

In this section, you'll learn how to use some of the HTML form elements.

How to Use the HTML Element

The <input> element is the most commonly used form element. The type of information an <input> element can hold depends on the <type> attribute.

The <input> element can only accept a particular type of data assigned to it using the <type> attribute.

<form action="">
      <input
        type="text"
        id="name"
        name="username"
        placeholder="Enter your username"
        required
      />
      <input
        type="password"
        id="security"
        name="password"
        placeholder="Enter your password"
        required
      />
      <input type="email" name="email" placeholder="Enter your email" />
      <input type="checkbox" name="subscribe" value="yes" /> Subscribe to the
      newsletter <input type="radio" name="gender" value="male" /> Male
      <input type="radio" name="gender" value="female" /> Female
      <input type="submit" name="submit" />
</form>

The following are the different <type> attributes that can be assigned to an <input> element:

• <input type="text">: Allows the user to type in text.
• <input type="email">: The user input must follow an email format.
• <input type="password"> : Accepts password from the user. The passwords are masked, usually displayed as asterisks (*) or dots, to protect the privacy of the input.
• <input type="checkbox">: The user can select none or many of the displayed checkboxes. Checkboxes can be checked or unchecked.
• <input type="radio">: Allows the user to select only one from the multiple-choice radio buttons.
• <input type="submit">: Enables the user to submit the form.

The following are other possible attributes found in the input element:

• <input name=" "> : Assigns the input field a name. The assigned name identifies the input data when the form is submitted.
• <input id=" ">: The identifier creates a unique id for the input field. It is usually associated with CSS for styling and JavaScript for other manipulations.
• <input value=" ">: Used to set the initial value for the input field. The default initial value gives the user an idea of the information required.
• <input placeholder=" ">: A faint pseudo value set to the input field that disappears once the user starts typing. Gives a hint on what data to enter, similar to the value attribute.
• <input required>: Requires that the input field must be filled out before submission. Gives an error message when not filled out.
• <input disabled>: As the name implies, this prevents the user from interacting with the input field. Disables the input field from accepting input. With this attribute, the input field becomes unclickable.
• <input readonly>: The user can only read the initially set value but can't change it. Unlike the disabled attribute, the input field is clickable but can't be modified.

Note that the <input> element doesn't contain a for attribute.

How to Use the HTML Element

The label element associates text with a form input, checkbox, or radio button.

<form action=" ">
    <label for="name" id="user">Username:</label>
</form>

The label element describes the information required in the text field.

The label element is important for accessibility, this makes it easier for screen-reader users to navigate the form. The assistive technologies read the label loud to users.

Clicking on the label focuses the corresponding input field when the for attribute of the label element corresponds with the id attribute of the input element, making it more convenient for users to interact with the form.

Label improves the overall usage of the form, providing context and guidance.

The following are the commonly used attributes for the label element:

• <label for=" "></label>: Associates the label with the corresponding form element, usually an input element. The value of the for attribute is always the same as the id value of the associated form element, usually the input element.
• id attribute <label id=" "></label>: Gives the label a unique identifier. The value is set to the same value with the for attribute of the corresponding form element, usually an input element. Used for selecting the label for styling in CSS or other manipulations in JavaScript.

How to Use the HTML

A multi-line text input field, allows users to write longer text or paragraphs. The rows and cols attributes control the initial size of the textarea box.

<form action="">
      <label for="testimony">Testimony:</label>
      <textarea name="testimony" id="testimony" cols="30" rows="10"></textarea>
</form>

The rows attribute controls the height (vertical size) of the textarea box, determining the number of visible lines while the cols attribute controls the width (horizontal size), specifying the number of visible characters per line.

Note, that the textarea box can wrap to fit the entered text within its defined width.

Unlike the single-line input field, the textarea element does not have a maxlength attribute or value attribute. The content is placed within the opening and closing tags.

For accessibility, it's a good practice to associate label or context with the textarea element to assist users who use screen-readers or other assistive technologies.

How to Use the HTML Element

The <select> element creates a drop-down list, that allows users to select one or multiple options from the listed choices.

<form action="">
      <label for="numbers">Choose a favorite number:</label>
      <select name="numbers" id="numbers" size="5" multiple>
        <option value="" disabled selected>Select a number</option>
        <option value="one">1</option>
        <option value="two">2</option>
        <option value="three">3</option>
        <option value="four">4</option>
        <option value="five">5</option>
        <option value="six">6</option>
        <option value="seven">7</option>
        <option value="eight">8</option>
        <option value="nine">9</option>
        <option value="ten">10</option>
      </select>
</form>

The <option> element is contained within the <select> element. The <option> element holds the items to be selected. Each <option> represents one item in the drop-down list.

Each <option> element is expected to have a <value=" "> attribute, which holds the value to be submitted when the form containing the <select> element is submitted. If the <value=" "> attribute is omitted, the text content of the <option> element becomes the value to be submitted instead.

The <name=" "> attribute identifies the select control on the server side when the form is submitted. The <name=" "> is important for processing the form data on the server.

You can select one of the options as the default selection by including the <selected> attribute in the <option> element. If no option is selected, then the first option in the list will be selected by default.

The <size=" "> attribute sets the number of options you can see at once in the drop-down by setting the <size=" "> attribute on the <select>. Note that other options are seen as you scroll down.

Including the <disabled> attribute on the <select> element, disables the select option and prevents the users from selecting any option. The select option becomes unclickable.

Also, multiple options can be selected by including <multiple> attribute on the <select> element. You can hold the Ctrl (or Command on Mac) key to select multiple options.

Understanding the <select> element and using the necessary attributes can make your form convenient for users to select different options and for easy processing of the <select> element on the server side.

Form Validation

Simply put, this is the process of checking whether the data entered in the form is correct, complete, and meets the specified format.

Importance of Form Validation

• Data Accuracy: Prevents submission of incorrect or incomplete data.
• Security: Checks the data to prevent incorrect or malicious data from being submitted, thereby reducing harmful attacks or data breaches.
• User Experience: Makes filling out the forms less stressful by giving a quick error message if the user is entering the wrong data. Also, it can be used to suggest the expected format.
• Efficiency: Form validation before submission saves time and resources. Reduces unnecessary requests to the server, improving the overall performance of your application.

Types of Form Validation

1. Client-Side Validation: The user's browser performs the checks before submission. How does the browser validate forms? Browsers use JavaScript, CSS, or HTML attributes to validate forms. The advantage of client-side validation is the quick error message the user receives when data is incorrect or incomplete. The response is quick and doesn't require validation from the server side. One of the disadvantages is that client-side validation can be bypassed by an experienced user.
2. Server-Side Validation: The server checks the form data after submission. Server-side validation is more robust and secure. Performs double verification, and validates form data again, even if the client-side validation fails or is bypassed. The server-side validation is commonly done by using scripting languages like PHP or ASP.NET.

Note that you can use either of the two or a combination of both.

Common Validation Techniques

These are common HTML attributes that help you decide the pattern of form validation.

Length Limits

You can use the maxlength attribute to set the maximum number of characters an input field can hold.

<form>
  <input type="text" id="username" name="username" placeholder="Username" maxlength="20" required>
  <button type="submit">Submit</button>
</form>

Required Fields

Requires that certain input fields are filled before the form is submitted. The <required> attribute is used to perform this technique. An error message is displayed when the required field is not filled by the user.

<form>
  <input type="text" id="username" name="username" placeholder="Username" required>
  <input type="email" id="email" name="email" placeholder="Email" required>
  <button type="submit">Submit</button>
</form>

Data Format

Ensures the data entered by the user follows the required format. The <input type="email"> type attribute set to email will require the user to enter the correct email format (for example: me@example.com) before form submission.

The same thing happens if the type attribute is set to number <input type="number">, the user can only put data from 0-9.

<form>
  <input type="email" id="email" name="email" placeholder="Email" required>
  <button type="submit">Submit</button>
</form>

Password Strength

The <pattern=""> attribute is used to specify password complexity such as minimum length, and the inclusion of uppercase or lowercase letters, numbers, and special characters.

The <title=""> attribute displays the error message when the user hovers over the input field or when the entered password does not match the specified password format. The higher the password complexity, the higher the user account is protected from unauthorized access.

<form>
  <input type="password" id="password" name="password" placeholder="Password" pattern="(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,}" title="Password must contain at least one number, one uppercase letter, one lowercase letter, and at least 8 or more characters" required>
  <button type="submit">Submit</button>
</form>

Numeric values

You can set the range of numeric values to be entered by the user by using the min and max attributes. For example, to check if a user is within the specified age range:

<form>
  <input type="number" id="age" name="age" placeholder="Age" min="18" max="100" required>
  <button type="submit">Submit</button>
</form>

Having a good form validation practice helps to create forms with accurate data and reduces vulnerability to malicious attacks.

Form Submission and Methods

When the submit button is clicked after filling out a form, your information is sent to the server for processing. This is called form submission.

Methods of Form Submission

Form data is sent to the server using the method attribute. There are two commonly used methods:

GET Method

With the get method <method="get">, the form data is sent using the URL in the browser's address bar to the server.

<form action="http://example.com" method="get">
          <input type="text" name="name" />
          <input type="submit" value="Submit" />
 </form>

Using the above code sample, when the user enters a name (let's say the user's name is KC) in the input field named ''name'', and clicks the submit button, the form data will be sent to the server in the URL like this: "http://example.com?name=KC".

The GET method is not safe, as it is commonly used for sending small amounts of data that is not sensitive.

POST Method

The post method attribute <method=post> sends the form data in the body of the HTTP request to the server, rather than in the URL.

<form action="http://example.com" method="get">
          <input type="text" name="name" />
          <input type="submit" value="Submit" />
 </form>

Using the same code sample above, the POST method will send the form data to the server like this: "https://example.com/submit.php".

You'd should notice that the POST request does not contain the form data in the URL but rather points to the server-side script (submit.php) that will process the form data.

The sent form data is not visible. The POST request is used to submit sensitive information, like passwords, since the data is not visible in the URL, but rather sent in the HTTP body request.

How to Style HTML Forms

HTML forms can be styled using CSS, just like any other HTML element. You can do the following with CSS to match the design of your website:

• Selectors: CSS selectors such as element selectors, class selectors, or ID selectors can be used to select specific elements in the HTML code for styling.
• Typography: Typography can be used to set the font-family, adjust the size, font-weight, and color of the text within the form element to enhance readability.
• Box Model: With the knowledge of CSS properties like padding, border, and margin, which affect the spacing and layout, you can style HTML elements.
• Colors and Backgrounds: The color of your text or background can be styled using the CSS properties like color and background-color (or background-image) respectively.
• Responsiveness: With media queries, you can make your form responsive and adapt to different screen sizes and devices.
• Layout: You can control the layout of a form to make it user-friendly with CSS properties like display, float, and positioning.

Best Practices and Accessibility

Like every other HTML document, ensure your form complies with web standards and is accessible to people with disabilities. For best practices and accessibility, take note of the following:

Structures and Semantics

• Always use proper semantic HTML elements (like <form>, <input>, <label>, and so on) to structure not just forms but every other HTML document.
• Nest elements properly and associate labels to their respective input field.
• Make sure your input fields have the appropriate type attributes.

Error Handling and Validation

• Combine both client-side and server-side validation to avoid incorrect or incomplete data submission.
• Use the appropriate attribute to display error messages when form submission fails or validation errors occur.

Responsive Design

• Your forms should be responsive and adapt to various screen sizes and devices.
• Use CSS media queries to adjust your form layouts and styles based on the viewport size.

Design and Contrast

• Use fonts and colors that are easy to see.
• The color contrast between text and background should ensure readability, especially for users with low vision.

ARIA Roles and Attributes

• ARIA (Accessible Rich Internet Application) roles and attributes improve accessibility for screen-reader users or other assistive technologies.
• ARIA attributes ( aria-labelledby, aria-describedby, and aria-invalid) provide additional context and feedback for form elements.

Conclusion

Creating good HTML forms that meet web standards improve user interaction and experience on your website. By following the best practices and accessibility, developers can create forms that are user-friendly, and effective in collecting data from users.

You can learn more about HTML forms and responsive web design using freeCodeCamp's Responsive Web Design Certification

If you've ever worked with form validation in React, you know that it can quickly become messy and overwhelming. This is especially the case if you're just starting out with React.

In this tutorial, I will show you how to create reusable React components that allow you to build maintainable and clean forms. They'll easily be able to scale as your application grows.

You will also learn how to implement the popular react-hook-form library in your React application, which will simplify the process of adding form validations. And you'll learn how to implement reusable input validations across your entire React application, eliminating the need for repetitive code.

Get ready to level up your form handling skills in React with this ultimate guide. Let's dive in and master form validation in React.

Here's what we'll cover:

1. What Are We Going to Build?
2. Getting Started
3. How to Build a Reusable Input Component
4. How to Implement Input Validation in React
5. How to Display Appropriate Error Messages
6. Dynamic Input Validation
7. How to Implement a Multiline Input Feature in the Input Component
8. How to Handle Successful Form Submission
9. Conclusion

Alright, let's dive in!

What Are We Going To Build?

In this tutorial, we will be building a minimalistic form that will allow users to input data. Here is a quick demo (live demo):

Preview of the final project

We will leverage the power of react-hook-form, a popular form validation library in the React ecosystem, to handle form validation efficiently. We will be using Tailwind CSS for styling.

Don't worry if you're not familiar with Tailwind CSS or react-hook-form, as this tutorial is designed to be beginner-friendly. But having a basic understanding of React fundamentals will help you get the most out of this tutorial.

So let's get started and create a sleek and functional form in React!

Getting Started

To get started with this tutorial, I highly recommend using the starter boilerplate that I've prepared for you. It comes with all the necessary dependencies and folder structure, so you won't need to spend time setting up your project from scratch.

You can simply clone the starter boilerplate from the provided GitHub repository and follow along with the tutorial without any delays. This will allow you to focus on learning and implementing the concepts of form validation in React without getting bogged down by setup details.

• Starter Boilerplate: View on GitHub
• Final Version: View on GitHub

After setting up the starter boilerplate and running it on your local machine, you should be able to see the following page. This page will serve as the starting point for our form validation project in React.

Starting page for our project

From here, we will gradually build upon the existing code and implement form validation using react-hook-form.

During this tutorial, we will be focusing on two key files: src/components/Input.jsx and src/Form.jsx.

In src/components/Input.jsx, we will create a reusable input React component. This component will serve as the foundation for our form, allowing users to input data in a clean and user-friendly manner.

We will implement input validation using react-hook-form, which will ensure that the data entered by users is valid before it is submitted.

Next, we will move on to src/Form.jsx, where we will handle form validation and submission. This file will serve as the main container for our form, and we will utilize react-hook-form to handle form validation efficiently.

By completing these two files, you will be able to create a beautiful and functional form with reusable input components and efficient form validation. So let's dive into the code and build our form validation project step by step.

How to Build a Reusable Input Component

To start our form validation project, we will first create a reusable input component. Currently, our src/components/Input.jsx looks like this:

Screenshot of src/components/Input.jsx

The provided boilerplate code imports necessary dependencies such as classnames, react-hook-form, framer-motion, and react-icons. It defines a Input component, which currently renders a simple "input!" text. It also defines an InputError component which currently renders a "error" text.

Additionally, it includes a framer motion animation object framer_error with initial, animate, exit, and transition properties for error handling. This code will be further enhanced and customized to create a reusable input component for our form validation project.

Now it's time to dive into some coding! Our Input component will receive props that will determine the type of input to render, placeholder, id, and so on. We will utilize Tailwind CSS to add styling to our input component.

Let's start enhancing our input component with props and Tailwind CSS. Add the following code to src/components/Input.jsx:

export const Input = ({ label, type, id, placeholder }) => {
  return (
    <div className="flex flex-col w-full gap-2">
      <div className="flex justify-between">
        <label htmlFor={id} className="font-semibold capitalize">
          {label}
        </label>
      </div>
      <input
        id={id}
        type={type}
        className="w-full p-5 font-medium border rounded-md border-slate-300 placeholder:opacity-60"
        placeholder={placeholder}
      />
    </div>
  )
}

The Input component receives ({ label, type, id, placeholder }) as props. These props are then used to dynamically render the Input component.

The label prop is used as the text content of the label element, and the type, id, and placeholder props are passed directly to the corresponding attributes of the input element using JSX syntax. This allows the Input component to be flexible and reusable, as different values can be passed in as props to customize its behavior based on the specific use case.

Now let's see our input component in action by adding the following code to src/Form.jsx:

export const Form = () => {
  return (
    <div className="container mt-5 text-center">
      <div className="grid gap-5 md:grid-cols-2">
        <Input
          label="name"
          type="text"
          id="name"
          placeholder="type your name..."
        />
        <Input
          label="password"
          type="password"
          id="password"
          placeholder="type your password..."
        />
      </div>
    </div>
  )
}

After adding the code to src/Form.jsx, open up your local server and you should be able to see the resulting page with the input component:

Preview of what we've built so far

Great job 🎉! You have successfully created a re-usable Input component for your app. Now, let's take it a step further and add some exciting validation features to enhance our app's functionality.

How to Implement Input Validation in React

Now it's time to implement react-hook-form and add input validation to our application.

First, we need to modify our src/Form.jsx file to utilize the useForm hook and FormProvider component provided by react-hook-form. These tools will allow us to easily handle form validation and submission in our React application.

Let's dive into the details of how to use them effectively. Add the following code to the src/Form.jsx:

export const Form = () => {
  const methods = useForm()

  const onSubmit = methods.handleSubmit(data => {
    console.log(data)
  })

  return (
    <FormProvider {...methods}>
      <form
        onSubmit={e => e.preventDefault()}
        noValidate
        className="container"
      >
        <div className="grid gap-5 md:grid-cols-2">
          <Input
            label="name"
            type="text"
            id="name"
            placeholder="type your name..."
          />
          <Input
            label="password"
            type="password"
            id="password"
            placeholder="type your password..."
          />
        </div>
        <div className="mt-5">
          <button
            onClick={onSubmit}
            className="flex items-center gap-1 p-5 font-semibold text-white bg-blue-600 rounded-md hover:bg-blue-800"
          >
            <GrMail />
            Submit Form
          </button>
        </div>
      </form>
    </FormProvider>
  )
}

There's a lot happening in this section, but no worries – I'll guide you through it. First, you use const methods = useForm() to set up the form methods from react-hook-form for form management.

Next, you create a custom onSubmit function that utilizes the methods to handle form submission, which we'll run when the form is successfully submitted.

Then you use the FormProvider component provided by react-hook-form to wrap your form, allowing you to access the form's context inside your Input component later on. Then you utilize the JavaScript spread operator to pass all the useForm methods to the FormProvider.

Inside the FormProvider, you create a form and pass noValidate to indicate that you want to rely entirely on react-hook-form for form validation. You also prevent the form's default behavior by passing onSubmit={e => e.preventDefault()}.

Instead of attaching the onSubmit function to the form, you create a custom button at the end of the file and pass the custom onSubmit function to it to handle form submission.

Next, you need to update the Input component to enable form validation. Add the following code to src/components/Input.jsx:

export const Input = ({ label, type, id, placeholder }) => {
  const { register } = useFormContext()

  return (
    <div className="flex flex-col w-full gap-2">
      <div className="flex justify-between">
        <label htmlFor={id} className="font-semibold capitalize">
          {label}
        </label>
      </div>
      <input
        id={id}
        type={type}
        className="w-full p-5 font-medium border rounded-md border-slate-300 placeholder:opacity-60"
        placeholder={placeholder}
        {...register(label, {
          required: {
            value: true,
            message: 'required',
          },
        })}
      />
    </div>
  )
}

You are retrieving the register function from the useFormContext hook provided by react-hook-form, which is used to register an input field with the library, allowing it to handle validation. This function will be passed to the input element.

The register function takes two arguments. The first argument is the name of the input, which will be used as a key within your form context to access the input's value or retrieve its error message.

The second argument is an object that contains the input's validations. React-hook-form supports a wide range of validations, and you can refer to their documentation for more information. For now, we are only using the required validation.

Now open up your local server, you can enter values into all the inputs. But the form cannot be submitted until all inputs are filled, as they have required validation. Upon successful submission, the custom onSubmit function will execute and log the form data into the browser console:

Successful form submission

Congratulations! 🎉 You've successfully completed this challenging section. Great job! Now, let's take it a step further and enhance our custom Input component by learning how to pass dynamic validations and display appropriate error messages.

How to Display Appropriate Error Messages

Before going any further, let's get error messages out of the way. Add this code to src/components/Input.jsx:

export const Input = ({ label, type, id, placeholder }) => {
  const { register } = useFormContext()

  return (
    <div className="flex flex-col w-full gap-2">
      <div className="flex justify-between">
        <label htmlFor={id} className="font-semibold capitalize">
          {label}
        </label>
      </div>
      <input
        id={id}
        type={type}
        className="w-full p-5 font-medium border rounded-md border-slate-300 placeholder:opacity-60"
        placeholder={placeholder}
        {...register(label, {
          required: {
            value: true,
            message: 'required',
          },
        })}
      />
    </div>
  )
}

const InputError = ({ message }) => {
  return (
    <motion.p
      className="flex items-center gap-1 px-2 font-semibold text-red-500 bg-red-100 rounded-md"
      {...framer_error}
    >
      <MdError />
      {message}
    </motion.p>
  )
}

const framer_error = {
  initial: { opacity: 0, y: 10 },
  animate: { opacity: 1, y: 0 },
  exit: { opacity: 0, y: 10 },
  transition: { duration: 0.2 },
}

Let me explain to you what's going on here. First of all, you've created a custom component called InputError which recieves a message as a prop and display it.

You are using framer motion to add smooth transitions to this component. Framer Motion is a library which allows us to add cool animations to our react components.

Now let's update your Input component so you can make use of InputError:

import { findInputError, isFormInvalid } from '../utils'

export const Input = ({ label, type, id, placeholder }) => {
  const {
    register,
    formState: { errors },
  } = useFormContext()

  const inputError = findInputError(errors, label)
  const isInvalid = isFormInvalid(inputError)

  return (
    <div className="flex flex-col w-full gap-2">
      <div className="flex justify-between">
        <label htmlFor={id} className="font-semibold capitalize">
          {label}
        </label>
        <AnimatePresence mode="wait" initial={false}>
          {isInvalid && (
            <InputError
              message={inputError.error.message}
              key={inputError.error.message}
            />
          )}
        </AnimatePresence>
      </div>
      <input
        id={id}
        type={type}
        className="w-full p-5 font-medium border rounded-md border-slate-300 placeholder:opacity-60"
        placeholder={placeholder}
        {...register(label, {
          required: {
            value: true,
            message: 'required',
          },
        })}
      />
    </div>
  )
}

You're using the useFormContext hook to retrieve the formState, which contains all the form error messages. But in order to display the errors properly, you need to extract the relevant errors for each input.

To simplify this process, I've already written a utility function called findInputError.js in the src/utils directory. This function takes an errors object and the input's name as arguments and returns the related errors. Then we pass the filtered error to the InputError component. You can check out this utility function for reference:

Screenshot of src/utils/findInputError.js

In order to display an error message, the form must be invalid. To determine if the form is invalid or not, I've also written a simple utility function for you that takes an error object as input and returns true if the form is not valid. You can check out this utility function for reference:

Screenshot of src/utils/isFormInvalid.js

Additionally, you may have noticed that we've used the AnimatePresence component from the Framer Motion library to wrap the InputError component. We did this to add animation to the unmounting of InputError, providing a smooth user experience. While this is optional, I thought it would be a nice touch to add to this project.

Here is what your project looks like so far:

Preview of what we've built so far

Dynamic Input Validation

Part 1

You have made excellent progress so far! Currently, we have hard-coded validations into the Input component, but you may need different types of validations for each input in the future.

Let's update the Input component to receive a validation object as a prop and pass it to the react-hook-form register function. Let's modify src/components/Input.jsx like this:

export const Input = ({ label, type, id, placeholder, validation, name }) => {
  const {
    register,
    formState: { errors },
  } = useFormContext()

  const inputError = findInputError(errors, name)
  const isInvalid = isFormInvalid(inputError)

  return (
    <div className="flex flex-col w-full gap-2">
      <div className="flex justify-between">
        <label htmlFor={id} className="font-semibold capitalize">
          {label}
        </label>
        <AnimatePresence mode="wait" initial={false}>
          {isInvalid && (
            <InputError
              message={inputError.error.message}
              key={inputError.error.message}
            />
          )}
        </AnimatePresence>
      </div>
      <input
        id={id}
        type={type}
        className="w-full p-5 font-medium border rounded-md border-slate-300 placeholder:opacity-60"
        placeholder={placeholder}
        {...register(name, validation)}
      />
    </div>
  )
}

There haven't been many changes. You have added two new props to our custom Input component, a validation object and a name prop. We will use the name prop instead of the label to register our input, and also utilize it to find the related input errors.

You've also passed the validation prop to the register function instead of hard-coding it. This allows you to have dynamic validations for your inputs.

Now let's modify src/Form.jsx and pass dynamic validations to our custom Input component:

export const Form = () => {
  const methods = useForm()

  const onSubmit = methods.handleSubmit(data => {
    console.log(data)
  })

  return (
    <FormProvider {...methods}>
      <form
        onSubmit={e => e.preventDefault()}
        noValidate
        autoComplete="off"
        className="container"
      >
        <div className="grid gap-5 md:grid-cols-2">
          <Input
            label="name"
            name="name"
            type="text"
            id="name"
            placeholder="type your name..."
            validation={{
              required: {
                value: true,
                message: 'required',
              },
            }}
          />
          <Input
            label="password"
            name="password"
            type="password"
            id="password"
            placeholder="type your password..."
            validation={{
              required: {
                value: true,
                message: 'required',
              },
              minLength: {
                value: 6,
                message: 'min 6 characters',
              },
            }}
          />
        </div>
        <div className="mt-5">
          <button
            onClick={onSubmit}
            className="flex items-center gap-1 p-5 font-semibold text-white bg-blue-600 rounded-md hover:bg-blue-800"
          >
            <GrMail />
            Submit Form
          </button>
        </div>
      </form>
    </FormProvider>
  )
}

You are now passing different validations to each Input component. This allows each Input to dynamically validate its value based on the provided validation object.

Part 2

In the previous section, you learned how to pass dynamic validation to your custom Input component.

While this approach works, it may not be efficient if you need to use the password or name Input component in multiple places, such as the sign-up page, login page, and profile page.

Copy-pasting the same code in multiple locations can lead to maintenance issues, especially if you need to make changes to the validation logic later on.

But there is a solution to this problem. You can isolate the input validations into a separate object and then pass that object to the custom Input component using JavaScript spread operators. This approach allows you to centralize the validation logic, making it easier to manage and update across your application, even as it scales.

Let's update src/Form.jsx and see how this works in action:

export const Form = () => {
  const methods = useForm()

  const onSubmit = methods.handleSubmit(data => {
    console.log(data)
  })

  const name_validation = {
    name: 'name',
    label: 'name',
    type: 'text',
    id: 'name',
    placeholder: 'write your name ...',
    validation: {
      required: {
        value: true,
        message: 'required',
      },
      maxLength: {
        value: 30,
        message: '30 characters max',
      },
    },
  }

  const password_validation = {
    name: 'password',
    label: 'password',
    type: 'password',
    id: 'password',
    placeholder: 'type password ...',
    validation: {
      required: {
        value: true,
        message: 'required',
      },
      minLength: {
        value: 6,
        message: 'min 6 characters',
      },
    },
  }

  return (
    <FormProvider {...methods}>
      <form
        onSubmit={e => e.preventDefault()}
        noValidate
        autoComplete="off"
        className="container"
      >
        <div className="grid gap-5 md:grid-cols-2">
          <Input {...name_validation} />
          <Input {...password_validation} />
        </div>
        <div className="mt-5">
          <button
            onClick={onSubmit}
            className="flex items-center gap-1 p-5 font-semibold text-white bg-blue-600 rounded-md hover:bg-blue-800"
          >
            <GrMail />
            Submit Form
          </button>
        </div>
      </form>
    </FormProvider>
  )
}

Great! Using a separate object to store input props and validations, and then passing it to the custom Input component using spread operators can help you to centralize and manage the validation logic in your application.

This approach can make it easier to update or modify the validations in one place, instead of having to make changes in multiple locations. It can also improve code reusability and reduce duplication, especially when using the same input component in different parts of your application.

In order to keep the input validation logic separate from the main component, I have created an input validation file in the boilerplate code located at src/utils/inputValidations. This file contains various pre-defined input validators that you can utilize in your application.

You can easily import these validators wherever needed and pass them to the custom Input component using JavaScript spread operators. This approach allows for centralized management of input validations, making it easy to update and reuse them across different parts of your application.

By leveraging the input validation file, you can keep your code organized, maintainable, and scalable, and ensure consistency in input validation throughout your application.

Let's modify src/Form.jsx and use our custom validators:

export const Form = () => {
  const methods = useForm()

  const onSubmit = methods.handleSubmit(data => {
    console.log(data)
  })

  return (
    <FormProvider {...methods}>
      <form
        onSubmit={e => e.preventDefault()}
        noValidate
        autoComplete="off"
        className="container"
      >
        <div className="grid gap-5 md:grid-cols-2">
          <Input {...name_validation} />
          <Input {...email_validation} />
          <Input {...num_validation} />
          <Input {...password_validation} />
        </div>
        <div className="mt-5">
          <button
            onClick={onSubmit}
            className="flex items-center gap-1 p-5 font-semibold text-white bg-blue-600 rounded-md hover:bg-blue-800"
          >
            <GrMail />
            Submit Form
          </button>
        </div>
      </form>
    </FormProvider>
  )
}

Now your code becomes much cleaner and more maintainable. One of the major benefits is that you can now easily use the same input validator at multiple places in your application without duplicating code.

This means that if you need to update the validation logic, you only need to make changes in one place, and the changes will be applied everywhere the input validator is used. This makes managing input validations more efficient and minimizes the risk of inconsistencies across different parts of your application. It's an awesome approach that promotes code reusability and scalability.

How to Implement a Multiline Input Feature in the Input Component

Congratulations on your progress so far! With the challenging parts behind us, we can now focus on adding a straightforward feature to our custom Input component. This feature will allow us to easily handle multiline inputs in our application.

Add the following code to src/components/Input.jsx:

export const Input = ({
  name,
  label,
  type,
  id,
  placeholder,
  validation,
  multiline,
  className,
}) => {
  const {
    register,
    formState: { errors },
  } = useFormContext()

  const inputErrors = findInputError(errors, name)
  const isInvalid = isFormInvalid(inputErrors)

  const input_tailwind =
    'p-5 font-medium rounded-md w-full border border-slate-300 placeholder:opacity-60'

  return (
    <div className={cn('flex flex-col w-full gap-2', className)}>
      <div className="flex justify-between">
        <label htmlFor={id} className="font-semibold capitalize">
          {label}
        </label>
        <AnimatePresence mode="wait" initial={false}>
          {isInvalid && (
            <InputError
              message={inputErrors.error.message}
              key={inputErrors.error.message}
            />
          )}
        </AnimatePresence>
      </div>
      {multiline ? (
        <textarea
          id={id}
          type={type}
          className={cn(input_tailwind, 'min-h-[10rem] max-h-[20rem] resize-y')}
          placeholder={placeholder}
          {...register(`${name}`, validation)}
        ></textarea>
      ) : (
        <input
          id={id}
          type={type}
          className={cn(input_tailwind)}
          placeholder={placeholder}
          {...register(name, validation)}
        />
      )}
    </div>
  )
}

You have made some modifications to the Input component code. You have added two new props: multiline, which determines whether the component should render an input or a textarea, and className, which allows us to customize the Input component with custom Tailwind utility classes if needed.

To merge all the utility classes together, you are using a JavaScript library called classnames, which provides a clean syntax for combining multiple class names. Now let's add a multiline input to src/Form.jsx:

export const Form = () => {
  const methods = useForm()

  const onSubmit = methods.handleSubmit(data => {
    console.log(data)
  })

  return (
    <FormProvider {...methods}>
      <form
        onSubmit={e => e.preventDefault()}
        noValidate
        autoComplete="off"
        className="container"
      >
        <div className="grid gap-5 md:grid-cols-2">
          <Input {...name_validation} />
          <Input {...email_validation} />
          <Input {...num_validation} />
          <Input {...password_validation} />
          <Input {...desc_validation} className="md:col-span-2" />
        </div>
        <div className="mt-5">
          <button
            onClick={onSubmit}
            className="flex items-center gap-1 p-5 font-semibold text-white bg-blue-600 rounded-md hover:bg-blue-800"
          >
            <GrMail />
            Submit Form
          </button>
        </div>
      </form>
    </FormProvider>
  )
}

The {...desc_validation} object has multiline set to true, which allows it to render a textarea instead of an input. Also, you've passed a custom classname to this particular Input component, ensuring it always fills the full width. If you open your local server, you will see the output as follows:

Preview of what we've built so far

With that, your Input component is officially completed! 🎉 You've successfully created a maintainable and reusable component that you can use in your own React applications.

Before we wrap up, there's one last topic to discuss which is successful form submission. Let's get into that.

How to Handle Successful Form Submission

In an ideal scenario, we would like to display a success message when a form submission is successful, process the submitted data, and reset the form. In this section, we will cover how to handle these actions.

First, let's update src/Form.jsx:

export const Form = () => {
  const methods = useForm()
  const [success, setSuccess] = useState(false)

  const onSubmit = methods.handleSubmit(data => {
    console.log(data)
    methods.reset()
    setSuccess(true)
  })

  return (
    <FormProvider {...methods}>
      <form
        onSubmit={e => e.preventDefault()}
        noValidate
        autoComplete="off"
        className="container"
      >
        <div className="grid gap-5 md:grid-cols-2">
          <Input {...name_validation} />
          <Input {...email_validation} />
          <Input {...num_validation} />
          <Input {...password_validation} />
          <Input {...desc_validation} className="md:col-span-2" />
        </div>
        <div className="mt-5">
          {success && (
            <p className="flex items-center gap-1 mb-5 font-semibold text-green-500">
              <BsFillCheckSquareFill /> Form has been submitted successfully
            </p>
          )}
          <button
            onClick={onSubmit}
            className="flex items-center gap-1 p-5 font-semibold text-white bg-blue-600 rounded-md hover:bg-blue-800"
          >
            <GrMail />
            Submit Form
          </button>
        </div>
      </form>
    </FormProvider>
  )
}

We have utilized the useState hook to create a state variable called success, which is initially set to false.

Upon successful form submission, we update the state value to true using the setSuccess function. When success is true, a paragraph with the message "Form has been submitted successfully" will be displayed. Also, we are utilizing the methods object from the react-hook-form library to reset the form using methods.reset() after a successful submission.

We have also included a console.log statement to display the submitted data in the console after form submission. You can utilize this data as needed, such as sending it to a backend server, storing it in local storage, and so on.

But for the purpose of simplicity in this tutorial, we are solely logging the submitted data in the console, which will be displayed in the following format:

Screenshot of successful form submission

At this point, we have a fully functional form that includes a custom Input component and reusable Input validations. This form gracefully handles different form states, whether it's a failed submission or a successful one.

Conclusion

In this tutorial, we have successfully built a maintainable and reusable form in React using the react-hook-form library. We created a custom Input component that can handle various types of inputs with validation. We also implemented error handling for failed form submissions and displayed success messages for successful submissions.

Throughout the tutorial, you learned how to use react-hook-form to manage form state, handle form submissions, reset forms, and validate form inputs. You also utilized the power of Tailwind CSS for styling and customization, including passing custom classnames to our Input component.

By following best practices and leveraging the features of react-hook-form, you were able to create a clean and efficient form that can be easily integrated into any React application.

This form can serve as a foundation for more complex forms with additional functionality, such as backend API integration, form data persistence, and form validation with custom rules.

I hope this tutorial has been helpful in understanding how to build a form with react-hook-form and Tailwind CSS. Feel free to experiment and extend the functionalities of this form to suit your specific requirements.

You can follow me on Twitter where I share more useful tips on web development. Happy coding!

Creating forms with proper validation can be tough and problematic. But in this blog post, I will show you how to do so in a simple and straightforward way.

We'll learn how to add validation in a form using React and React Hook Form.

Here's an interactive scrim about how to add form validation in React forms:

How to Create a Form in React

We will start by creating a form using the Semantic UI library. So, let's install it using one of the following commands:

yarn add semantic-ui-react semantic-ui-css
## Or NPM
npm install semantic-ui-react semantic-ui-css

After you've installed it, you need to import the package into your index.js file, which is your application's main entry file.

import 'semantic-ui-css/semantic.min.css'

Then we need a form with four fields. So, let's create it with the following code:

import React from 'react';
import { Form, Button } from 'semantic-ui-react';

export default function FormValidation() {
    return (
        <div>
            <Form>
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' type="text" />
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' type="text" />
                </Form.Field>
                <Form.Field>
                    <label>Email</label>
                    <input placeholder='Email' type="email" />
                </Form.Field>
                <Form.Field>
                    <label>Password</label>
                    <input placeholder='Password' type="password" />
                </Form.Field>
                <Button type='submit'>Submit</Button>
            </Form>
        </div>
    )
}

We have a form now. It has four fields, which are First Name, Last Name, Email, and Password. It also has a Submit button so users can submit the form.

How to Install React Hook Form

To install React Hook Form, use the command below:

npm install react-hook-form

You can read the documentation if you want to learn more about the library. We can use it for both React web and React Native applications.

The first thing we need to do here is get the data from the input fields and display them into the console. We need to import the package first:

import { useForm } from 'react-hook-form';

Then, we need to destructure the useForm object in our app, like this:

const { register, handleSubmit, formState: { errors } } = useForm();

Now, we are going to use the register property from the object useForm to register our form fields. It will be something like this:

<Form.Field>
  <label>First Name</label>
  <input placeholder='First Name' type='text' {...register('firstName')} />
</Form.Field>;

Now the First Name form field has the key of firstName. As you can see, we have declared it in the register. Repeat this for all other fields.

import React from 'react';
import { Form, Button } from 'semantic-ui-react';
import { useForm } from 'react-hook-form';

export default function FormValidation() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  return (
    <div>
      <Form>
        <Form.Field>
          <label>First Name</label>
          <input
            placeholder='First Name'
            type='text'
            {...register('firstName')}
          />
        </Form.Field>
        <Form.Field>
          <label>Last Name</label>
          <input
            placeholder='Last Name'
            type='text'
            {...register('lastName')}
          />
        </Form.Field>
        <Form.Field>
          <label>Email</label>
          <input placeholder='Email' type='email' {...register('email')} />
        </Form.Field>
        <Form.Field>
          <label>Password</label>
          <input
            placeholder='Password'
            type='password'
            {...register('password')}
          />
        </Form.Field>
        <Button type='submit'>Submit</Button>
      </Form>
    </div>
  );
}

This is the whole code to this point. Four fields, and all registered.

Now, on the Form, we need to make an onSubmit event. This means that if we click the Submit button at the bottom, our form data should be submitted.

<Form onSubmit={handleSubmit(onSubmit)}>

And we also need to create a function onSubmit, that will do some specific action when the submit button is clicked or pressed.

const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data) => {
  console.log(data);
}

So, if we click the submit button, our entered data will show up in the console.

How to Add Validation to our Forms

Now, here comes the final and most awaited step. Let's add the validations.

Let's start with the First Name field. We will use the required and maxLength properties, which are pretty self-explanatory.

• Required means that the field is required.
• MaxLength denotes the maximum length of the characters we enter.

<input
  placeholder='First Name'
  type="text"
  {...register("firstName", { required: true, maxLength: 10 })}
/>

So, set required to true and maxLength to 10. Then if we submit the form without entering the First Name, or if the number of characters is more than 10, it will throw an error.

But we need to add the error message itself too. Add the following error message after the First Name form field.

{errors.firstName && <p>Please check the First Name</p>}

Here, it will throw an error. So, let's check what happened.

You can see the error after the First Name field that says "Please check the First Name".

Repeat that process for Last Name.

Entering more than 10 characters will also throw an error.

Now, we need to add validation for the email and password fields. Here, we will use another property called Pattern. Pattern will contain a Regular Expression value, and it will be checked against the entered data in the form.

pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

This is what a Regular Expression pattern looks like. It's hard to read, but this is a pattern for Email Validation. Let's use this in our application.

<Form.Field>
  <label>Email</label>
  <input
    placeholder='Email'
    type='email'
    {...register('email', {
      required: true,
      pattern:
        /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
    })}
  />
</Form.Field>

In the Email Form Field, add this pattern.

Entering the wrong email format will throw an error. But the error will disappear when we enter the right format.

Let's do the same for the Password Form Field. For the password field, we have the condition that it should contain one Capital Letter, one Small Letter, and the number of characters should be between 6 to 15. If our entered value fails any of these checks, it will throw an error.

<Form.Field>
  <label>Password</label>
  <input
    placeholder='Password'
    type='password'
    {...register('password', {
      required: true,
      pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15}$/,
    })}
  />
</Form.Field>
{
  errors.password && <p>Please check the Password</p>;
}

Now, our all the four form fields are completed.

import React from 'react';
import { Form, Button } from 'semantic-ui-react';
import { useForm } from 'react-hook-form';

export default function FormValidation() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <div>
      <Form onSubmit={handleSubmit(onSubmit)}>
        <Form.Field>
          <label>First Name</label>
          <input
            placeholder='First Name'
            type='text'
            {...register('firstName', { required: true, maxLength: 10 })}
          />
        </Form.Field>
        {errors.firstName && <p>Please check the First Name</p>}
        <Form.Field>
          <label>Last Name</label>
          <input
            placeholder='Last Name'
            type='text'
            {...register('lastName', { required: true, maxLength: 10 })}
          />
        </Form.Field>
        {errors.lastName && <p>Please check the Last Name</p>}
        <Form.Field>
          <label>Email</label>
          <input
            placeholder='Email'
            type='email'
            {...register('email', {
              required: true,
              pattern:
                /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
            })}
          />
        </Form.Field>
        {errors.email && <p>Please check the Email</p>}
        <Form.Field>
          <label>Password</label>
          <input
            placeholder='Password'
            type='password'
            {...register('password', {
              required: true,
              pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15}$/,
            })}
          />
        </Form.Field>
        {errors.password && <p>Please check the Password</p>}
        <Button type='submit'>Submit</Button>
      </Form>
    </div>
  );
}

Here's the whole code for your reference. And we can also add some styling to our error messages – something like this, maybe:

Conclusion

Now you know how to add validation in React Forms. Note that React Hook Form only works in Functional Components, not in Class Components.

You can check out my video on Let's add Validation in Forms using React and React Hook Form, which is on my YouTube channel.

And here's the whole code on GitHub for your reference.

Happy Learning.

Here's the project demo that we're gonna build 👇

Desktop design

Here's a small sample of how the form will work 👇

project sample

You can watch this tutorial on YouTube as well if you like:

Source code

You can get the source code, including the images, from here:

• CodePen
• GitHub

How to Setup the Project

Follow these steps to set up our project: 👇

• Create a new folder named "Project" and open VS Code
• Create index.html, style.css, and main.js files
• Link the files inside the HTML
• Download the images from my GitHub repository
• Paste this font-awesome link inside the head tag. Then, we can access Font Awesome icons 👇👇

<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
      crossorigin="anonymous"
    />

Here's what we'll cover:

• Writing the HTML
• Adding the CSS
• Writing the JavaScript
• Adding a social media button
• Adding the images
• Media queries for the mobile version (responsive)

Table of contents

How to Write the HTML

Create a class named .container inside the body tag and host the form tag which will have an id of form 👇

<div class="container">

    <form id="form"></form>

</div>

And inside the form tag, create 4 divs, like this 👇

<form id="form">

    <div class="title">Get Started</div>

    <div></div>
    <div></div>
    <div></div>

</form>

Inside those 3 empty div tags, let's create 3 inputs [Username, Email, and Password] along with the icons and labels.

Note: we are creating an .error class name. We will inject the error message here using JavaScript.

Username Input

<!-- User Name input -->

<div>
    <label for="username">User Name</label>
    <i class="fas fa-user"></i>

    <input
        type="text"
        name="username"
        id="username"
        placeholder="Joy Shaheb"
     />

    <i class="fas fa-exclamation-circle failure-icon"></i>
    <i class="far fa-check-circle success-icon"></i>

    <div class="error"></div>

</div>

Email Input

<!-- Email input -->

<div>
    <label for="email">Email</label>
    <i class="far fa-envelope"></i>

    <input
        type="email"
        name="email"
        id="email"
        placeholder="abc@gmail.com"
     />

    <i class="fas fa-exclamation-circle failure-icon"></i>
    <i class="far fa-check-circle success-icon"></i>

    <div class="error"></div>

</div>

Password Input

<!--   Password input -->

<div>
    <label for="password">Password</label>
    <i class="fas fa-lock"></i>

    <input
        type="password"
        name="password"
        id="password"
        placeholder="Password here"
     />

    <i class="fas fa-exclamation-circle failure-icon"></i>
    <i class="far fa-check-circle success-icon"></i>

    <div class="error"></div>

</div>

How to make the button

Finally, add the button before the form closing tag like this:

<form>
    <!-- other codes are here -->

    <button id="btn" type="submit">Submit</button>

</form>

Here's the result so far 👇

Result So far

Congrats on completing the HTML part! 🍾🎉🥂

How to Add the CSS

Let's add the CSS to style our form. First, let's remove the default styles of our browser including the font-family👇

/**
* ! changing default styles of brower
**/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

Now, apply these styles for the form tag:

/**
* ! style rules for form section
**/

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 400px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  padding: 50px;
}

Next, make these changes for our title text: 👇👇

.title {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 20px;
}

Your result so far 👇👇

Result so far

Now, add a margin to the bottom of our label text like this:

label {
  display: block;
  margin-bottom: 5px;
}

And add these styles to change the look and feel of our input tags 👇👇

form div input {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  outline: none;
  border: 2px solid #c4c4c4;
  padding: 0 30px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

Add this code to add some space and color changing effects:

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

input:focus {
  border: 2px solid #f2796e;
}

The result so far 👇👇

Result so far

How to Style the Icons

Now we're gonna style the icons which we imported from font-awesome. Follow along with the code: ✨✨

/**
* ! style rules for form icons
**/

form div i {
  position: absolute;
  padding: 10px;
}

Here's the result of adding those two lines 👇👇

Result so far

Now, add these styles to style the error class, along with the success and failure icons 👇👇

.failure-icon,
.error {
  color: red;
}

.success-icon {
  color: green;
}

.error {
  font-size: 14.5px;
  margin-top: 5px;
}

Here's the result so far 👇👇

Result so far

Look, the success and failure icons are overlapping each other. Don't worry, we will manipulate those in JavaScript. For now, you can hide them like this👇👇

.success-icon,
.failure-icon {
  right: 0;
  opacity: 0;
}

Now, let's style our submit button, like this 👇

/* Style rules for submit btn */

button {
  margin-top: 15px;
  width: 100%;
  height: 45px;
  background-color: #f2796e;
  border: 2px solid #f2796e;
  border-radius: 8px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.1s ease;
}

If you want to add a hover effect, then sure, add these styles 👇👇

button:hover {
  opacity: 0.8;
}

Take a Break!

So far so good. Take a break – you deserve it.

How to Add the JavaScript

First, we need to target all our classes and id from the HTML inside the JavaScript. To do this task efficiently, make these two functions 👇👇

let id = (id) => document.getElementById(id);

let classes = (classes) => document.getElementsByClassName(classes);

Then, store the classes and id inside these variables 👇

Note: Try not to make spelling mistakes. Otherwise, your JavaScript will not work.

let username = id("username"),
  email = id("email"),
  password = id("password"),
  form = id("form"),

  errorMsg = classes("error"),
  successIcon = classes("success-icon"),
  failureIcon = classes("failure-icon");

Now, we're gonna target our form and add the submit event listener 👇

form.addEventListener("submit", (e) => {
  e.preventDefault();
});

Now, we will create a function named engine which will do all sorts of form validation work for us. It will have three arguments – follow along here: 👇

let engine = (id, serial, message) => {}

The arguments represent the following:

• id will target our id
• serial will target our classes [error class, success and failure icons]
• message will print a message inside our .error class

Now create an if, else statement like this 👇

let engine = (id, serial, message) => {

  if (id.value.trim() === "") {
  } 

  else {
  }
}

Note: the id.value.trim() will remove all the extra white spaces from the value which the user inputs. You can get an idea of how it works by looking at this illustration 👇

trim() used to remove extra spaces

Now, look at our objectives 👇

• We want the JavaScript to print a message inside the error class whenever the user submits a blank form. At the same time, we want the failure icons to highlight as well.
• But, if the user fills in all the inputs and submits it, we want the success icon to be visible.

To accomplish this, write this logic 👇 to print the message:

let engine = (id, serial, message) => {

  if (id.value.trim() === "") {
    errorMsg[serial].innerHTML = message;
  } 

  else {
    errorMsg[serial].innerHTML = "";
  }
}

For the icons to work properly, add this code: 👇👇

let engine = (id, serial, message) => {

  if (id.value.trim() === "") {
    errorMsg[serial].innerHTML = message;
    id.style.border = "2px solid red";

    // icons
    failureIcon[serial].style.opacity = "1";
    successIcon[serial].style.opacity = "0";
  } 

  else {
    errorMsg[serial].innerHTML = "";
    id.style.border = "2px solid green";

    // icons
    failureIcon[serial].style.opacity = "0";
    successIcon[serial].style.opacity = "1";
  }
}

Time to implement our newly created function. Write these inside the place where we added the submit event listener 👇

form.addEventListener("submit", (e) => {
  e.preventDefault();

  engine(username, 0, "Username cannot be blank");
  engine(email, 1, "Email cannot be blank");
  engine(password, 2, "Password cannot be blank");
});

Here, we are passing the id names, serials of our class names, and passing the message which should be printed when we find an error when the user submits the form.

Here are the results so far 👇

The Result so far

How to Add the Social Media Buttons

So far so good, let's add social media sign up options. Follow along here. 👇

Inside the form tag, create a new div with the class name social:

<form id="form">

    <div class="social">

      <div class="title">Get Started</div>

      <div class="question">
        Already Have an Account? <br />
        <span>Sign In</span>
      </div>

      <div class="btn"></div>

      <div class="or">Or</div>
    </div>

    <!-- other codes are here-->
</form>

Inside the .btn class, we create two more divs with class names .btn-1 and .btn-2 with the images and text as well

<div class="btn">
  <div class="btn-1">
     <img src="https://img.icons8.com/color/30/000000/google-logo.png" />
     Sign Up
  </div>

  <div class="btn-2">
    <img src="https://img.icons8.com/ios-filled/30/ffffff/facebook-new.png" />
     Sign Up
   </div>
</div>

Here are the results so far 👇👇

The Result so far

Now, let's style the .btn-1 and .btn-2 first. We'll change the alignment of the buttons to row from column 👇

/**
* ! style rules for social section
**/

.btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 15px;
}

Here's what it looks like now:

The Result so far

Now, add styles for the button like this: 👇

.btn-1,
.btn-2 {
  padding: 10px 5px;
  width: 100%;
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  border: 2px solid #c4c4c4;
  border-radius: 8px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

Change the icon color and text color of .btn-2 like this: 👇

.btn-2 {
  background-color: #4f70b5;
  color: white;
}

Then add these small changes to make the component look better:

.or {
  text-align: center;
}

.question {
  font-size: 15px;
}

span {
  color: #f2796e;
  cursor: pointer;
}

The result so far:

Result so far

How to Add the Images

Now, let's add images to our project. First, let's write the HTML 👇

<div class="container">

      <div class="content">
        <div class="logo">
          <img src="https://svgshare.com/i/_go.svg" alt="" />
        </div>

        <div class="image"></div>

        <div class="text">
          Start for free & get <br />
          attractive offers today !
        </div>  
      </div>

   <form id="form">
   <!--other codes are here -->
   </form>

</div>

The result so far 👇

Result so far

Now we need to change the orientation of our content from column to row. Follow along 👇

.container {
  display: flex;
  flex-direction: row;
}

Add these style rules for the content section:

/**
* ! style rules for content section
**/

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: #f2796e;
  width: 55%;
  min-height: 100vh;
  padding: 10px 20px;
}

form {
   width: 45%;
   max-width: none;
}

The result so far 👇

Result so far

Add the main illustration in CSS:

.image {
  background-image: url("https://svgshare.com/i/_gZ.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* border: 2px solid black; */
  height: 65%;
}

And add these styles for the .text class:

.text {
  text-align: center;
  color: white;
  font-size: 18px;
}

form {
   width: 45%;
   max-width: none;
}

The result so far 👇

Result so far

How to Add Media Queries for the Mobile Version

We want to make this responsive. So we'll add media queries to help us with that.

For screens with a width from 900px, we will add these styles. Follow along 👇👇

@media (max-width: 900px) {
  .container {
    flex-direction: column;
  }

  form,
  .content {
    width: 100%;
  }

  .btn {
    flex-direction: column;
  }
  .image {
    height: 70vh;
  }
}

For screens with a width from 425px, we will make these minor changes 👇

@media (max-width: 425px) {
  form {
    padding: 20px;
  }
}

Here's the final result 👇👇

The final result

Conclusion

Congratulations !

Congratulations for reading until the end. Now you can easily and efficiently use JavaScript to handle form validation. Not only that, you also have a project to show your local recruiter!

Here's your medal for reading till the end ❤️

Suggestions & Criticisms Are Highly Appreciated ❤️

• LinkedIn/ JoyShaheb
• YouTube / JoyShaheb
• Twitter / JoyShaheb
• Instagram/ JoyShaheb

If you have recently gone through a React course, you probably didn't like this part, because there are a lot of states to manage if you have multiple input fields.

Firstly, you track the state of the input field using the onChange property which calls the useState() function. The input fields are wrapped around a form element.

When the user submits the form, it triggers the onClick or onSubmit property to set the inputs either to an array containing values or objects, depending on the number of input fields.

Then comes validation, which checks whether the user has entered any input. If not, then return an error, prompting the user to enter a valid input.

The logic here is a whole lot of boilerplate. You might be bored just hearing about the process.

What if I tell you that a single library can achieve all of this?

Here is what I’ll cover in this article:

1. What is React-Hook-Form?
2. How React-Hook-Form Affects Performance
3. How to Get User Data
4. How to Add Validation to Your Forms
5. How to Improve the Front End and User Experience Using Chakra-UI.

What is React-Hook-Form?

React-Hook-Form is a flexible library that takes care of all your validation, state management, and user data – and it's all packed within a size of 25.3 kb (unpacked) and 9.1 kb GZip (changes with versions).

It's simple and straightforward to use, and you have to write minimal code.

Image source

One of the features I’m impressed with is its performance. As mentioned in its official site, React-Hook-Form:

“Minimizes the number of re-renders and faster mounting, striving to provide the best user experience.”

How React-Hook-Form Affects Performance

If you have been following the previous versions of the library, the documentation often referenced the ref property to handle state management and validation.

<input type=”password” placeholder=”Password” ref={register} />

In this way, React-Hook-Form adopts a method of uncontrolled input, rather than changing the state every single time. It isolates the selected component and avoids rendering the child components.

This significantly reduces the number of re-renders and boosts the overall performance of the application. (Source)

How to Get User Data from a Form

I have made a Codesandbox for this particular tutorial, so make sure you refer to it in case you get lost.

Here's what you'll need to follow along:

• App link
• Source code

And here’s what we will be building. It's a simple form with validation, alerts when a user submits, and errors that's built using Chakra UI.

First, let's install the library:

npm install react-hook-form

Now import the useForm hook from the package:

import { useForm } from "react-hook-form";

Destructure the following constants from the useForm hook:

const { register, handleSubmit, formState: { errors } } = useForm();

Create a simple form element like this:

<form onSubmit={handleSubmit(onSubmit)}>
    <input type=”text” placeholder=”First Name” {...register(“firstname”)} />
    <input type=”submit” />
</form>

On submit, the form will pass a function onto the handleSubmit function. We can define the onSubmit function like this:

const onSubmit = data => console.log(data);

Now if we test out our form element, when it's submitted the console returns the following:

Looks like it returned an object with the property firstname and has successfully gotten ahold of the data in the input field.

Let’s now add a bunch more input fields:

<form onSubmit={handleSubmit(onSubmit)}>
    <input type=”text” placeholder=”First Name” {...register(“firstname”)} />
    <input type=”text” placeholder=”Last Name” {...register(“lastname”)} />
    <input type=”password” placeholder=”Your password” {...register(“password”)} />
    <input type=”submit” />
</form>

On logging the response, we get an object back:

Now, this data can be sent back to the database. But in this tutorial, let’s just display it back to the user, using useState( ).

const [data, setData] = useState();
const onSubmit = (data) => {
   setData(data);
 };

Let’s make a new component called Stats.js. Here, we’ll make use of Chakra UI’s Stat component.

import {
 HStack,
 Stack,
 Stat,
 StatHelpText,
 StatLabel
} from "@chakra-ui/react";
import React from "react";

export default function Stats(props) {
 return (
   <Stat mt={5}>
     <Stack
       p={4}
       borderWidth="3px"
       borderRadius="md"
       direction="column"
       align="flex-start"
     >
       <HStack>
         <StatLabel>Name: {props.Firstname}</StatLabel>
         <StatLabel>{props.Lastname}</StatLabel>
       </HStack>
       <StatHelpText>Password: {props.Password}</StatHelpText>
     </Stack>
   </Stat>
 );
}

Now, import this component into your root file and pass the respective props.

import Stats from "./Stats";
// App.js
{data && (
       <Stats
         Firstname={data.firstname}
         Lastname={data.lastname}
         Password={data.password}
       />
)}

The stats will only be displayed if the data is true.

The final result should look something like this:

How to Add Validation to a Form

Why do we need validation anyways? Let me take you through an example I went through during one of the hackathon projects I was working on.

I had built a Password manager, and I didn’t pay any attention to form validation. Users started entering empty passwords into the form. Eventually, there was a whole load of invalid data in the database.

Now if you visit any popular site, you might have noticed that it forces you to enter a strong password.

Let’s draw some conclusions from this case-study

• We want to get valid data
• We want our user data to be protected by entering strong passwords
• We want to keep the database clean by blocking invalid data

We’ll try to achieve these objectives using client-side validation provided by React-Hook-Form. We will use the register method provided by the library. It allows you to register the data a user enters and apply validation rules to it.

Consider the example below:

<input
      type="text"
      placeholder="First name"
      {...register("firstname", { required: true })}
/>


By setting the rule required to `true`, the user will be now forced to provide a string to pass the validation. We can further modify this by returning a message back to the user when this event occurs.

```js
<input
      type="text"
      placeholder="First name"
      {...register("firstname", { required: “Please enter your first name” })}
/>
{errors.firstname && <p>{errors.firstname.message}</p>}

If the object errors returns a true value, it will display the message to the user.

Let’s now force the user to provide a password with more than 8 characters.

<Input
      type="password"
      placeholder="Password"
      {...register("password", {
        required: "Please enter Password",
        minLength: { value: 8, message: "Too short" }
      })}
 />

By assigning the minLength property to 8, the user now will be compelled to enter an 8 character password.

Also, we can alert the user at the front-end by using the same method we used previously using And operator.

{errors.password && <p>{errors.password.message}</p>}

If you notice now, React-Hook-Form listens to the changes dynamically. So if the input is left empty, it displays an alert at the same time. If the password is too short, it updates the message dynamically. Beauty!

Now go ahead and make your own form. In the next section we’ll customise the form and send alerts to the user when an error pops up.

How to Improve the Front End and User Experience Using Chakra-UI

First of all let’s convert all the components we've used so far to Chakra UI components.

Instead of the normal <input />, simply replace the existing one with the Input from Chakra UI.

Import { Input } from “@chakra-ui/react”

Now import the VStack and Button component the same way and wrap the whole form with VStack.

<VStack>
         <Input
           type="text"
           placeholder="First name"
           {...register("firstname", {
             required: "Please enter first name",
             minLength: 3,
             maxLength: 80
           })}
         />
         <Input
           type="text"
           placeholder="Last name"
           {...register("lastname", {
             required: "Please enter Last name",
             minLength: 3,
             maxLength: 100
           })}
         />
         <Input
           type="password"
           placeholder="Password"
           {...register("password", {
             required: "Please enter Password",
             minLength: { value: 8, message: "Too short" }
           })}
         />
         <Button
           borderRadius="md"
           bg="cyan.600"
           _hover={{ bg: "cyan.200" }}
           variant="ghost"
           type="submit"
         >
           Submit
         </Button>
</VStack>

The props you see for the Button component are similar to the CSS properties, so migrating to Chakra UI won’t be a problem.

Now let’s give prompt alerts to the user when they enter any invalid data.

Make a new component AlertPop.js.

Import the following code:

import { Alert, AlertIcon, AlertTitle } from "@chakra-ui/react";

Let's define a prop for displaying the error message.

export default function AlertPop (props) {
 return (
   <Alert status="error">
     <AlertIcon />
     <AlertTitle mr={2}>{props.title}</AlertTitle>
   </Alert>
 );
}

Now import this component into the root file, and under every input field type in the below logic:

{errors.firstname && <AlertPop title={errors.firstname.message} />}
{errors.lastname && <AlertPop title={errors.lastname.message} />}
{errors.password && <AlertPop title={errors.password.message} />}

Finally import useToast like this:

import { useToast } from "@chakra-ui/react"

Using this component, we’ll be able to to display a pop-up message when the user successfully submits the form.

Here’s how we will perform this:

Import { useToast } from “@chakra-ui/react”

const toast = useToast( )
const onSubmit = (data) => {
   //console.log(data);
   toast({
     title: "Submitted!",
     status: "success",
     duration: 3000,
     isClosable: true
   });

   setData(data);
 };

The end result should look something like this:

Conclusion

Web technology is advancing every day, at a very fast rate. It’s good to learn to use various libraries, but make sure you understand the basics first.

For example, you just can’t start learning ReactJS all of a sudden without understanding DOM manipulation. The basics are the foundation, else you won’t be able to understand the beauty of how the web works.

Thanks for Reading!✨

It’s good to see that you have read this far. If you did gain some insights from this article, feel free to share it with your community and co-workers.

I talk about web technologies and build projects, further documenting the development process for other developers to reference. If you need any guidance, make sure you hit me up on Twitter.

When it comes to building forms in React, it's essential to use a form library that provides a lot of convenient tools and doesn’t require much code.

Based off of these two criteria, utility and simplicity, the ideal React form library to use for your applications is react-hook-form.

Let's see how to use react-hook-form in your own projects to build rich, featureful forms for your React apps.

How to Install react-hook-form

Let’s cover a typical use case: a user signing up to our application.

For our signup form, we will have three inputs for any new user's username, password, and email:

import React from "react";

const styles = {
  container: {
    width: "80%",
    margin: "0 auto",
  },
  input: {
    width: "100%",
  },
};

export default function Signup() {
  return (
    <div style={styles.container}>
      <h4>Sign up</h4>
      <form>
        <input placeholder="Username" style={styles.input} />
        <input placeholder="Email" style={styles.input} />
        <input placeholder="Password" style={styles.input} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Once we have a React project up and running, we’ll start by installing the react-hook-form library.

npm i react-hook-form

How to use the useForm hook

To start using react-hook-form we just need to call the useForm hook.

When we do, we’ll get back an object from which we will destructure the register property.

register is a function, which we need to connect to each one of the inputs as a ref.

function App() {
  const { register } = useForm();

  return (
    <div style={styles.container}>
      <h4>Signup</h4>
      <form>
        <input ref={register} placeholder="Username" style={styles.input} />
        <input ref={register} placeholder="Email" style={styles.input} />
        <input ref={register} placeholder="Password" style={styles.input} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

The register function will take the value our user has typed into each input to validate it. Register will also pass each value to a function which will be called when our form is submitted, which we'll cover next.

For register to work properly, for each input we need to provide an appropriate name attribute. For example, for the username input, it will have a name of "username".

The reason for this is that when our form is submitted, we will get all of the inputs' values on a single object. Each of the object's properties will be named according to the inputs' name attributes that we have specified.

function App() {
  const { register } = useForm();

  return (
    <div style={styles.container}>
      <h4>My Form</h4>
      <form>
        <input
          name="username"
          ref={register}
          placeholder="Username"
          style={styles.input}
        />
        <input
          name="email"
          ref={register}
          placeholder="Email"
          style={styles.input}
        />
        <input
          name="password"
          ref={register}
          placeholder="Password"
          style={styles.input}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

How to submit our form with handleSubmit

To handle submitting our form and receiving the input data, we’ll add an onSubmit to our form element and connect it to a local function with the same name:

function App() {
  const { register } = useForm();

  function onSubmit() {}

  return (
    <div style={styles.container}>
      <h4>My Form</h4>
      <form onSubmit={onSubmit}>
        <input
          name="username"
          ref={register}
          placeholder="Username"
          style={styles.input}
        />
        <input
          name="email"
          ref={register}
          placeholder="Email"
          style={styles.input}
        />
        <input
          name="password"
          ref={register}
          placeholder="Password"
          style={styles.input}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

From useForm, we’ll grab a function called handleSubmit and wrap it around onSubmit as a higher-order function.

The handleSubmit function will take care of collecting all of our data typed into each input which we’ll receive within onSubmit as an object called data.

Now if we console.log(data) we can see what we typed into each of our inputs on a property with the same name:

function App() {
  const { register, handleSubmit } = useForm();

  function onSubmit(data) {
    console.log(data); 
    // { username: 'test', email: 'test', password: 'test' }
  }

  return (
    <div style={styles.container}>
      <h4>Signup</h4>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          name="username"
          ref={register}
          placeholder="Username"
          style={styles.input}
        />
        <input
          name="email"
          ref={register}
          placeholder="Email"
          style={styles.input}
        />
        <input
          name="password"
          ref={register}
          placeholder="Password"
          style={styles.input}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Validation options with the register function

To validate our form and add constraints for each input’s value is very simple—we just need to pass information to the register function.

register accepts an object, which includes a number of properties that will tell register how to validate a given input.

The first property is required. By default, it is set to false but we can set that to true to make sure the form isn’t submitted if it’s not filled out.

We want the username value to be required and we want our users’ usernames to be more than six characters but less than 24.

To apply this validation, we can set the constraint of minLength to six, but the maxLength should be 20:

<input
  name="username"
  ref={register({
    required: true,
    minLength: 6,
    maxLength: 20,
  })}
  style={styles.input}
  placeholder="Username"
/>

If we were using numbers for this input (say if this input was for the person’s age), we would use the properties min and max instead of minLength and maxLength.

Next, we can supply a regex pattern if we like.

If we want a username to only contain uppercase and lowercase characters, we can use the following regex which allows for custom validation:

<input
  name="username"
  ref={register({
    required: true,
    minLength: 6,
    maxLength: 20,
    pattern: /^[A-Za-z]+$/i,
  })}
  style={styles.input}
  placeholder="Username"
/>

And finally, there is validate, a custom function that gives us access to the value typed into the input. validate allows us to provide our own logic to determine whether it is valid or not (by returning the boolean true or false).

For the email here, we also want it to be required and for it to be a valid email. To check this, we can pass the input to a function from the library validator called isEmail.

If the input is an email, it returns true. Otherwise, false:

<input
  name="email"
  ref={register({
    required: true,
    validate: (input) => isEmail(input), // returns true if valid
  })}
  style={styles.input}
  placeholder="Email"
/>

For password’s register function, we’ll set required to true, minlength to six, and we won’t set a maxLength:

<input
  name="password"
  ref={register({
    required: true,
    minLength: 6
  })}
  style={styles.input}
  placeholder="Password"
/>

How to display errors

Right now, if an input within our form isn’t valid, we don't tell our user that anything is wrong. We need to give them feedback to fix the values they have supplied.

When one of the inputs is invalid, the form data is merely not submitted (onSubmit isn’t called). Additionally, the first input with an error is automatically focused, which doesn’t provide our user any detailed feedback about what’s happening.

Instead of just not submitting the form, we can grab an errors object from useForm.

And just like the data function we get in onSubmit, errors contains properties corresponding to each of the inputs' names if it has an error.

For our example, we can add a conditional to each of the inputs and say if there is an error, we’ll set the borderColor to red.

function App() {
  const { register, handleSubmit, errors } = useForm();

  function onSubmit(data) {
    console.log(data);
  }

  return (
    <div style={styles.container}>
      <h4>My Form</h4>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          name="username"
          ref={register({
            required: true,
            minLength: 6,
            maxLength: 20,
            pattern: /^[A-Za-z]+$/i,
          })}
          style={{ ...styles.input, borderColor: errors.username && "red" }}
          placeholder="Username"
        />
        <input
          name="email"
          ref={register({
            required: true,
            validate: (input) => isEmail(input),
          })}
          style={{ ...styles.input, borderColor: errors.email && "red" }}
          placeholder="Email"
        />
        <input
          name="password"
          ref={register({
            required: true,
            minLength: 6,
          })}
          style={{ ...styles.input, borderColor: errors.password && "red" }}
          placeholder="Password"
        />
        <button type="submit" disabled={formState.isSubmitting}>
          Submit
        </button>
      </form>
    </div>
  );
}

Validation mode

You’ll notice, by default, that the errors object is updated only when we submit the form. The default validation is only performed upon submitting the form.

We can change this by passing the useForm an object, where we can set the mode to when we want validation to be performed: onBlur, onChange, or onSubmit.

onBlur is going to make validation run whenever the user ‘blurs’ or clicks away from the input. onChange is whenever a user types in the input, and onSubmit is whenever the form submitted.

For our form, let's select onBlur.

const { register, handleSubmit, errors } = useForm({
  mode: "onBlur",
});

Note that there are other helpers to both set and clear the errors manually (setError and clearError). These would be used if, for example, you had certain cases where you want it to create a different error or clear an error yourself within onSubmit.

How to disable our form with formState

The last value which we can get the useForm hook is formState.

It gives us important information such as when certain inputs have been touched, as well as when the form has been submitted.

So if you want to disable your form’s button to make sure the form isn’t submitted more times than it needs to, we could set disabled to formState.isSubmitting.

Whenever we’re submitting our form, it’s going to be disabled until it’s done with validation and running our onSubmit function.

Conclusion

I hope that this article showed you how to more easily create functional forms within your React apps.

It's worth nothing that there are a ton more features that come with react-hook-form that I didn’t cover here. The documentation should cover any use case you can think of.

If you are interested in seeing the final version of our code, click on the CodeSandbox link right here.

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

You might use some web forms to apply for a new car loan, whereas you'll use others to order pizza for dinner. So it's important that the data collected from those forms is cleaned, formatted correctly, and devoid of any malicious code. This process is called form validation.

We need form validation anytime we are accepting user input. We must ensure that the data entered is in the correct format, lies within a valid range of data (such as for date fields), and does not contain malicious code that could lead to SQL injections. Malformed or missing data can also cause the API to throw errors.

What are the different types of form validations?

Form validation can happen on the client side and the server side.

Client side validation occurs using HTML5 attributes and client side JavaScript.

You may have noticed that in some forms, as soon as you enter an invalid email address, the form gives an error "Please enter a valid email". This immediate type of validation is usually done via client side JavaScript.

In other cases, you may have noticed that when you fill out a form and enter details such as a credit card, it may show a loading screen and then show an error "This credit card is invalid".

Here, the form made a call to its server side code, and returned a validation error after performing additional credit card checks. This validation case where a server-side call is made is called server side validation.

What data should be validated?

Form validation is needed anytime you accept data from a user. This may include:

1. Validating the format of fields such as email address, phone number, zip code, name, password.
2. Validating mandatory fields
3. Checking the type of data such as string vs number for fields such as social security number.
4. Ensuring that the value entered is a valid value such as country, date, and so on.

How to set up client side validation

On the client side, validation can be done in two ways:

1. Using HTML5 functionality
2. Using JavaScript

How to set up validation with HTML5 functionality

HTML5 provides a bunch of attributes to help validate data. Here are some common validation cases:

• Making fields required using required
• Constraining the length of data:
  • minlength, maxlength: for text data
  • min and max for max value of num type
• Restricting the type of data using type:
  • <input type="email" name="multiple>
• Specifying data patterns using pattern:
  • specifies a regex pattern that the entered form data needs to match

When the input value matches the above HTML5 validation, it gets assigned a psuedo-class :valid, and :invalid if it doesn't.

Let's try an example:

<form>
<label for="firstname"> First Name: </label>
<input type="text" name="firstname" id="firstname" required maxlength="45">
<label for="lastname"> Last Name: </label>
<input type="text" name="lastname" id="lastname" required maxlength="45">
<button>Submit</button>
</form>

Link to JSFiddle

Here we have two required fields - First Name and Last Name. Try this example in JSFidle. If you skip either of these fields and press submit, you'll get a message, "Please fill out this field". This is validation using in-built HTML5.

How to set up validation using JavaScript

When implementing form validation, there are a few things to consider:

1. What is defined as "valid" data? This helps you answer questions about the format, length, required fields, and type of data.
2. What happens when invalid data is entered? This will help you define the user experience of the validation - whether to show an error message inline or at the top of the form, how detailed should the error message be, should the form be sumitted anyways, should there be analytics to track invalid format of data? And so on.

You can perform JavaScript validation in two ways:

1. Inline validation using JavaScript
2. HTML5 Constraint validation API

Inline validation using JavaScript

<form id="form">
  <label for="firstname"> First Name* </label>
  <input type="text" name="firstname" id="firstname" />
  <button id="submit">Submit</button>

  <span role="alert" id="nameError" aria-hidden="true">
    Please enter First Name
  </span>
</form>

const submit = document.getElementById("submit");

submit.addEventListener("click", validate);

function validate(e) {
  e.preventDefault();

  const firstNameField = document.getElementById("firstname");
  let valid = true;

  if (!firstNameField.value) {
    const nameError = document.getElementById("nameError");
    nameError.classList.add("visible");
    firstNameField.classList.add("invalid");
    nameError.setAttribute("aria-hidden", false);
    nameError.setAttribute("aria-invalid", true);
  }
  return valid;
}

#nameError {
  display: none;
  font-size: 0.8em;
}

#nameError.visible {
  display: block;
}

input.invalid {
  border-color: red;
}

Link to JSFiddle

In this example, we check for required fields using JavaScript. If a required field is not present, we use CSS to show the error message.

Aria labels are modified accordingly to signal an error. By using CSS to show / hide an error, we are reducing the number of DOM manipulations we need to make. The error message is provided in-context thereby making the user experience intuitive.

HTML5 Constraint validation API

The required and pattern HTML attributes can help perform basic validation. But if you want more complex validation or want to provide detailed error messaging, you can use the Constraint Validation API.

Some methods provided by this API are:

1. checkValidity
2. setCustomValidity
3. reportValidity

The following properties are useful:

1. validity
2. validationMessage
3. willValidate

In this example, we will validate using HTML5 inbuilt methods such as required and length in conjunction with the Constraint Validation API to provide detailed error messages.

<form>
<label for="firstname"> First Name: </label>
<input type="text" name="firstname" required id="firstname">
<button>Submit</button>
</form>

const nameField = document.querySelector("input");

nameField.addEventListener("input", () => {
  nameField.setCustomValidity("");
  nameField.checkValidity();
  console.log(nameField.checkValidity());
});

nameField.addEventListener("invalid", () => {
  nameField.setCustomValidity("Please fill in your First Name.");
});

Link to JSFiddle

Don't forget server side validation

Client side validation is not the only validation check you should do. You must also validate the data received from your client on the server side code to ensure that the data matches what you expect it to be.

You can also use server-side validation to perform business logic verifications that should not live on the client side.

Form Validation best practices

1. Always have server side validation, since malicious actors can bypass client side validation.
2. Provide detailed error messages in-context with the field that produced the error.
3. Provide an example of what the data should look like in case of an error message, such as - "Email did not match format - test@example.com"
4. Avoid using single error pages that involve redirection. This is bad user experience and forces the user to go back to a previous page to fix the form and lose context.
5. Always mark required fields.

Interested in more tutorials and articles like this? Sign up for my newsletter. or follow me on Twitter

Building an Angular application that involves many forms can be stressful. Especially so when you have to handle the validation messages on each component.

One way to reduce your stress is to write a generic validation class that handles all your validation messages.

On the one hand, this will significantly reduce the code on your HTML template. It will also give you one source of error messages with the flexibility to override the error message on each component

On the other, it involves writing a little more code on the component and extra files

But I think the pros outweigh the cons when dealing with multiple forms in different components.

Prerequisites

• Basic knowledge of Angular
• Basic knowledge of reactive forms

What we are building

Angular has two types of forms: template driven forms and reactive forms. In this post, we will focus on reactive forms.

We will learn how to validate a simple Login and Sign up form with generic validation using a reactive form. I used the Bulma CSS framework for the design.

The form input values are just console log when you click on submit. I did this so that we can focus mainly on form validation, but you can do whatever you want with the form input values.

Here is the demo link on Stackblitz.

Step 1: Setup

I have created a starter file for this project with all the HTML, CSS, and Bulma done. This allows us to focus more on the generic form validation. Clone this repo on GitHub here.

Then, in your terminal run this command:

git clone git@github.com:onwuvic/generic-reactive-form-validation.git

Or you can do this:

git clone https://github.com/onwuvic/generic-reactive-form-validation.git

cd generic-reactive-form-validation

git checkout starter

npm install

ng serve

Next, visit http://localhost:4200/ on your browser.

Open the generic-reactive-form-validation folder in any of your editors. The file structure should look like this:

file structure

Step 2: Import ReactiveFormsModule

Now, let's import ReactiveFormsModule into our app module and add it to the imports array.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './modules/login/login.component';
import { SignUpComponent } from './modules/sign-up/sign-up.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    SignUpComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Create a generic validation class and password confirmation validator

Generic validation class

Let's create a shared folder inside the root app folder. Then inside the shared folder, create a generic-validator.ts file. Write the following code:

import { FormGroup } from '@angular/forms';

// Provide all set of validation messages here
const VALIDATION_MESSAGES = {
  email: {
    required: 'Required',
    email: 'This email is invalid'
  },
  password: {
    required: 'Required',
    minlength: 'The password length must be greater than or equal to 8'
  },
  confirmPassword: {
    required: 'Required',
    match: 'Password does not match'
  },
  firstName: {
    required: 'Required'
  },
  lastName: {
    required: 'Required'
  }
};

export class GenericValidator {
  // By default the defined set of validation messages is pass but a custom message when the class is called can also be passed
  constructor(private validationMessages: { [key: string]: { [key: string]: string } } = VALIDATION_MESSAGES) {}

  // this will process each formcontrol in the form group
  // and then return the error message to display
  // the return value will be in this format `formControlName: 'error message'`;
  processMessages(container: FormGroup): { [key: string]: string } {
    const messages = {};
    // loop through all the formControls
    for (const controlKey in container.controls) {
      if (container.controls.hasOwnProperty(controlKey)) {
        // get the properties of each formControl
        const controlProperty = container.controls[controlKey];
        // If it is a FormGroup, process its child controls.
        if (controlProperty instanceof FormGroup) {
          const childMessages = this.processMessages(controlProperty);
          Object.assign(messages, childMessages);
        } else {
          // Only validate if there are validation messages for the control
          if (this.validationMessages[controlKey]) {
            messages[controlKey] = '';
            if ((controlProperty.dirty || controlProperty.touched) && controlProperty.errors) {
              // loop through the object of errors
              Object.keys(controlProperty.errors).map(messageKey => {
                if (this.validationMessages[controlKey][messageKey]) {
                  messages[controlKey] += this.validationMessages[controlKey][messageKey] + ' ';
                }
              });
            }
          }
        }
      }
    }
    return messages;
  }
}

First, we import the FormGroup. We can write all our validation messages in this file or pass each form validation message from their component.

Each property on the VALIDATION_MESSAGES object corresponds to each input field name or formControlName. Also, each property of the input field corresponds to the validation name on it. Its value is what you want to show as the error message.

For instance, the input field name formControlName "email" has validations of “required” and “email” on it.

In constructor method, we can override the default error messages from the component where our generic validation is being used by passing the validation message when we instantiate our generic validation class.

The processMessages method processes each form input field and returns the error message to display.

Password confirmation validation

Now, let’s create a password confirmation validator to check if our password and confirm password match.

Inside the shared folder, create a password-matcher.ts file. Write the following code:

import { AbstractControl } from '@angular/forms';

export class PasswordMatcher {
  static match(control: AbstractControl): void | null {
    const passwordControl = control.get('password');
    const confirmPasswordControl = control.get('confirmPassword');

    if (passwordControl.pristine || confirmPasswordControl.pristine) {
      return null;
    }

    if (passwordControl.value === confirmPasswordControl.value) {
      return null;
    }

    confirmPasswordControl.setErrors({ match: true });
  }
}

Step 4: Add FormGroup and FormBuilder to each components and templates

Sign up form component

Inside the app/modules/sign-up, add the below code to the sign-up component:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import { PasswordMatcher } from '../../shared/password-matcher';

@Component({
  selector: 'app-sign-up',
  templateUrl: './sign-up.component.html',
  styleUrls: ['./sign-up.component.scss']
})
export class SignUpComponent implements OnInit {
  signupForm: FormGroup;

  // Use with the generic validation message class
  displayMessage: { [key: string]: string } = {};

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.signupForm = this.fb.group({
      firstName: ['', [Validators.required]],
      lastName: ['', [Validators.required]],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(8)]],
      confirmPassword: ['', Validators.required]
    }, { validator: PasswordMatcher.match });
  }

  signup() {
    console.log('---form', this.signupForm.value);
  }

}

We have Angular in-built validations for each input field along with our custom PasswordMatcher validation to ensure that the password and confirmed password match.

Sign up form template

Now let's have a look at the sign up form template:

<h1 class="title is-4">Sign Up</h1>
<p class="description">Let's get started!</p>
<form (ngSubmit)="signup()" [formGroup]="signupForm" novalidate autocomplete="false">
  <div class="field">
    <div class="control">
      <input [ngClass]="{'is-danger': displayMessage.firstName}" formControlName="firstName" class="input is-medium" type="text" placeholder="First Name">
      <p *ngIf="displayMessage.firstName" class="help is-danger">
        {{ displayMessage.firstName }}
      </p>
    </div>
  </div>
  <div class="field">
    <div class="control">
      <input [ngClass]="{'is-danger': displayMessage.lastName}" formControlName="lastName" class="input is-medium" type="text" placeholder="Last Name">
      <p *ngIf="displayMessage.lastName" class="help is-danger">
        {{ displayMessage.lastName }}
      </p>
    </div>
  </div>
  <div class="field">
    <div class="control">
      <input [ngClass]="{'is-danger': displayMessage.email}" formControlName="email" class="input is-medium" type="email" placeholder="Email">
      <p *ngIf="displayMessage.email" class="help is-danger">
        {{ displayMessage.email }}
      </p>
    </div>
  </div>
  <div class="field">
    <div class="control">
      <input [ngClass]="{'is-danger': displayMessage.password || displayMessage.confirmPassword }" formControlName="password" class="input is-medium" type="password" placeholder="Password">
      <p *ngIf="displayMessage.password" class="help is-danger">
        {{ displayMessage.password }}
      </p>
    </div>
  </div>
  <div class="field">
    <div class="control">
      <input [ngClass]="{'is-danger': displayMessage.confirmPassword}" formControlName="confirmPassword" class="input is-medium" type="password" placeholder="Confirm Password">
      <p *ngIf="displayMessage.confirmPassword" class="help is-danger">
        {{ displayMessage.confirmPassword }}
      </p>
    </div>
  </div>
  <br>
  <button type="submit" class="button is-block is-primary is-fullwidth is-medium" [disabled]="signupForm.invalid">Submit</button>
  <br>
  <small class="has-text-centered">
    <em>
      Already have an account
      <a [routerLink]="['']" class="primary-color">Login</a>
    </em>
  </small>

</form>

<form (ngSubmit)="signup()" [formGroup]="signupForm" novalidate autocomplete="false">

We added our ngSubmit and formGroup to the form tag.

<input [ngClass]="{'is-danger': displayMessage.firstName}" formControlName="firstName" class="input is-medium" type="text" placeholder="First Name">

We also added formControlName to each input field. If the display message has a firstName error message it will apply the ngClass is-danger to the input field.

<p *ngIf="displayMessage.firstName" class="help is-danger">
  {{ displayMessage.firstName }}
</p>

This displays our error message.

<button type="submit" class="button is-block is-primary is-fullwidth is-medium" [disabled]="signupForm.invalid">Submit</button>

We disable the submit button if the form is not valid.

Login form component

Inside the app/modules/login, add the below code to the login component:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit, AfterViewInit {
  loginForm: FormGroup;

  // Use with the generic validation message class
  displayMessage: { [key: string]: string } = {};
  private validationMessages: { [key: string]: { [key: string]: string } };

  constructor(private fb: FormBuilder) {
    // Defines all of the validation messages for the form.
    this.validationMessages = {
      email: {
        required: 'Required',
        email: 'This email is invalid'
      },
      password: {
        required: 'Required',
        minlength: 'The password length must be greater than or equal to 8'
      }
    };
  }

  ngOnInit() {
    this.loginForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(8)]],
    });
  }

  login() {
    console.log('---form', this.loginForm.value);
  }

}

The only difference here with the sign up component is that we will be overriding the default error message in our generic validation class with the validation message.

Login form template

Write the following code in the login template:

<h1 class="title is-4">Login</h1>
<p class="description">Welcome back!</p>
<form (ngSubmit)="login()" [formGroup]="loginForm" novalidate autocomplete="false">
  <div class="field">
    <div class="control">
      <input [ngClass]="{'is-danger': displayMessage.email}" class="input is-medium" type="email" placeholder="Email" formControlName="email">
      <p *ngIf="displayMessage.email" class="help is-danger">
        {{ displayMessage.email }}
      </p>
    </div>
  </div>
  <div class="field">
    <div class="control">
      <input [ngClass]="{'is-danger': displayMessage.password}" class="input is-medium" type="password" placeholder="Password" formControlName="password">
      <p *ngIf="displayMessage.password" class="help is-danger">
        {{ displayMessage.password }}
      </p>
    </div>
  </div>
  <button type="submit" class="button is-block is-primary is-fullwidth is-medium" [disabled]="loginForm.invalid">Login</button>
  <br>
  <small class="has-text-centered">
    <em>
      Don't have an account
      <a [routerLink]="['signup']" class="primary-color">Sign Up</a>
    </em>
  </small>
</form>

Step 5: Use Generic Validation in each component

Generic validation on Sign up

Add the following code to the sign-up.component.ts file:

import { Component, OnInit, ViewChildren, ElementRef, AfterViewInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControlName, AbstractControl } from '@angular/forms';
import { Observable, fromEvent, merge } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { GenericValidator } from '../../shared/generic-validator';
import { PasswordMatcher } from '../../shared/password-matcher';

@Component({
  selector: 'app-sign-up',
  templateUrl: './sign-up.component.html',
  styleUrls: ['./sign-up.component.scss']
})
export class SignUpComponent implements OnInit, AfterViewInit {
  // Access every form input fields in our signup html file
  @ViewChildren(FormControlName, { read: ElementRef }) formInputElements: ElementRef[];
  signupForm: FormGroup;

  // Use with the generic validation message class
  displayMessage: { [key: string]: string } = {};
  private genericValidator: GenericValidator;

  constructor(private fb: FormBuilder) {
    // Define an instance of the validator for use with this form,
    this.genericValidator = new GenericValidator();
  }

  ngOnInit() {
    this.signupForm = this.fb.group({
      firstName: ['', [Validators.required]],
      lastName: ['', [Validators.required]],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(8)]],
      confirmPassword: ['', Validators.required]
    }, { validator: PasswordMatcher.match });
  }

  ngAfterViewInit(): void {
    // Watch for the blur event from any input element on the form.
    const controlBlurs: Observable<any>[] = this.formInputElements
      .map((formControl: ElementRef) => fromEvent(formControl.nativeElement, 'blur'));

    // Merge the blur event observable with the valueChanges observable
    merge(this.signupForm.valueChanges, ...controlBlurs).pipe(
      debounceTime(800)
    ).subscribe(value => {
      this.displayMessage = this.genericValidator.processMessages(this.signupForm);
    });
  }

  signup() {
    console.log('---form', this.signupForm.value);
  }

}

Here we have imported the generic validation class.

@ViewChildren(FormControlName, { read: ElementRef }) formInputElements: ElementRef[];

We added the @ViewChildren to access every form input field in our signup HTML file. This helps us listen for an event on them.

private genericValidator: GenericValidator;

constructor(private fb: FormBuilder) {
   // Define an instance of the validator for use with this form
   this.genericValidator = new GenericValidator();
}

We instantiate the Generic validation inside the constructor.

Then, we implement the ngAfterViewInit interface.

ngAfterViewInit(): void {
   // Watch for the blur event from any 
   // input element on the form.
   const controlBlurs: Observable<any>[] = this.formInputElements
      .map((formControl: ElementRef) =>
         fromEvent(formControl.nativeElement, 'blur')
      );
   // Merge the blur event observable 
   // with the valueChanges observable
   merge(this.signupForm.valueChanges, ...controlBlurs)
    .pipe(debounceTime(800))
    .subscribe(value => {
      this.displayMessage = this.genericValidator
        .processMessages(this.signupForm);
   });
}

Here we watch for the blur event from any input element on the form.

const controlBlurs: Observable<any>[] = this.formInputElements
      .map((formControl: ElementRef) =>
         fromEvent(formControl.nativeElement, 'blur')
      );

merge(this.signupForm.valueChanges, ...controlBlurs)
    .pipe(debounceTime(800))
    .subscribe(value => {
      this.displayMessage = this.genericValidator
        .processMessages(this.signupForm);
   });

Now we have combined the form value changes observable (which gets triggered when any of the input values change) and the blur events of any input field into one observable.

So, when a user changes an input value or taps into any input field, this merge method gets triggered.

Then we add a delay of 800 milliseconds with debounceTime(800). This gives the user time to make changes before trigging the validation.

Finally, we get the error messages to display by calling the generic validator method.

Generic validation on Login

Write the following code to the login.component.ts file:

import { Component, OnInit, ViewChildren, ElementRef, AfterViewInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControlName } from '@angular/forms';
import { Observable, fromEvent, merge } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { GenericValidator } from '../../shared/generic-validator';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit, AfterViewInit {
  // Access every form input fields in our login html file
  @ViewChildren(FormControlName, { read: ElementRef }) formInputElements: ElementRef[];
  loginForm: FormGroup;

  // Use with the generic validation message class
  displayMessage: { [key: string]: string } = {};
  private validationMessages: { [key: string]: { [key: string]: string } };
  private genericValidator: GenericValidator;

  constructor(private fb: FormBuilder) {
    // Defines all of the validation messages for the form.
    this.validationMessages = {
      email: {
        required: 'Required',
        email: 'This email is invalid'
      },
      password: {
        required: 'Required',
        minlength: 'The password length must be greater than or equal to 8'
      }
    };
    // Define an instance of the validator for use with this form,
    // passing in this form's set of validation messages.
    this.genericValidator = new GenericValidator(this.validationMessages);
  }

  ngOnInit() {
    this.loginForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(8)]],
    });
  }

  ngAfterViewInit(): void {
    // Watch for the blur event from any input element on the form.
    const controlBlurs: Observable<any>[] = this.formInputElements
      .map((formControl: ElementRef) => fromEvent(formControl.nativeElement, 'blur'));

    // Merge the blur event observable with the valueChanges observable
    merge(this.loginForm.valueChanges, ...controlBlurs).pipe(
      debounceTime(800)
    ).subscribe(value => {
      this.displayMessage = this.genericValidator.processMessages(this.loginForm);
    });
  }

  login() {
    console.log('---form', this.loginForm.value);
  }

}

The only difference here from the sign up code is that we are overriding our default validation messages with our new validation Messages specified in this component. Then we're passing it into the generic validation class when we instantiate it.

  constructor(private fb: FormBuilder) {
    // Defines all of the validation messages for the form.
    this.validationMessages = {
      email: {
        required: 'Required',
        email: 'This email is invalid'
      },
      password: {
        required: 'Required',
        minlength: 'The password length must be greater than or equal to 8'
      }
    };
    // Define an instance of the validator for use with this form,
    // passing in this form's set of validation messages.
    this.genericValidator = new GenericValidator(this.validationMessages);
  }

We can expected this to work the same way as the sign up generic validation.

And that's all you need to build a generic validator in Angular.

Conclusion

Creating a generic validator makes it easy to handle multiple form validations without using a ton of redundant code in your Angular application.

I hope this article was useful to you!

You can connect with me on LinkedIn and Twitter.

If the information was incorrect or missing, the server would have to send everything back with a message telling the person to correct the form before submitting it again.

This was a lengthy process and would put a lot of the burden on the server.

These days, JavaScript provides a number of ways to validate a form's data right in the browser before sending it to the server.

Here's the HTML code we'll use in the following examples:

<html>
<head>
  <title>Form Validation</title>
  <script type="text/javascript">
    // Form validation will go here
  </script>
</head>
<body>
  <form id="form">
    <table cellspacing="2" cellpadding="2" border="1">
      <tr>
        <td align="right">Username</td>
        <td><input type="text" id="username" /></td>
      </tr>
      <tr>
        <td align="right">Email Address</td>
        <td><input type="text" id="email-address" /></td>
      </tr>
      <tr>
        <td></td>
        <td><input type="submit" value="Submit" id="submit-btn" /></td>
      </tr>
    </table>
  </form>
</body>
</html>

Basic Validation

This type of validation involves checking all the mandatory fields and making sure they're properly filled in.

Here's a basic example of a function validate that shows an alert if the username and email address inputs are blank, otherwise it returns true:

const submitBtn = document.getElementById('submit-btn');

const validate = (e) => {
  e.preventDefault();
  const username = document.getElementById('username');
  const emailAddress = document.getElementById('email-address');
  if (username.value === "") {
    alert("Please enter your username.");
    username.focus();
    return false;
  }
  if (emailAddress.value === "") {
    alert("Please enter your email address.");
    emailAddress.focus();
    return false;
  }

  return true;
}

submitBtn.addEventListener('click', validate);

But what if someone enters in random text as their email address? Currently the validate function will still return true. As you can imagine, sending bad data to the server can lead to problems.

That's where data format validation comes in.

Data Format Validation

This type of validation actually looks at the values in the form and verifies that they are correct.

Validating email addresses is notoriously difficult – there are a vast number of legitimate email addresses and hosts, and it's impossible to guess all the valid combinations of characters.

That said, there are a few key factors that are common in all valid email addresses:

• An address must contain one @ and at least one dot (.) character
• The @ character cannot be the first character in the address
• The . must come at least one character after the @ character

With this in mind, maybe developers use regex to determine if an email address is valid or not. Here's a function that Tyler McGinnis recommends on his blog:

const emailIsValid = email => {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

emailIsValid('free@code@camp.org') // false
emailIsValid('quincy@freecodecamp.org') // true

Added to the code from the last example, it will look like this:

const submitBtn = document.getElementById('submit-btn');

const validate = (e) => {
  e.preventDefault();
  const username = document.getElementById('username');
  const emailAddress = document.getElementById('email-address');
  if (username.value === "") {
    alert("Please enter your username.");
    username.focus();
    return false;
  }

  if (emailAddress.value === "") {
    alert("Please enter your email address.");
    emailAddress.focus();
    return false;
  }

  if (!emailIsValid(emailAddress.value)) {
    alert("Please enter a valid email address.");
    emailAddress.focus();
    return false;
  }

  return true; // Can submit the form data to the server
}

const emailIsValid = email => {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

submitBtn.addEventListener('click', validate);

HTML5 Form Constraints

Some of commonly used HTML5 constraints for <input> are the type attribute (e.g. type="password"), maxlength, required and disabled.

A less commonly used constraint is the pattern attribute that takes a JavaScript regular expression.

More Information

• Form Data Validation | MDN
• Constraint validation | MDN

Introduction

In this article, we will learn about validations in Angular template-driven forms. We will create a simple user registration form and implement some inbuilt validations on it. Along with the inbuilt validations, we will also implement some custom validations for the template-driven form.

We will consider the following custom validations for this demo:

• Checking for user name availability
• Password pattern validation
• Matching the password entered in two different fields

Take a look at the application in action.

Prerequisites

• Install Visual Studio code from here
• Install the latest version of Angular CLI from here
• Install the latest LTS version of Node.js from here

Source Code

You can get the source code from GitHub.

Create the Angular app

Navigate to the folder where you want to create your project file. Open a command window and run the command shown below:

ng new angular-forms-validation --routing=false --style=scss

We are specifying the command to create a new Angular application. The option to create the routing module is set to false and style files extension is set to SCSS. This command will create the Angular project with the name angular-forms-validation.

Change directories to the new project and open the project in VS Code using the set of commands below:

cd angular-forms-validation
code .

Install Bootstrap

Run the following command to install Bootstrap:

npm install bootstrap --save

Add the following import definition in the styles.scss file:

@import "~bootstrap/dist/css/bootstrap.css";

Create the validation service

Run the following command to create a new service:

ng g s services\customvalidation

This command will create a folder named services that has two files inside it – customvalidation.service.ts and customvalidation.service.spec.ts. Open customvalidation.service.ts and put the following code inside it:

import { Injectable } from '@angular/core';
import { ValidatorFn, AbstractControl } from '@angular/forms';
import { FormGroup } from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class CustomvalidationService {

  patternValidator(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
      if (!control.value) {
        return null;
      }
      const regex = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$');
      const valid = regex.test(control.value);
      return valid ? null : { invalidPassword: true };
    };
  }

  MatchPassword(password: string, confirmPassword: string) {
    return (formGroup: FormGroup) => {
      const passwordControl = formGroup.controls[password];
      const confirmPasswordControl = formGroup.controls[confirmPassword];

      if (!passwordControl || !confirmPasswordControl) {
        return null;
      }

      if (confirmPasswordControl.errors && !confirmPasswordControl.errors.passwordMismatch) {
        return null;
      }

      if (passwordControl.value !== confirmPasswordControl.value) {
        confirmPasswordControl.setErrors({ passwordMismatch: true });
      } else {
        confirmPasswordControl.setErrors(null);
      }
    }
  }

  userNameValidator(userControl: AbstractControl) {
    return new Promise(resolve => {
      setTimeout(() => {
        if (this.validateUserName(userControl.value)) {
          resolve({ userNameNotAvailable: true });
        } else {
          resolve(null);
        }
      }, 1000);
    });
  }

  validateUserName(userName: string) {
    const UserList = ['ankit', 'admin', 'user', 'superuser'];
    return (UserList.indexOf(userName) > -1);
  }
}

The method patternValidator is used to validate the password pattern in our form. The parameter for this method is of type AbstractControl which is a base class for the FormControl.

We will use a regular expression to validate the password. This regular expression will check for the following four conditions in the password:

• The password should be a minimum of eight characters long
• It should have at least one lower case letter
• It should have at least one upper case letter
• It should have at least one number

If the password fails the regex check, we will set the invalidPassword property to true.

The method MatchPassword is used to compare the passwords in two fields. This method will accept two parameters of type string. These parameters represent the name of the fields to be matched. We will get the FormControl for these two fields and then match the values in them. If the values do not match, we will set the passwordMismatch property to true.

The method userNameValidator is used to verify if the username is already taken or not. This method will accept a parameter of type AbstractControl.

We will check if the value of this field is present in a static array, UserList. If the value entered by the user is already present, we will set the userNameNotAvailable property to true.

We are using the setTimeout function to invoke this check every two seconds. This will ensure that the error will be thrown after two seconds from the time the user stops typing in the field.

For the sake of simplicity of this article, we are using a static array to search for the availability of user names. Ideally, it should be a service call to the server to search for the value in a database.

Create the User model

Create a new folder called models inside the src/app folder. Add a new file called user.ts inside the models folder. Put the following code in the user.ts file.

export class User {
    public name: string;
    public email: string;
    public username: string;
    public password: string;
    public confirmPassword: string;
}

Create custom directives

We will create custom directives to implement custom validators for template-driven forms.

Run the command shown below to create the passwordPattern directive:

ng g d directives\passwordPattern

This command will create a folder named directives that has two files inside it – passwordPattern.directive.ts and passwordPattern.directive.spec.ts. Open passwordPattern.directive.ts and put the following code inside it.

import { Directive } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';
import { CustomvalidationService } from '../services/customvalidation.service';

@Directive({
  selector: '[appPasswordPattern]',
  providers: [{ provide: NG_VALIDATORS, useExisting: PasswordPatternDirective, multi: true }]
})
export class PasswordPatternDirective implements Validator {

  constructor(private customValidator: CustomvalidationService) { }

  validate(control: AbstractControl): { [key: string]: any } | null {
    return this.customValidator.patternValidator()(control);
  }
}

This directive is used to validate the password pattern. We will implement the Validator interface on the class PasswordPatternDirective. We will override the validate method which accepts a parameter of type AbstractControl, that is the control we want to validate. We will then invoke the patternValidator method from the service.

Run the command shown below to create the matchPassword directive:

ng g d directives\matchPassword

Open matchPassword.directive.ts and put the following code inside it:

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, ValidationErrors, FormGroup } from '@angular/forms';
import { CustomvalidationService } from '../services/customvalidation.service';

@Directive({
  selector: '[appMatchPassword]',
  providers: [{ provide: NG_VALIDATORS, useExisting: MatchPasswordDirective, multi: true }]
})
export class MatchPasswordDirective implements Validator {
  @Input('appMatchPassword') MatchPassword: string[] = [];

  constructor(private customValidator: CustomvalidationService) { }

  validate(formGroup: FormGroup): ValidationErrors {
    return this.customValidator.MatchPassword(this.MatchPassword[0], this.MatchPassword[1])(formGroup);
  }
}

This directive is used to validate if the passwords entered in two fields are matching or not. This directive will accept an input of the type string array, which contains the fields to match. We will override the validate method and pass the parameter of type FormGroup. We will then invoke the MatchPassword method from the service.

Run the command shown below to create the validateUserName directive:

ng g d directives\validateUserName

Open validateUserName.directive.ts and put the following code inside it:

import { Directive, forwardRef } from '@angular/core';
import { Validator, AbstractControl, NG_ASYNC_VALIDATORS } from '@angular/forms';
import { CustomvalidationService } from '../services/customvalidation.service';
import { Observable } from 'rxjs';

@Directive({
  selector: '[appValidateUserName]',
  providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => ValidateUserNameDirective), multi: true }]

})
export class ValidateUserNameDirective implements Validator {

  constructor(private customValidator: CustomvalidationService) { }

  validate(control: AbstractControl): Promise<{ [key: string]: any }> | Observable<{ [key: string]: any }> {
    return this.customValidator.userNameValidator(control);
  }
}