make a required field in VF page

Question

I'm trying to make a required field input - But when I put

 **required=true**

in the apex:input component, Its like stuck the next JavaScript-dependent part and it's not working well until I fill it with a value.

Example :

<div class="col-md-3">
    <label class="control-label right-side" for="FirstName">First Name</label>
    <apex:input required="true" html-placeholder="Please Enter First Name"  styleClass="form-control"  value="{!firstName}"  id="firstnameId" />
</div>
<div class="col-md-3">
    <label class="control-label right-side" for="lastName">Last Name</label>
    <apex:input **required="true"** html-placeholder="Please Enter Last Name" styleClass="form-control"  value="{!lastName}"  id="lastnameId"/>
</div>

And then - the next action function is not working well :

<apex:pageBlock>
    <apex:actionFunction name="searchAccount" action="{!searchAccounts}" reRender="table" />
    <apex:pageBlockTable styleClass="table hover" value="{!accounts}" var="c" id="table">

        <apex:column style="float:right;">
            <apex:commandLink value="{!c.name}" reRender="accountId,selectedProductListId,selectedProductItemListId" action="{!proceedToUpload}" oncomplete="closeTable();"> 
                <apex:param value="{!c.Id}" name="act" />
                <apex:param value="{!c.Name}" name="accountName" />

            </apex:commandLink>

        </apex:column>

    </apex:pageBlockTable>
</apex:pageBlock>

SearchAccounts is a function that looking for an account. But its not working. Only when I insert some text to the required inputs - Its working again.

Can anyone explain to me why this is happening and how can I fix it?

Or alternatively - another way to do it?

Thanks!

Answer 1

When there’s a required field in a VF page and we submit the form, sever does a validation to make sure those have values populated. If there are no values form submission is rejected.

You may want to consider partial submission of your form to the server. Try using <apex:actionRegion> here is a link

Try wrapping your action function in a action region so that it submits the partial form only.