Form Field Validation in Visualforce Pages with Twitter Bootstrap

I have successfully enabled validation for <input> but fail for <select> using HTML attribute on a Visualforce Page on Salesforce Sites at here. Maybe I need to use JavaScript for <select> validation.

My Twitter Bootstrap is 3.3.6 and jQuery is 2.2.4. I also disabled the build-in CSS in Visualforce but there are still some conflicts. I will write a more detail post about this topic.

<apex:page standardStylesheets="false" showHeader="false" sidebar="false">
<link href="{!URLFOR($Resource.bootstrap, 'bootstrap-3.3.6-dist/css/bootstrap.min.css')}" rel="stylesheet" media="screen"/>
<link href="{!URLFOR($Resource.bootstrap, 'bootstrap-3.3.6-dist/css/bootstrap-theme.min.css')}" rel="stylesheet"/>
<apex:includeScript value="{!URLFOR($Resource.jquery, '')}"/>
<apex:includeScript value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.3.6-dist/js/bootstrap.min.js')}"/>

<input> Validation

HTML5 Form Validation Examples has a full description on validation related properties of <input>. I use required and type for easy validation.

You may also control the appearance when there is an error using validation states.

Here are some partial code:

<input class="form-control" id="last_name" required="true" maxlength="40" name="last_name" size="20" type="text" placeholder="請問貴姓?"></input>
<input class="form-control" id="email" required="true" maxlength="80" name="email" size="20" type="email" placeholder="請問分析報告要寄到何處?"></input>

<select> Validation

required doesn’t work here though it has been supported according to Remember to let the description item without value property in <option> according to Can I apply the required attribute to <select> fields in HTML5?

Here are some partial code:

<select id="00NG000000FVXly" name="00NG000000FVXly" required="true" title="Q1. How do you manage marketing/sales?">
    <option>-- 請從下列選項中擇一 --</option>
    <option value="a. Everybody works independently.">a. 他們各自獨立完成工作</option>
    <option value="b. Review reports and coach.">b. 我會訓練督導他們</option>
    <option value="c. They work as a team.">c. 他們會團隊合作</option>


  1. CRM 成熟度檢測
  2. jQuery
  3. Salesforce
  4. Salesforce Developers: An Introduction to Visualforce
  5. Salesforce Developers: Sites
  6. StackOverflow: Can I apply the required attribute to <select> fields in HTML5?
  7. StackOverflow: Defining a `required` field in Bootstrap
  8. The Art of Web: HTML: HTML5 Form Validation Examples
  9. Twitter Bootstrap
  10. Twitter Bootstrap Forms Validation states
  11. HTML <select> required Attribute
  12. Wiki: Cascading Style Sheets
  13. Wiki: JavaScript

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s