Advanced form validation with Angular and Joi

As web developers, a lot of our work is about gathering information and data from our users. In an ideal world we could let users input data anyway they like and somehow parse or extract the useful and relevant information from that data, but in reality that is not often the case. Many times, the data users input is complex and require us to make sure that it meets some kind of specification.

Over the last couple of years I’ve been working quite a bit with validating user input in Angular applications. For that purpose, I’ve been using the validation library Joi in its various versions. Joi is a powerful library and since it’s javascript, it can be run both in the front end and back end. That is a great benefit! If you are not running a javascript back end, it is still a great tool for front end validation.

If you are using template driven forms in Angular, you can use the Joi validation to, for instance, run the ngModel through the Joi validation engine after the form was submitted, and then informing the user if the input did not pass validation. But that makes for a poor user experience. And hooking up events to monitor user input, run input through validation, adding and removing classes to highlight errors is tedious work. However, using reactive forms, which has built in support for validation, this becomes a lot easier.

While researching how to use reactive forms together with Joi, I found this article that helped a lot: Advanced validation with Angular and Joi. But it is now a few years old, and it does not address how to validate a whole form with one Joi schema. This is what I aim to show in this article.

What you will learn

• Creating reusable specifications for user input
• Using the spec to ensure a form contains correct data before submission
• Visualizing the errors to the user
• Customizing error messages
• Cross field validation: if one field has X value, another field must be Y
• Validating forms with variable number of inputs (dynamic forms)

What you will not learn

• Designing great forms
• Translating error messages
• Managing browser differences in form rendering

Prerequisites

The setup here is based on angular v9.1.4 and node v12.16.3 (LTS), which are the latest at the time of writing. To make use of this article, you’ll need to be able to use npm, node and ng commands in a terminal of some kind. Also, I’ve only tested the CSS in Chrome, and it may not look the same in another browser.

Note on the images in this article

To visualize the validation I use animated gif images. It has come to my attention that sometimes these images do not load correctly, displaying instead as some kind of unsharp blob. If that happens to you, please try right clicking the image and opening it in a separate tab. I’ve seen this happening on other articles on Medium as well.

Basic setup

Create an Angular app like this:

ng new joi-validation
[some work takes place]
cd joi-validation

Now import the ReactiveFormsModule into your app.module (or other module if you are an advanced user and need to do that)

// app.module, some things removed for brevity
	import { ReactiveFormsModule } from '@angular/forms';
	@NgModule({
	  imports: [
	    ReactiveFormsModule // <-- Import here
	  ]
	})

Next, it’s time to set up a form that we want to validate. Let’s create a “report incident” form, in which a user can report an incident on a construction site or similar. We can create the form directly in app.component.ts for simplicity. To minimize the code to write, we’ll use the FormBuilder service to build the FormGroup and its controls. This is an approach I recommend.

Here is a gist of all three files, obviously you’d not put all code in one file in a real project.

// app.component.ts

	import { Component } from '@angular/core';
	import { FormBuilder } from '@angular/forms';

	@Component({
	  selector: 'app-root',
	  templateUrl: './app.component.html',
	  styleUrls: ['./app.component.scss']
	})
	export class AppComponent {
	  title = 'joi-validation';
	  types = ['Lethal', 'Major', 'Minor'];

	  incidentForm = this.fb.group({
	    type: [this.types[2]],
	    title: [''],
	    description: [''],
	    siteId: ['']
	  });

	  constructor(private fb: FormBuilder) {
	  }
	}

	// app.component.html

	<div class="wrapper">
	  <h1>
	    Report an incident
	  </h1>
	  <form [formGroup]="incidentForm">
	    <label>Type
	      <select formControlName="type">
	        <option *ngFor="let option of types" [ngValue]="option">{{ option }} </option>
	      </select>
	    </label>

	    <label>Title
	      <input type="text" formControlName="title"/>
	    </label>

	    <label>Description
	      <input type="text" formControlName="description"/>
	    </label>

	    <label>Site ID
	      <input type="text" formControlName="siteId"/>
	    </label>

	    <button type="submit" [disabled]="!incidentForm.valid">Send report</button>
	  </form>
	</div>

	// app.component.scss

	:host {
	  font-family: sans-serif;
	  font-size: 16px;
	}
	input, select {
	  display: block;
	  width: 100%;
	  margin-top: 0.25rem;
	  margin-bottom: 1rem;
	}

	input[type="text"] {
	  padding: 0.25rem;
	}

	.wrapper {
	  margin: 0 auto;
	  width: 25vw;
	}

	button {
	  display: block;
	  margin: 0 auto;
	  font-size: 1rem;
	  padding: 0.5rem 0.75rem;
	  background-color: green;
	  color: white;
	  border: 0;
	}

A basic form is set up

Adding Joi

Right now there is no validation on the form. Let’s change that.

npm install @hapi/joi -s

Now we’ve installed Joi and are prepared to use it to create a schema which we’ll use to validate the input in the form.

