Client Side Validation Complex / Multi-Field

<script>
    //<![CDATA[
    PrimeFaces.validator['MyComplexValidator'] = {

        validate: function(element) {
            let nameRequiredPf = PF('nameRequired');
            let namePf = PF('name');

            if (nameRequiredPf.isChecked() && namePf.getValue().length === 0) {
                PrimeFaces.validation.ValidationContext.highlight(namePf);
                PrimeFaces.validation.ValidationContext.addMessage(namePf, { summary: 'Validation Error', detail: 'A name is required!' });
            } else {
                PrimeFaces.validation.ValidationContext.unhighlight(namePf);
            }
        }
    };
    //]]>
</script>

<div class="card">
    <h:form id="form">
        <p:outputPanel pt:data-p-val="MyComplexValidator">
            <p:messages showDetail="true">
                <p:autoUpdate/>
            </p:messages>

            <h:panelGroup id="grid" layout="block" styleClass="formgrid grid p-fluid">
                <div class="field col-12 md:col-4">
                    <p:outputLabel for="@next" value="Name required"/>
                    <p:selectBooleanCheckbox id="nameRequired" widgetVar="nameRequired" value="#{complexValidationView.nameRequired}"/>
                    <p:message for="@previous"/>
                </div>
                <div class="field col-12 md:col-4">
                    <p:outputLabel for="@next" value="Name"/>
                    <p:inputText id="name" widgetVar="name" value="#{complexValidationView.name}" label="Name"/>
                    <p:message for="@previous"/>
                </div>
                <div class="field col-12 md:col-4">
                    <p:outputLabel for="@next" value="Accept Terms And Conditions"/>
                    <p:selectBooleanCheckbox id="terms" value="#{complexValidationView.acceptTermnsAndCondition}"/>
                    <p:message for="@previous"/>
                </div>
            </h:panelGroup>

            <p:defaultCommand target="btnAjax"/>

            <p:commandButton value="Non-Ajax" ajax="false" icon="pi pi-check" validateClient="true"
                             action="#{complexValidationView.doNonAjax()}" style="margin-right:10px"/>
            <p:commandButton value="Ajax" id="btnAjax" update="@form" icon="pi pi-check" validateClient="true"
                             action="#{complexValidationView.doAjax()}" style="margin-right:10px"/>
            <p:commandButton value="Disabled (without CSV)" ajax="false" icon="pi pi-check"
                             action="#{complexValidationView.doNonAjaxWithoutCsv()}"  style="margin-right:10px"/>
        </p:outputPanel>
    </h:form>
</div>