Form Custom Validation Styles

[goosedeersolutions]

Hello,

Wonder if someone could help me with styling of the forms validation. I am not a big fan of the little message box that appears and would like to change it. However, I am struggling to understanding how this is done.

I have a required username and password input field, that if the user submits the form I would like to set the border of the input field to read rather than show that message box. In the CSS I have change the border but it seems to be overwritten by other CSS.

<form class="sign-in-form" method="post">
  <input type="hidden" name="form_type" value="login">
  <wa-input size="small" autocomplete="off" placeholder="Username" required>
    <wa-icon name="user" family="classic" variant="regular" slot="prefix"></wa-icon>
  </wa-input>
  <wa-input size="small" placeholder="Password" type="password" required password-toggle>
    <wa-icon name="lock" family="classic" variant="regular" slot="prefix"></wa-icon>
  </wa-input>
  <a>Forgot your password?</a>
  <wa-button appearance="outlined" variant="neutral" size="medium" type="submit" pill>Sign In</wa-button>
</form>

// Form Validation
const signInForm = document.querySelector('.sign-in-form');
await Promise.all([
  customElements.whenDefined('wa-button'),
  customElements.whenDefined('wa-input')
]).then(() => {
  form.addEventListener('submit', event => {
    event.preventDefault();
    console.log("Hello")
  });
});

wa-input:state(invalid) { 
  border-color: red !important; 
} 

[claviska]

The messages box you see if from the browser's Constraint Validation API. As far as I know, they're design isn't configurable but they do automatically adapt to light/dark color schemes.

Using this API is the recommended approach for validation, but it's optional. See this page for more info on how to use it. For the most part, you can trigger validation declaratively with attributes.

https://backers.webawesome.com/docs/form-controls

If you want to provide your own custom validation, e.g. something inline instead of the messages boxes, you would need to implement that yourself. We are, however, interested in seeing how we can possibly support an alternative in the future. If you show an example of what you're looking for, I can add it to our internal backlog for consideration!