# Required Fields - Customization and Testing

**URL:** <https://community.weweb.io/t/required-fields-customization-and-testing/14835>\
**Category:** Ask us anything\
**Tags:** design\
**Created:** [December 4, 2024, 8:02pm UTC](https://community.weweb.io/t/required-fields-customization-and-testing/14835 "2024-12-04T20:02:42Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![SnitchNewt](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/snitchnewt/32/5925_2.png) [@SnitchNewt](https://community.weweb.io/u/SnitchNewt)\
**Post date:** [December 4, 2024, 8:02pm UTC](https://community.weweb.io/t/required-fields-customization-and-testing/14835/1 "2024-12-04T20:02:43Z")

</div>

How do we:

1. **Customize the “Please fill in this field.” message?**
2. **Detect that this message is being displayed?**  
a. My client wants automated testing and so we need to test that missing values for required fields are enforced.  
b. We have 80% automated testing coverage on the frontend, except for these field validations.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/963cc8359165e8cade2b3f5ccff4ca24416d86bf.png)

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [December 4, 2024, 9:43pm UTC](https://community.weweb.io/t/required-fields-customization-and-testing/14835/2 "2024-12-04T21:43:56Z")

</div>

some quick thoughts:

- check the element has the `:invalid` pseudoclass
- check the element `validity` property

see [Client-side form validation - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)

---

<div class="post-metadata">

**Author:** ![SnitchNewt](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/snitchnewt/32/5925_2.png) [@SnitchNewt](https://community.weweb.io/u/SnitchNewt)\
**Post date:** [December 5, 2024, 1:12am UTC](https://community.weweb.io/t/required-fields-customization-and-testing/14835/3 "2024-12-05T01:12:23Z")

</div>

Thanks for the suggestion. Neither the `:invalid` element state or the `validity` property exists on these WeWeb elements.

I must be missing something very obvious. Any other ideas?

```auto
<input 
  data-v-47d7ada4="" data-v-5d2667c9="" 
  class="ww-input-basic ww-element ww-element-815eff4b-e383-4a4d-addd-3a3d43036f8d ww-flexbox__object" 
  type="email" 
  name="input-email" 
  required="" 
  autocomplete="off" 
  placeholder="Enter your email" 
  min="0" max="10000" step="1" 
  ww-responsive="ww-element" 
  data-ww-flexbox-index="1" 
  ut-data="email-field" id="input-email" 
  data-ww-element="true" 
  data-ww-uid="815eff4b-e383-4a4d-addd-3a3d43036f8d" 
  data-ww-component-id="37" 
  ww-front-state="[object Object]" 
  style="font-size: 16px; font-family: var(--ww-default-font-family); line-height: 24px; font-weight: 400; letter-spacing: 0px; word-spacing: 0px; text-decoration-line: none; text-decoration-thickness: initial; text-decoration-style: solid; text-overflow: initial; margin: 5px 0px 0px; padding: 0px 0px 0px 12px; z-index: unset; align-self: unset; display: block; width: 100%; max-width: unset; min-width: unset; height: 38px; max-height: unset; min-height: unset; background: none; border: 1px solid rgb(212, 212, 216); border-radius: 8px;"
>

```

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [December 5, 2024, 1:36am UTC](https://community.weweb.io/t/required-fields-customization-and-testing/14835/4 "2024-12-05T01:36:41Z")

</div>

> [@SnitchNewt](#):
>
> I must be missing something very obvious.

the code you posted shows an element with attributes. to check pseudoclasses existence or to access element properties you need to access the DOM with js, it can’t be done by just parsing the html.  
in my previous link there are examples about accessing the validity property (with a different purpose thoug)  
if you aim to test this by just parsing the html then checking for the existence of the required attribute (or other relevant validation attribute) is all you can do

---

<div class="post-metadata">

**Author:** ![SnitchNewt](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/snitchnewt/32/5925_2.png) [@SnitchNewt](https://community.weweb.io/u/SnitchNewt)\
**Post date:** [December 5, 2024, 5:00pm UTC](https://community.weweb.io/t/required-fields-customization-and-testing/14835/5 "2024-12-05T17:00:41Z")

</div>

@dorilama, thank you very much.

I was able to get it to work from your directions. For future users trying to do the same automated testing, I leave my JavaScript and Cypress code here.

## JavaScript

When the **required** field error is displayed, the following pseudo class should exist on the input element.

```auto
document.querySelector("#input-password:invalid")

```

The field error text can be fetched using.

```auto
document.querySelector("#input-password:invalid").validationMessage

```

## Cypress

```auto
describe('Login Form Test', () => {
    it('Prevent form submission if the required inputs are missing.', () => {
        // Visit the page
        cy.visit('https://my.app.com/login');

        // Attempt to submit the form without filling in required fields
        cy.get('form').submit();

        // Check for invalid fields
        cy.get('#input-email:invalid').should('exist');
        cy.get('#input-password:invalid').should('exist');

        // Check for invalid field message
        cy.get('#input-email:invalid').then(($input) => {
            expect($input[0].validationMessage).to.equal('Please fill in this field.');
        });
        cy.get('#input-password:invalid').then(($input) => {
            expect($input[0].validationMessage).to.equal('Please fill in this field.');
        });
    });
});

```

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [December 5, 2024, 6:46pm UTC](https://community.weweb.io/t/required-fields-customization-and-testing/14835/6 "2024-12-05T18:46:04Z")

</div>

well done 🙂

---

<div class="post-metadata">

**Author:** ![SnitchNewt](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/snitchnewt/32/5925_2.png) [@SnitchNewt](https://community.weweb.io/u/SnitchNewt)\
**Post date:** [December 25, 2024, 5:07pm UTC](https://community.weweb.io/t/required-fields-customization-and-testing/14835/7 "2024-12-25T17:07:21Z")

</div>

**Addendum** : Getting the `validity` or `validationMessage` for a dropdown (multiselect) field is a bit more challenging. So documenting this for my (future) self and for the community.

For displaying the `validationMessage` of dropdown fields, WeWeb uses a **hidden** `<input>` element with the `required` attribute to trigger the browser’s built-in validation. This hidden input is the source of the _“Please fill in this field”_ message. This is a clever trick that WeWeb uses to leverage the browser’s native validation of their dropdown field, which is a very custom implementation for us.

To interact with this field, I created a custom attribute for the dropdown named “ut-data” and gave it a name called “gender” for the gender dropdown. You can then access the fake/hidden input field this way.

```auto
  cy.get('div[ut-data="gender"] .multiselect-fake-input:invalid').should(
      "exist"
    );
    cy.get('div[ut-data="gender"] .multiselect-fake-input:invalid').then(
      ($input) => {
        expect($input[0].validationMessage).to.equal(
          "Please fill in this field."
        );
      }
    );

```