// app.component.ts

	import * as Joi from '@hapi/joi';

	// add a schema
	incidentSchema = Joi.object({
	    type: Joi.any().valid('Lethal', 'Major', 'Minor'),
	    title: Joi.string().required().min(5).max(32),
	    description: Joi.string().required().min(20),
	    siteId: Joi.string().pattern(/^[a-zA-Z]{2}[0-9]{1,3}$/)
	});

In a real project, it is more likely that the schemas we use are located in a separate repository or package and shared within the team or organisation. But in this case, we’ll just create the schema in the app.component.

While we’ve not used the schema to validate the form, we can test the schema like this:

 constructor(private fb: FormBuilder) {
	    this.incidentForm.valueChanges.subscribe((values) => {
	      let result = this.incidentSchema.validate(values);
	      console.log('Errors: ', result.error );
	    })
	  }

Subscribing to changes in the form and running the form into the schema for validation

As you start editing the form, you’ll see that the console fills up with error messages:

You can also see that validation returns early: as soon as a value does not pass validation, the validation stops and returns the first error. This is the default behavior in Joi, but can be changed when validating by passing an options object to the validate function:

schema.validate(values, { abortEarly: false })

#joi #programming #ux #validation #angular

What is GEEK

Buddha Community

Laravel 8 Form Validation Tutorial

Laravel 8 form validation example. In this tutorial, i will show you how to submit form with validation in laravel 8.

And you will learn how to store form data in laravel 8. Also validate form data before store to db.

How to Validate Form Data in Laravel 8

1. Step 1 – Install Laravel 8 Application
2. Step 2 – Configuring Database using Env File
3. Step 3 – Create Model & Migration File For Form
4. Step 4 – Create Routes
5. Step 5 – Creating Controller
6. Step 6 – Create Blade File For Form
7. Step 7 – Start Development Server
8. Step 8 – Run Laravel 8 Form Validation App On Browser

https://laratutorials.com/laravel-8-form-validation-example-tutorial/

#laravel 8 form validation #laravel 8 form validation tutorial #laravel 8 form validation - google search #how to validate form data in laravel 8 #form validation in laravel 8

Angular 11 Reactive Forms Validation Tutorial

Reactive form validation in Angular 11 app. In this tutorial, i will show you how to use reactive form validation in angular 11 app.

As well as, and you will learn how use reactive form validation in angular 11. And also use reactive form with formGroup for validation in angular 11 app.

Reactive Form Validation In Angular 11
Step 1 – Create New Angular App
Step 2 – Import Form Module
Step 3 – Add Code on View File
Step 4 – Use Component ts File
Step 5 – Start Angular App

https://www.tutsmake.com/angular-11-reactive-forms-validation-tutorial-example/

#reactive form validation in angular 11 #angular 11/10/9/8/7 reactive forms validation example #angular 11 form validation example

Laravel 8 Form Validation Example

In this tutorial we will see laravel 8 form validation example, form validation in laravel is very common functionalities and it is use in each and every website to validate form field.

Here, We will use has function in session to check error message in laravel 8. using this example you can check simple form validation as well as you can create your own custom validation in laravel 8.

Laravel 8 Form Validation Example

https://websolutionstuff.com/post/laravel-8-form-validation-example

---

Read Also : Laravel 8 CRUD Operation Example

https://websolutionstuff.com/post/laravel-8-crud-operation-example

#laravel 8 form validation example #form validation #how to validate form in laravel 8 #form validation in laravel #laravel #laravel8

Advanced form validation with Angular and Joi

As web developers, a lot of our work is about gathering information and data from our users. In an ideal world we could let users input data anyway they like and somehow parse or extract the useful and relevant information from that data, but in reality that is not often the case. Many times, the data users input is complex and require us to make sure that it meets some kind of specification.

Over the last couple of years I’ve been working quite a bit with validating user input in Angular applications. For that purpose, I’ve been using the validation library Joi in its various versions. Joi is a powerful library and since it’s javascript, it can be run both in the front end and back end. That is a great benefit! If you are not running a javascript back end, it is still a great tool for front end validation.

If you are using template driven forms in Angular, you can use the Joi validation to, for instance, run the ngModel through the Joi validation engine after the form was submitted, and then informing the user if the input did not pass validation. But that makes for a poor user experience. And hooking up events to monitor user input, run input through validation, adding and removing classes to highlight errors is tedious work. However, using reactive forms, which has built in support for validation, this becomes a lot easier.

While researching how to use reactive forms together with Joi, I found this article that helped a lot: Advanced validation with Angular and Joi. But it is now a few years old, and it does not address how to validate a whole form with one Joi schema. This is what I aim to show in this article.

What you will learn

• Creating reusable specifications for user input
• Using the spec to ensure a form contains correct data before submission
• Visualizing the errors to the user
• Customizing error messages
• Cross field validation: if one field has X value, another field must be Y
• Validating forms with variable number of inputs (dynamic forms)

What you will not learn

• Designing great forms
• Translating error messages
• Managing browser differences in form rendering

Prerequisites

