Add example of checking native HTML5 form validation message

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!')
  })
})

[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.

[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?