Add example of checking native HTML5 form validation message

[jennifer-shehane]

I'm submitting a...

[ ] Bug report
[x] Content update
[ ] Process update (build, deployment, ... )

Type of bug / changes

Add an example of how to check that a form's HTML form validation is shown when an input is invalid.

Maybe this should go in common assertions? https://docs.cypress.io/guides/references/assertions.html#Common-Assertions

Or our FAQ? I'm not sure.

it('check validation message on invalid input', () => {
  cy.get('input:invalid').should('have.length', 0)
  cy.get('[type="email"]').type('not_an_email')
  cy.get('[type="submit"]').click()
  cy.get('input:invalid').should('have.length', 1)
  cy.get('[type="email"]').then(($input) => {
    expect($input[0].validationMessage).to.eq('I expect an email!')
  })
})

[ryanpedersen42]

Feeling like this might be best in FAQ because that Common Assertions section is really focused on using the assertions listed before with .should(). Maybe a new "How can I check that a form's HTML form validation is shown when an input is invalid?" is the right call?

[jennifer-shehane]

@ryanpedersen42 Yah, I agree!

[ryanpedersen42]

I'm on it!

[konekoya]

Sorry for commenting on a closed issue. But I'm not sure if this is a bug or I have missed something? With the following setup:

A simple form

<form action="">
      <input type="text" id="name" name="name" required />
      <button type="submit">Submit</button>
</form>

And the spec

describe("Element", () => {
  before(() => {
    cy.visit("/");
  });

  it("it should have user value", () => {
    cy.get("input:invalid").should("have.length", 0);
  });
});

I'm getting an AssertionError of AssertionError: Timed out retrying: Too many elements found. Found '1', expected '0'.

If I however remove the required attribute from that input, it will pass. But shouldn't that attribute should be there and when users click on the submit button without filling the field then the input will display a native error message?

[rathorevaibhav]

Getting the same error as @konekoya

Any help would be appreciated.

[jennifer-shehane]

@konekoya @rathorevaibhav The test is failing as intended in your situation. The input is required, meaning it requires some value to be present in the input. With the test you've written, there is no value in the input, so the test fails since your test is testing that there are no invalid elements present.

If the input is empty, the test fails, as designed, since the input is required

If you fill out the required input, the test passes

The example in the FAQ is wrong basically, the assertions are backwards. I'll update the example.

[jennifer-shehane]

Sorry, the example in the FAQ is misleading since it doesn't show the required fields for the example. I'll update it nonetheless.

[jennifer-shehane]

Opened a PR here: #3480

[NimashaHatake]

Hi,
I want to know how to write a test for HTML5 built-in popup validation error in Cypress TypeScript.

This is the message I get when I click on the submit button:

I tried to add the below code, but then I got an error like this.

Email field code (inspect):
<input type="text" name="Email" id="UserEmail" class="form-control" placeholder="E-mail" required autofocus style="margin-bottom:14px;">

[MikeMcC399]

@NimashaMySendle

Adding a comment to this closed issue, which was about adding an example to the documentation, is not the best place for your question.

For questions about how to use Cypress you can go to

and use the i-need-help channel.

If you believe that you have found a bug in Cypress, you can open a new issue in the main Cypress repository.

[NimashaHatake]

@NimashaMySendle

Adding a comment to this closed issue, which was about adding an example to the documentation, is not the best place for your question.

For questions about how to use Cypress you can go to

and use the i-need-help channel.

If you believe that you have found a bug in Cypress, you can open a new issue in the main Cypress repository.

I'm new to cypress automation. thank you so much for your response