HTML form validation using Cypress
Tags: cypress, typescript, html, formvalidation
Published: 2023-07-03 02:20:47

This blog post will discuss what is HTML5 form validation is, and give a sneak peek as to how Cypress can be used to automate the same.

Before we dive into how to handle html form validation using cypress, let us understand what is HTML form validation.

HTML5 supports client side form validation, which means the information entered by the user gets validated in the client side without being sent to server.
Below is the sample html inbuilt form validation 

```
<form action="/action_page.php" method="post">
    <div>   
        <label for="fname">FirstName</label>
        <input id="fname" type="text" name="fname" required placeholder="First Name"/>
    </div>

    <div>   
        <label for="lname">LastName</label>
        <input id="lname" type="text" name="lname" required placeholder="Last Name"/>
    </div>

    <div>   
        <label for="email">Email</label>
        <input id="email" type="email" name="email" required placeholder="Email"/>
    </div>
    <div>
        <input type="submit" value="Submit">
    </div>
```

![Sample HTML form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dupucpvpgfcy01gq8gir.png)

Now let us see how we can handle the above scenario using Cypress. 

>The inbuilt html validation errors are shown by the browsers and are not part of the DOM. There for we cannot check them from Cypress. We can make use of CSS pseudo-class defined by html standards for finding invalid and valid input fields

### Check Number of fields which are invalid
When user submits the form without filling any of the input fields or by keeping them blank. Since all 3 fields are marked as required in the above example, the invalid field count should be 3. Let us check that using Cypress. 

```
it('Verify html form validation', () => {
    cy.get('input[type="submit"]').click();
    cy.get('input:invalid').should('have.length', 3);
  })
```
![Validating the number of fields having the invalid pseudo-class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctl7rrdcojxnjq5nr9nc.png)

All 3 input fields has a pseudo-class _:invalid_

### How to Check Validation Messages
In case of validation error each element will have a property called _validationMessage_. Let's make use of that to validate the error messages.

This time lets fill some data into the fields

```
it('Verify html form validation', () => {

    //Enter valid format into the first name last name and invalid email format
    cy.get('#fname').type(123)
    cy.get('#lname').type('%^&^');
    cy.get('#email').type('test@');

    //Click on submit and check the number of invalid fields
    cy.get('input[type="submit"]').click();
    cy.get('input:invalid').should('have.length', 1);

    //Validate the error messages using validationMessage property   
    cy.get('#email').invoke('prop', 'validationMessage')
        .should('equal', "Please enter a part following '@'. 'test@' is incomplete.");
  })
```


![Validating the error message using validateMessage property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxadxza7ykvpip3318x9.png)


And that's it. As you can see, it is pretty simple to automate html form-validation with Cypress. Hopefully this guide helped you get on the right track with writing tests for your website. Make sure to follow Cypress @cypress_io and check out their list of courses at [Cypress Learn](https://learn.cypress.io/) for more tutorials and guides like this one!