formfusion NPM Version
LearnBlogPlayground

Client Side Validation Using FormFusion

[object Object]
Sara MitevskaMay 9th, 2024
•May 9th, 2024• 3 minutes read
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1hfdhLqxufQgbUyaugh95z0CcwBi4-lgmyHQnefzYYfFRbJcjRtubZq6hH8V5CzEo9RC2_mVivzv_FrMoWfBluww3h_uv7wfdDzkW6IyDAQW0PCyK73mVTK0eCjS4SXASuXnrq-TVTke9xey_jAeroWqxYKmGssIyfgMJe3sYgRYRfOOpHbVe5zQ5wvEs/w640-h426/343948af-e77d-4f26-82dc-8baae843f97a.webp
client side validation

Client-side validation is a fundamental aspect of web development, vital for delivering user-friendly interfaces and reinforcing the security of online platforms. It involves performing validation checks on the user’s device when filling out forms before sending the data to the server.

Why is it important?

1. It provides instant feedback, making the user’s experience smoother and less error-prone.

2. Reduces server load by minimising unnecessary server requests for invalid data.

3. Enhances security by limiting what the user can input, thereby preventing malicious attacks like SQL injection or cross-site scripting. 

Validation types

There are two different types of client-side validation that can be found on the web:

1. Built-in form validation: It uses HTML form validation features, requiring minimal Javascript. This results in better performance than JavaScript validation, although it is less customisable.

2. JavaScript validation: Coded using JavaScript, it offers complete customisation. However, it requires creating everything and may be less performant than built-in validation.

This is where FormFusion comes into play. It leverages everything built-in form validation offers plus extends the list of available validation attributes that can be used. It offers 500+ validation types.

How to use FormFusion for form validation

Integrating FormFusion is straightforward. It offers already built components that are optimised with integrated validation logic, error handling and fully customisable look.

The FormFusion's Input component builds upon the native HTML input element and enhances it with an expanded range of field types, each associated with a specific validation pattern. You can specify the field type by using the 'type' property.

For example, let's say we need a form with one input field that should accept only alphabetic characters. Unlike other libraries where you will need to write a javascript function or a regex to achieve that, with FormFusion you only use the already provided and thoroughly tested field type 'alphabetic'. Here is how it looks: 
  <Form onSubmit={onSubmit} className="form">
    <Input name="name" type="alphabetic" />
    <button type="submit">Submit</button>
  </Form>

Now when the user enters characters in the input field that are not letters, they get the following message:

form validation

This is the default look of FormFusion's form and input components since it is primarily unstyled library. To apply style to the form or input components you can use the same approach as with any html/jsx element, using the className property.


Additionally, for the input component you can also pass a classes property to style the field, label and error elements directly: 

  <Form onSubmit={onSubmit} className="form">
    <Input name="username"
      type="alphabetic"
      label="Username"
      classes={{
        field: 'input-field',
        label: 'input-field__label',
        error: 'input-field__error-message'
      }}
     />
    <button type="submit">Submit</button>
  </Form>
Here is how it looks:

alphabetic field validation

Next, let's say we don't like this default error message from FormFusion and we want to customise it. To do that, we can use the validation property and add our own custom message: 
  <Form onSubmit={onSubmit} className="form">
    <Input name="username"
      type="alphabetic"
      label="Username"
      classes={{
        field: 'input-field',
        label: 'input-field__label',
        error: 'input-field__error-message'
      }}
      validation={{
        patternMismatch: 'Please use letters only. Thank you!'
      }}
     />
    <button type="submit">Submit</button>
  </Form>
Here it is, our customised error message:

custom error message

FormFusion allows customising the error messages or all validity states an input element can be in.
You can read more about this as well as see all available validation field types in FormFusion's documentation page.

You can view and download the full code of this example on Github 

It’s important to note that client-side validation should not be viewed as a replacement for server-side validation. Server-side validation is also crucial and should always be used along with client-side validation since the network request can still be altered.