One of the frustrating aspects of salesforce is some of the UI element generation it does (and in this case, doesn't do) for you.

While  <apex:inputField required="true"> will add the standard salesforce required indicator (the red bar) to your page with no further effort, if you have to drop down to the lower level <apex:inputText required="true"> tag, you'll miss out on this help, leaving you to wrap your inputText field in various chunks of HTML in order to have Salesforce's standard stylesheets into apply the appropriate look.

Recently I had this requirement on several text fields and a selectOption field and rather than inject lots of HTML into my VF page manually I decided to use jQuery to help me out.

First, I defined my inputText with an additional class of 'requiredIndicator', this is just a marker so the text field (and any others with the same class on the page) can be found by jQuery.

<apex:inputText label="{!$ObjectType.Account.fields.name.label}" required="true" styleClass="requiredIndicator"  value="{!form.AccountName}" />

Next came the jQuery (in this case I'm using a jQuery bundle I've previously added to the static resources)

  <apex:includeScript value="{!URLFOR($Resource.jQueryForce,'/js/jquery-1.6.4.min.js')}" />

  <script type="text/javascript">
	   $(function(){
	  		$('.requiredIndicator').wrap('<div>').before('<div></div>');
	  	}
	   );
  </script>

And here is the end result (all of these fields are inputText):

It also works with selectOptions, which also don't show required indicators:

<apex:selectRadio value="{!stockOption}" required="true" label="Stock Availability" styleClass="requiredIndicator"> 
   <apex:selectOption itemValue="vehicleInStock" itemLabel="{!$ObjectType.PricingRequest__c.fields.VehicleInStock__c.label}"/>                    
   <apex:selectOption itemValue="dealerSwapRequired" itemLabel="{!$ObjectType.PricingRequest__c.fields.DealerSwapRequired__c.label}"/>
   <apex:selectOption itemValue="poolStock" itemLabel="{!$ObjectType.PricingRequest__c.fields.PoolStock__c.label}"/> 
   <apex:selectOption itemValue="factoryOrder" itemLabel="{!$ObjectType.PricingRequest__c.fields.FactoryOrder__c.label}"/> 
</apex:selectRadio>

Check the jQuery site to read more on class selector and the wrap and before methods

Need to enter real Date Of Birth of a customer who is more then 5 years old?

I am sure at some point you will come across this issue (if you haven’t already) where you only see next 5 years of values in the Date & date/Time fields based on the current year.

For example:  Date fields created in 2011 will only show these values {2011, 2012,2013,2014,2015,2016}

Here is a solution I found on one of the blogs and it adds past 100years of values in the year part of the field.

1) Go to Setup -> App Setup -> Customize -> User Interface. Here make sure the 'Show Custom Sidebar Components on All Pages' is checked.

2) Go to Setup -> App Setup -> Home Page Layouts. Make sure all your Home Page Layouts have the Messages & Alerts component checked.

3) Go to Setup -> App Setup -> Home Page Components. Here, click edit for Messages & Alerts. In the textarea, copy and paste the javascript code below and save (it can just go below your normal Messages & Alerts, won't show up on the actual page).

************************************************************************************************************************************

<script src="/js/dojo/0.4.1/dojo.js"></script>

<script src="/soap/ajax/11.1/connection.js" type="text/javascript"></script>

<script type="text/javascript">
dojo.require("dojo.collections.Store");
dojo.require("dojo.charting.Chart");
dojo.require('dojo.json');
var arYears = getYears();
function swapYears(){

// Contact Birth day
if(document.getElementById('calYearPicker') != null) {
var select = document.getElementById('calYearPicker');
var curValue = select.value;
var parentx = select.parentNode;
parentx.removeChild(select);
select = document.createElement('select');
select.size = 1;
select.id = 'calYearPicker';
select.name = 'calYearPicker';
parentx.appendChild(select);
}
if(select != null) {
for(x=0;x<100;x++) {
select.options[x] = new Option(arYears[x], arYears[x], false, false);
}
}
}

function getYears() {
sforce.sessionId = getCookie('sid');
sforce.connection.sessionId=sforce.sessionId;
var out = [];

// generate dates for the last 100 years
var currentTime = new Date()
var year = currentTime.getFullYear()
try {
for(x=0;x<100;x++) {
out[x] = x+year-99;
}
} catch(error) {
alert(error);
}
return out;
}
dojo.addOnLoad(swapYears);
</script>

**************************************************************************************************************************************

I have used this for one of our project already and it works pretty well. Probably not the most elegant solution but it meets customer’s requirements and no impact on any other configuration.

Hope you all find this helpful!