+ Start a Discussion
satakshisatakshi 

How to make picklist Field Required on Visualforce Page?

Hello,

  I am creating a web to lead form. In that form i am using picklist filed. I want to make this picklist field required on visualforce page. I am not able to do it using required ="true". What will be other solution.

<section class="form-row">
<label for="Interested In">Interested In:</label>
<section class="select-outer">
<select class="select" id="00N36000006Q84K" name="00N36000006Q84K" title="Interested In" required="true">
<option value="">Please select</option>
<option value="Mobile Apps">Mobile Apps</option>
<option value="Web Apps">Web Apps</option> <option value="Salesforce">Salesforce</option>
<option value="Technical Support">Technical Support</option>
<option value="Application Support">Application Support</option>
</select>
</section>
</section>
Best Answer chosen by satakshi
satakshisatakshi
Hi All,

Thank you all for your precious time and for the help. Its a lot for me. I have used Javascript and its working.

<apex:page standardController="Lead" >
<script>
function validateForm()
{
var x = document.getElementById('{!$Component.exname}');
if (x == null || x == "")
{
alert("Please select Value");
return false;
}
}
</script>

(Add onsubmit="return validateForm()"  in to Web-To-Lead form code as shown in below)
<form id="enquiryFrm" action="https://cs41.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" onsubmit="return validateForm()" method="post" >

<section class="form-row">
<apex:outputLabel value="Interested In:"/>
<apex:outputPanel layout="block" styleClass="requiredInput">
<apex:outputpanel layout="block" styleClass="requiredBlock"/>
<section class="select-outer">
<select class="select" id="00N3600000NxhqK" name="exname" title="Interested In">
<option value="">Please select</option>
<option value="Mobile Apps">Mobile Apps</option>
<option value="Web Apps">Web Apps</option>
<option value="Salesforce">Salesforce</option>
 <option value="Technical Support">Technical Support</option>
<option value="Application Support">Application Support</option>
</select>
</section>
</apex:outputpanel>
</section>


Thanks & Regards,
Satakshi

All Answers

SandhyaSandhya (Salesforce Developers) 
Hi satakshi,

I think you need to give class="required" instead of required = "true"

please refer below link you may get some more information.

http://stackoverflow.com/questions/12938701/requiring-to-make-a-selection-from-a-drop-down-html-5

Hope this helps you!

Thanks and Regards
Sandhya
Tarun SuriTarun Suri
Hi Satakshi,

Try This
Interested In:<select  id="00N36000006Q84K" name="00N36000006Q84K" title="Interested In" required>
<option value="">Please select</option>
<option value="Mobile Apps">Mobile Apps</option>
<option value="Web Apps">Web Apps</option>
<option value="Salesforce">Salesforce</option>
<option value="Technical Support">Technical Support</option>
<option value="Application Support">Application Support</option>
</select>

Hope it solves Your Problem

Thanks
Tarun Suri
Swaraj Behera 7Swaraj Behera 7
Hi Satakshi,
Please Use below code.Modify it as per the use .
<apex:Stylesheet value="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>

 
    <link rel='stylesheet' type='text/css' href="{!URLFOR($Resource.oliadditionalcss)}"/>


    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
   
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


<section class="form-row">
<label for="Interested In">Interested In:</label>
<section class="select-outer">


<div class="requiredInput">
<div class="requiredBlock"></div>
<select class="requiredBlock" id="00N36000006Q84K" name="00N36000006Q84K" title="Interested In" required="true">
			<option value="">Please select</option>
			<option value="Mobile Apps">Mobile Apps</option>
			<option value="Web Apps">Web Apps</option>
			<option value="Salesforce">Salesforce</option>
			<option value="Technical Support">Technical Support</option>
			<option value="Application Support">Application Support</option>
</select>
 </div>

</section>
</section>

Thanks,
Swaraj

 
satakshisatakshi
Hi All,

Thank you all for your precious time and for the help. Its a lot for me. I have used Javascript and its working.

<apex:page standardController="Lead" >
<script>
function validateForm()
{
var x = document.getElementById('{!$Component.exname}');
if (x == null || x == "")
{
alert("Please select Value");
return false;
}
}
</script>

(Add onsubmit="return validateForm()"  in to Web-To-Lead form code as shown in below)
<form id="enquiryFrm" action="https://cs41.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" onsubmit="return validateForm()" method="post" >

<section class="form-row">
<apex:outputLabel value="Interested In:"/>
<apex:outputPanel layout="block" styleClass="requiredInput">
<apex:outputpanel layout="block" styleClass="requiredBlock"/>
<section class="select-outer">
<select class="select" id="00N3600000NxhqK" name="exname" title="Interested In">
<option value="">Please select</option>
<option value="Mobile Apps">Mobile Apps</option>
<option value="Web Apps">Web Apps</option>
<option value="Salesforce">Salesforce</option>
 <option value="Technical Support">Technical Support</option>
<option value="Application Support">Application Support</option>
</select>
</section>
</apex:outputpanel>
</section>


Thanks & Regards,
Satakshi
This was selected as the best answer