The setup here is based on angular v9.1.4 and node v12.16.3 (LTS), which are the latest at the time of writing. To make use of this article, you’ll need to be able to use npm, node and ng commands in a terminal of some kind. Also, I’ve only tested the CSS in Chrome, and it may not look the same in another browser.

Note on the images in this article

To visualize the validation I use animated gif images. It has come to my attention that sometimes these images do not load correctly, displaying instead as some kind of unsharp blob. If that happens to you, please try right clicking the image and opening it in a separate tab. I’ve seen this happening on other articles on Medium as well.

Basic setup

Create an Angular app like this:

ng new joi-validation
[some work takes place]
cd joi-validation

Now import the ReactiveFormsModule into your app.module (or other module if you are an advanced user and need to do that)

// app.module, some things removed for brevity
	import { ReactiveFormsModule } from '@angular/forms';
	@NgModule({
	  imports: [
	    ReactiveFormsModule // <-- Import here
	  ]
	})

Next, it’s time to set up a form that we want to validate. Let’s create a “report incident” form, in which a user can report an incident on a construction site or similar. We can create the form directly in app.component.ts for simplicity. To minimize the code to write, we’ll use the FormBuilder service to build the FormGroup and its controls. This is an approach I recommend.

Here is a gist of all three files, obviously you’d not put all code in one file in a real project.

// app.component.ts

	import { Component } from '@angular/core';
	import { FormBuilder } from '@angular/forms';

	@Component({
	  selector: 'app-root',
	  templateUrl: './app.component.html',
	  styleUrls: ['./app.component.scss']
	})
	export class AppComponent {
	  title = 'joi-validation';
	  types = ['Lethal', 'Major', 'Minor'];

	  incidentForm = this.fb.group({
	    type: [this.types[2]],
	    title: [''],
	    description: [''],
	    siteId: ['']
	  });

	  constructor(private fb: FormBuilder) {
	  }
	}

	// app.component.html

	<div class="wrapper">
	  <h1>
	    Report an incident
	  </h1>
	  <form [formGroup]="incidentForm">
	    <label>Type
	      <select formControlName="type">
	        <option *ngFor="let option of types" [ngValue]="option">{{ option }} </option>
	      </select>
	    </label>

	    <label>Title
	      <input type="text" formControlName="title"/>
	    </label>

	    <label>Description
	      <input type="text" formControlName="description"/>
	    </label>

	    <label>Site ID
	      <input type="text" formControlName="siteId"/>
	    </label>

	    <button type="submit" [disabled]="!incidentForm.valid">Send report</button>
	  </form>
	</div>

	// app.component.scss

	:host {
	  font-family: sans-serif;
	  font-size: 16px;
	}
	input, select {
	  display: block;
	  width: 100%;
	  margin-top: 0.25rem;
	  margin-bottom: 1rem;
	}

	input[type="text"] {
	  padding: 0.25rem;
	}

	.wrapper {
	  margin: 0 auto;
	  width: 25vw;
	}

	button {
	  display: block;
	  margin: 0 auto;
	  font-size: 1rem;
	  padding: 0.5rem 0.75rem;
	  background-color: green;
	  color: white;
	  border: 0;
	}

A basic form is set up

Adding Joi

Right now there is no validation on the form. Let’s change that.

npm install @hapi/joi -s

Now we’ve installed Joi and are prepared to use it to create a schema which we’ll use to validate the input in the form.

// app.component.ts

	import * as Joi from '@hapi/joi';

	// add a schema
	incidentSchema = Joi.object({
	    type: Joi.any().valid('Lethal', 'Major', 'Minor'),
	    title: Joi.string().required().min(5).max(32),
	    description: Joi.string().required().min(20),
	    siteId: Joi.string().pattern(/^[a-zA-Z]{2}[0-9]{1,3}$/)
	});

In a real project, it is more likely that the schemas we use are located in a separate repository or package and shared within the team or organisation. But in this case, we’ll just create the schema in the app.component.

While we’ve not used the schema to validate the form, we can test the schema like this:

 constructor(private fb: FormBuilder) {
	    this.incidentForm.valueChanges.subscribe((values) => {
	      let result = this.incidentSchema.validate(values);
	      console.log('Errors: ', result.error );
	    })
	  }

Subscribing to changes in the form and running the form into the schema for validation

As you start editing the form, you’ll see that the console fills up with error messages:

You can also see that validation returns early: as soon as a value does not pass validation, the validation stops and returns the first error. This is the default behavior in Joi, but can be changed when validating by passing an options object to the validate function:

schema.validate(values, { abortEarly: false })

#joi #programming #ux #validation #angular

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

1. Installing Node.js and npm
2. Installing Angular CLI
3. Creating workspace
4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

• Node.js
• npm Package Manager

Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

1. npm -v

Installing Angular CLI

• Open Terminal/Command Prompt
• To install Angular CLI, run the below command:

1. npm install -g @angular/cli

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

• Using CLI
• Using Visual Studio Code

1. Using CLI

To create a workspace:

• Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
• Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:

1. Ng new YourAppName

• After running this command, it will prompt you to select from various options about the CSS and other functionalities.

• To leave everything to default, simply press the Enter or the Return key.

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli