JSFiddle - React, Tailwind, and code Playground

by farhatdz

HTML

<form>
	<input type="text" id='subscriber-name' placeholder="Please Enter Your Name" required />
	<input type="email" id='subscriber-email' placeholder="Please Enter your Email Address" required />
    <!-- The errorAlert div shows the error message if inputs are invalid and someone attempts to submit. -->

<div id="errorAlert">You need to first correct your invalid inputs before you can submit.</div>

    <input type="submit" id='subscriber-submit-button' class="om-trigger-conversion" value="Subscribe" />
</form>

CSS

/* Required CSS for Validation Begins Here */
html div#om-{id} .{ns}-FieldsElement--content #errorAlert {
    font-style: italic;
    text-align: center;
    color: red;
    font-size: .8em;
    margin: 10px;
    display: none;
}

html div#om-{{id}} .{{ns}}-FieldsElement--content input:invalid {
    border: 2px solid red;
}

html div#om-{{id}} .{{ns}}-FieldsElement--content input:placeholder-shown {
    border-style: inset;
    border: 1px lightgray solid;
}

html div#om-{{id}} .{{ns}}-FieldsElement--content input:disabled {
    pointer-events: none;
}
/* Required CSS for Validation Ends Here */

JavaScript

var form = document.querySelector('html div#om-YOUR-OPTIN-SLUG .NAMESPACE-FieldsElement--content');
    var errorAlert = document.querySelector("html div#om-YOUR-OPTIN-SLUG .NAMESPACE-FieldsElement--content #errorAlert");
    var formSubmitButton = document.querySelector("html div#om-YOUR-OPTIN-SLUG .NAMESPACE-FieldsElement--content input.om-trigger-conversion"); /* This variable is a flag to know if a user has attempted to submit at least once. */
    var attemptToSubmitAtLeastOnceFlag = false; /* This code hides the error field. */
    function fieldsCheck() {
        var lookForInvalidInputs = document.querySelectorAll('html div#om-YOUR-OPTIN-SLUG .NAMESPACE-FieldsElement--content :invalid'); /* Scan Form for All Inputs that currently have a :placeholder-shown pseudo-class */
        var lookForInputsShowingPlaceholders = document.querySelectorAll('html div#om-YOUR-OPTIN-SLUG .NAMESPACE-FieldsElement--content :placeholder-shown'); /* If there are no "invalid" states OR Placeholder States, then the table will be 0 */
        if (lookForInvalidInputs.length > 0 || lookForInputsShowingPlaceholders.length > 0) { /* If the inputs are invalid, show the Error Message and Disable the Submit button */
            formSubmitButton.disabled = true;
            errorAlert.style.display = "block";
        } else { /* If the inputs are valid, remove the Error Message and Enable the Submit button */
            errorAlert.style.display = "none";
            formSubmitButton.disabled = false;
        }
    }
/* --------------------Event Listeners Below --------------------- */
/* As keys are pressed, check to see if the fields have been validated to allow input. If fields are valid, run 'fieldsCheck' function. The key down function will only display the Error Message after the user attempts to press the Submit Button once. */
    form.addEventListener("keydown", function() {
        if (attemptToSubmitAtLeastOnceFlag == true) {
            fieldsCheck();
        }
    });

  ...