How to check form element validity state in Selenium

Question

I was wondering if it's possible to check the validation state of a form element from Selenium. I imagine it's an attribute, but it isn't obvious what it is meant to be.

//all these form elements are required as part of the form
WebElement createAccountEmailInput = this.wrapper.getDriver().findElement(By.id("createAccountEmail"));
WebElement createAccountUsernameInput = this.wrapper.getDriver().findElement(By.id("createAccountUsername"));
WebElement createAccountPasswordInput = this.wrapper.getDriver().findElement(By.id("createAccountPassword"));
WebElement createAccountPasswordConfirmInput = this.wrapper.getDriver().findElement(By.id("createAccountPasswordConfirm"));
WebElement createAccountSubmitButton = this.wrapper.getDriver().findElement(By.id("createAccountSubmitButton"));

//doesn't submit on no input
createAccountSubmitButton.click();

// at this point, all the inputs will be in the invalid state. How to verify that state?

Form:

<form id="homeCreateAccount">
    <div class="form-group">
        <label for="createAccountEmail">Email:</label>
        <input type="email" class="form-control loginEmailUsername" id="createAccountEmail"
        placeholder="Email" name="email" required>
    </div>
    <div class="form-group">
        <label for="createAccountUsername">Username:</label>
        <input type="text" class="form-control loginEmailUsername" id="createAccountUsername"
        placeholder="Username" name="email" required>
    </div>
    <div class="form-group">
        <label for="createAccountPassword">Password:</label>
        <input type="password" class="form-control loginPassword" id="createAccountPassword"
        placeholder="Password" name="password" required>
    </div>
    <div class="form-group">
        <label for="createAccountPasswordConfirm">Password Confirmation:</label>
        <input type="password" class="form-control loginPassword" id="createAccountPasswordConfirm"
        placeholder="Password Confirm" name="password" required>
    </div>
    <button type="submit" class="btn btn-primary" id="createAccountSubmitButton">Create Account <i class="fas fa-user-plus"></i></button>
</form>

Answer 1

You can use the:invalid pseudo class in a query selector to select invalid elements.