+ Start a Discussion
Hemant_SoniHemant_Soni 

how to make a input text field required with javascript

hi......
i am try to make a input text field required with javascript but it is not working and this javascript is put in component.
here is my VF Page
<apex:page standardController="Account" extensions="searchcontroller" >
    <apex:form id="theform">
        <script type='text/javascript'>
            function runOnEnter(ev) {
                if (window.event && window.event.keyCode == 13 || ev.which == 13) {
                    searchAccRecs();
                    return false;
                } else {
                    return true;
                }
            }
        </script>
        <apex:pageBlock title="Search Account" id="block">

            <span>
            <apex:commandLink value="A |" action="{!namesearch}" reRender="block" status="searchStaus"  >
             <apex:param name="searchChar" value="A" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="B |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="B" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="C |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="C" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="D |" action="{!namesearch}" reRender="block" status="searchStaus">
           <apex:param name="searchChar" value="D" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="E |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="E" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="F |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="F" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="G |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="G" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="H |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="H" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="I |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="I" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="J |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="J" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="K |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="K" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="L |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="L" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;            
            </span>
            <span>
            <apex:commandLink value="M |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="M" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="N |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="N" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="O |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="O" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="P |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="P" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="Q |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="Q" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="R |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="R" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="S |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="S" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="T |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="T" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="U |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="U" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="V |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="V" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="W |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="W" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="X |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="X" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="Y |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="Y" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="Z |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="Z" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="Other |" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="Other" assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <span>
            <apex:commandLink value="All" action="{!namesearch}" reRender="block" status="searchStaus">
            <apex:param name="searchChar" value="All"  assignTo="{!searchname}" />
            </apex:commandLink>
            &nbsp;
            </span>
            <apex:pageBlockSection title="Account">
                <c:RequiredField />
                <apex:commandButton value="search" action="{!doSearch}" status="searchStaus" reRender="block" id="thesearch" />
                <apex:actionstatus id="searchStaus">
                    <apex:facet name="start">
                        <span style="color:red;font-weight:bold; position:fixed; top:210px; left:700px; ">searching...</span>
                        <img src="/img/loading.gif" alt="" style="position:fixed; top:210px; left:780px;" />
                    </apex:facet>
                </apex:actionstatus>
                 <apex:actionstatus id="searchStaus1">
                    <apex:facet name="start">
                        <span style="color:red;font-weight:bold; position:fixed; top:210px; left:700px; ">Deleting...</span>
                        <img src="/img/loading.gif" alt="" style="position:fixed; top:210px; left:780px;" />
                    </apex:facet>
                    &nbsp;
                </apex:actionstatus>
               </apex:pageBlockSection>
            <apex:pageBlockSection title="Detail View" id="lst" rendered="{!NOT(ISNULL(lst))}">
                <apex:pageBlockTable value="{!lst}" var="l" rendered="{!NOT(ISNULL(lst))}" style="width:242%;">
               
                    <apex:column >
                        <apex:facet name="header">
                            <apex:inputcheckbox onclick="checkAll(this,'check')" />
                        </apex:facet>
                        <apex:inputcheckbox id="check">
                        </apex:inputcheckbox>
                    </apex:column>
                    <apex:column >
                        <apex:facet name="header">Action</apex:facet>
                        <apex:outputLink value="/{!l.id}/e?retURL=/apex/{!$CurrentPage.Name}">Edit</apex:outputLink>
                        &nbsp;|&nbsp;
                        <a href="javascript:if (window.confirm('Are you sure?')) doDelete('{!l.Id}');">Del</a>
                    </apex:column>
                    <apex:column value="{!l.Id}">
                        <apex:facet name="header">
                            <apex:commandLink action="{!ViewData}" value="Account id{!IF(sortExpression=='id',IF(sortDirection='ASC','▼','▲'),'')}" reRender="block">
                                <apex:param value="id" name="column" assignTo="{!sortExpression}"></apex:param>
                            </apex:commandLink>
                        </apex:facet>
                    </apex:column>
                    <apex:column value="{!l.Phone}">
                        <apex:facet name="header">
                            <apex:commandLink action="{!ViewData}" value="Phone{!IF(sortExpression=='Phone',IF(sortDirection='ASC','▼','▲'),'')}" reRender="block">
                                <apex:param value="Phone" name="column" assignTo="{!sortExpression}"></apex:param>
                            </apex:commandLink>
                        </apex:facet>
                    </apex:column>
                    <apex:column value="{!l.BillingCity}">
                        <apex:facet name="header">
                            <apex:commandLink action="{!ViewData}" value="Billing City{!IF(sortExpression=='BillingCity',IF(sortDirection='ASC','▼','▲'),'')}" reRender="block">
                                <apex:param value="BillingCity" name="column" assignTo="{!sortExpression}"></apex:param>
                            </apex:commandLink>
                        </apex:facet>
                    </apex:column>
                    <apex:column value="{!l.Name }">
                        <apex:facet name="header">
                            <apex:commandLink action="{!ViewData}" value="Name{!IF(sortExpression=='Name',IF(sortDirection='ASC','▼','▲'),'')}" reRender="block">
                                <apex:param value="Name" name="column" assignTo="{!sortExpression}"></apex:param>
                            </apex:commandLink>
                        </apex:facet>
                    </apex:column>
                </apex:pageBlockTable>
            </apex:pageBlockSection>
        </apex:pageBlock>
        <apex:actionFunction action="{!doDelete}" name="doDelete" reRender="theform" status="searchStaus1">
            <apex:param name="accountId" value="" assignTo="{!accountId}" />
        </apex:actionFunction>
        <apex:actionFunction name="searchAccRecs" action="{!doSearch}" reRender="block" />
    </apex:form>
</apex:page>

And Here Is my Component 

<apex:component controller="searchcontroller">
<apex:attribute name="requiredField" description="Attribute on the component."
type="String" required="ture" />
<style type="text/css">{
.requiredInput .requiredBlock {
    background-color: #B00000 ;
    position: absolute;
    left: -4px;
    width: 3px;
    top: 1px;
    bottom: 1px;
}
}
</style>
<script>

</script>
<apex:pageBlockSection >
<apex:outputLabel for="searchaccount" >Search Text</apex:outputLabel>
<apex:outputPanel >
<div class="requiredInput">
<div class="requiredBlock"></div>

<apex:inputText id="inf" value="{!searchText}" onkeypress="return runOnEnter(event);" required="ture"  />
</div>
</apex:outputPanel>
</apex:pageBlockSection>
<script language="javascript">
function validate()
{
try
{
var fNameObj = document.getElementById("{!$Component.inf}");

if(trim(fNameObj.value) == "" )
{
alert("required field must fill !");
return false;
}
return true;
}
catch(e)
{
alert(e);
return false;
}
}
</script> 
</apex:component> 
Best Answer chosen by Hemant_Soni
James LoghryJames Loghry
There are several things wrong with your Visualforce and component.  Here are a few that I noticed off the bat:
  • required="true" is misspelled as required="ture"
  • searchStatus is misspelled as "searchStaus"
  • your javascript validate function is never called.
  • Your "rollodex" feature (having a command link for EVERY letter) should be simplified using apex:repeat or perhaps a loop in javascript

Any of these items could lead to your field not being "required".  I would also check for javascript errors (using the developer console in chrome, firefox, or IE).  If needed, you could also add "debugger;" statements in your javascript to force the javascript to stop at a breakpoint, so that you can inspect the values if needbe.

Hope these tips help.