Javascript to make field required

Question

I am trying to use javascript to make a field required/not required. The scenario is to make Employees on Account as required when Account type is Other. When the Account type is selected as press, With the help of javascript i could make the red bar disappear, but the validation Error : You must enter a value is still thrown when I click on save.

Can someone help me identify what I am missing?

<apex:page standardController="Account" tabStyle="Account" showHeader="true" sidebar="true">

    <style>

    .requiredBlock {
        background-color: #C00;
        position: absolute;
        left: -4px;
        width: 3px;
        top: 1px;
        bottom: 1px;
    }
    .notrequiredBlock {
        background-color: red;
        position: absolute;
        left: -4px;
        width: 3px;
        top: 1px;
        bottom: 1px;
    }
    </style>
    <script language="javascript"  type="text/javascript">
        window.onload = function() {
            $(".coverPrct")[0].parentElement.children[0].className = '';
        }
        function makeReq(){
            console.log($(".coverPrct")[0]);
            if($(".coverPrct")[0].parentElement != null){
                $(".coverPrct")[0].parentElement.children[0].className = '';
            }
            //console.log($(".pastPracticeCoverageId")[0].value +'Coverage' );
            if($(".pastPracticeCoverageId")[0].value != null && ($(".pastPracticeCoverageId")[0].value == 'Other')){
                //alert('Passed');
                console.log('Before ' + $(".coverPrct")[0].parentElement.children[0].className);
                $(".coverPrct")[0].parentElement.children[0].className = 'requiredBlock';
            }
            else{
                $(".coverPrct")[0].parentElement.children[0].className = '';
            }
        }
    </script>

    <apex:pageBlock title="Test">
        <apex:pageBlockButtons >
            <apex:commandButton value="save" title="Save"/>
            <apex:commandButton value="cancel" title="Cancel"/>
        </apex:pageBlockButtons>
        <apex:pageBlockSection >
            <apex:inputField value="{!Account.Name}" required="true"/>
            <apex:inputField onchange="makeReq()" styleClass="pastPracticeCoverageId"  value="{!Account.Type}"/>
            <div id="coverageField"> 
                <script language="javascript"  type="text/javascript">
                        console.log($(".coverPrct")[0]);
                        if($(".coverPrct")[0].parentElement != null){
                            $(".coverPrct")[0].parentElement.children[0].className = '';
                            //$(".coverPrct")[0].value = 0;
                        }
                        //console.log($(".pastPracticeCoverageId")[0].value +'Coverage' );
                        if($(".pastPracticeCoverageId")[0].value != null && (($(".pastPracticeCoverageId")[0].value == 'Other') )){
                            //alert('Passed');
                            console.log('Before ' + $(".coverPrct")[0].parentElement.children[0].className);
                            $(".coverPrct")[0].parentElement.children[0].className = 'requiredBlock';
                            //$(".coverPrct")[0].parentElement.innerHTML = "<div class='requiredInput'>"+ $(".coverPrct")[0].parentElement.innerHTML + "</div>";
                        }
                        else{
                            $(".coverPrct")[0].parentElement.children[0].className = '';
                            //$(".coverPrct")[0].value = 0;
                        }
                </script>
                <apex:inputField styleClass="coverPrct" value="{!Account.NumberOfEmployees}" required="true" >
                <div class="requiredBlock"></div>
                </apex:inputField>
            </div>
        </apex:pageBlockSection>

    </apex:pageBlock>
</apex:form>    

Answer 1

The required attribute forces the field to be required at the server level. You can take away all the markers, but Visualforce won't allow the required field to be empty.

You'll want to instead code this in Visualforce; make the field required based on the input of the other element. This also requires an actionRegion to avoid the validation from firing when changing from required to not required:

<apex:pageBlock id="block">
  <apex:actionRegion renderRegionOnly="false">
    <apex:pageBlockSection>
      <apex:inputField value="{!Account.Name}" />
      <apex:inputField value="{!Account.Type}">
        <apex:actionSupport event="onchange" reRender="block" />
      </apex:inputField>
    </apex:pageBlockSection>
  </apex:actionRegion>
  <apex:pageBlockSection>
    <apex:inputField value="{!Account.NumberofEmployees}" required="{!Account.Type='Other'}" />
  </apex:pageBlockSection>
</apex:pageBlock>

If you want to use JavaScript, don't use Visualforce attributes, and if you want to use Visualforce attributes, don't use JavaScript. The two are generally mutually incompatible with each other.