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">


<apex:commandLink value="A |" action="{!namesearch}" reRender="block" status="searchStaus" >
<apex:param name="searchChar" value="A" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="B |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="B" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="C |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="C" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="D |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="D" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="E |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="E" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="F |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="F" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="G |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="G" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="H |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="H" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="I |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="I" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="J |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="J" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="K |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="K" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="L |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="L" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="M |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="M" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="N |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="N" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="O |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="O" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="P |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="P" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="Q |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="Q" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="R |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="R" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="S |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="S" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="T |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="T" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="U |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="U" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="V |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="V" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="W |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="W" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="X |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="X" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="Y |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="Y" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="Z |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="Z" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="Other |" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="Other" assignTo="{!searchname}" />
</apex:commandLink>
 


<apex:commandLink value="All" action="{!namesearch}" reRender="block" status="searchStaus">
<apex:param name="searchChar" value="All" assignTo="{!searchname}" />
</apex:commandLink>
 

<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">
searching...
<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">
Deleting...
<img src="/img/loading.gif" alt="" style="position:fixed; top:210px; left:780px;" />
</apex:facet>
 
</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>
 | 
<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>

December 21, 2015
·
Like
0
·
Follow
1

Best Answer chosen by Hemant_Soni

James 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.

December 21, 2015
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

how to make a input text field required with javascript

You need to sign in to do that.