+ Start a Discussion
SS KarthickSS Karthick 

Required error messaage in Visualforce page

Hi folks,
         Can anyone tell me how to get the custom error message(red color) in visualforce after disabling the show header and standard stylesheet?

Below is my VFP for getting Custom Error Message
<apex:page standardController="Contact" standardStylesheets="false" showHeader="false"  >

<apex:pageBlock >
    <apex:form >
        <apex:pageMessages ></apex:pageMessages>
        <apex:inputField value="{!contact.lastname}" html-placeholder="Enter Your Last Name"/>
        <apex:commandButton action="{!save}" value="Submit"/>
    </apex:form>
</apex:pageBlock>
</apex:page>


But the page gives lafter clicking submit button 

User-added image


But I want to display error message in red color.

For that what I have to do?


Thanks in advance
Karthick
 
Best Answer chosen by SS Karthick
Jigar.LakhaniJigar.Lakhani
Hello,

Update your visualforce page with below code.

Visualforce Page:
<apex:page standardController="Contact" standardStylesheets="false" showHeader="false"  >

<apex:pageBlock >
    <apex:form >
        <style>
            body {
                font-family: 'Arial','Helvetica',sans-serif;
                font-size: 75%;
            }
            .bPageBlock .message {
                margin: 0 0 4px;
            }
            .message {
                border-radius: 4px;
            }
            .errorM6, .errorM4, .errorM3, .errorM2, .errorS1 {
                border-color: #c00;
            }
            .message {
                background-color: #ffc;
                border-style: solid;
                border-width: 1px;
                color: #000;
                margin: 4px 20px;
                padding: 6px 8px 6px 6px;
            }
            .errorM3 .msgIcon, .errorMedium {
                background-image: url("/img/msg_icons/error24.png");
                background-position: 0 0;
                height: 24px;
                width: 24px;
            }
            img {
                border: 0 none;
            }
            body, td {
                color: #222;
                font-family: Arial,Helvetica,sans-serif;
            }
            body, td {
                color: #333;
                margin: 0;
            }
            .message .messageText {
                margin-left: 8px;
            }
            .message .messageTable .messageCell {
                vertical-align: middle;
            }
            .pbBody, .pbBody a, .pbBody td, .lbBody a, .lbBodyDescription, .list .headerRow .noRowsHeader {
                color: #000;
            }
            .message .messageText h4 {
                display: block;
                font-weight: bold;
            }
            body .x-btn button, body .btn, body .btnImportant, body .btnDisabled, body .btnCancel, body .menuButton .menuButtonButton, body .menuButton .menuButtonMenu a, body .menuButton .menuButtonMenu input.theOption, h1, h2, h3, h4, h5, h6 {
                font-family: Arial,Helvetica,sans-serif;
            }
            h1, h2, h3, h4, h5, h6 {
                font-size: 100%;
                margin: 0;
            }
            .bPageBlock .requiredInput {
                height: 100%;
                position: relative;
            }
            .bPageBlock .requiredInput .requiredBlock {
                background-color: #c00;
                bottom: 1px;
                left: -4px;
                position: absolute;
                top: 1px;
                width: 3px;
            }
            .errorStyle, .errorMsg, .importantWarning, .pbBody .errorStyle a, .pbBody .errorMsg a {
                color: #d74c3b;
            }
        </style>
        <apex:pageMessages ></apex:pageMessages>
        <apex:inputField value="{!contact.lastname}" html-placeholder="Enter Your Last Name"/>
        <apex:commandButton action="{!save}" value="Submit"/>
    </apex:form>
</apex:pageBlock>
</apex:page>

Thanks and Cheers,
Jigar
 

All Answers

Frédéric TrébuchetFrédéric Trébuchet
Hi Karthick,

It seems that you have to deal with HTML pass-through attributes which are supported by apex:messages.
http://www.salesforce.com/us/developer/docs/pages/

I've not tried but it looks to be a solution.
Otherwise, maybe using a custom controller...

Let us know what's appens.

Regards,
Fred
Jigar.LakhaniJigar.Lakhani
Hello,

Update your visualforce page with below code.

Visualforce Page:
<apex:page standardController="Contact" standardStylesheets="false" showHeader="false"  >

<apex:pageBlock >
    <apex:form >
        <style>
            body {
                font-family: 'Arial','Helvetica',sans-serif;
                font-size: 75%;
            }
            .bPageBlock .message {
                margin: 0 0 4px;
            }
            .message {
                border-radius: 4px;
            }
            .errorM6, .errorM4, .errorM3, .errorM2, .errorS1 {
                border-color: #c00;
            }
            .message {
                background-color: #ffc;
                border-style: solid;
                border-width: 1px;
                color: #000;
                margin: 4px 20px;
                padding: 6px 8px 6px 6px;
            }
            .errorM3 .msgIcon, .errorMedium {
                background-image: url("/img/msg_icons/error24.png");
                background-position: 0 0;
                height: 24px;
                width: 24px;
            }
            img {
                border: 0 none;
            }
            body, td {
                color: #222;
                font-family: Arial,Helvetica,sans-serif;
            }
            body, td {
                color: #333;
                margin: 0;
            }
            .message .messageText {
                margin-left: 8px;
            }
            .message .messageTable .messageCell {
                vertical-align: middle;
            }
            .pbBody, .pbBody a, .pbBody td, .lbBody a, .lbBodyDescription, .list .headerRow .noRowsHeader {
                color: #000;
            }
            .message .messageText h4 {
                display: block;
                font-weight: bold;
            }
            body .x-btn button, body .btn, body .btnImportant, body .btnDisabled, body .btnCancel, body .menuButton .menuButtonButton, body .menuButton .menuButtonMenu a, body .menuButton .menuButtonMenu input.theOption, h1, h2, h3, h4, h5, h6 {
                font-family: Arial,Helvetica,sans-serif;
            }
            h1, h2, h3, h4, h5, h6 {
                font-size: 100%;
                margin: 0;
            }
            .bPageBlock .requiredInput {
                height: 100%;
                position: relative;
            }
            .bPageBlock .requiredInput .requiredBlock {
                background-color: #c00;
                bottom: 1px;
                left: -4px;
                position: absolute;
                top: 1px;
                width: 3px;
            }
            .errorStyle, .errorMsg, .importantWarning, .pbBody .errorStyle a, .pbBody .errorMsg a {
                color: #d74c3b;
            }
        </style>
        <apex:pageMessages ></apex:pageMessages>
        <apex:inputField value="{!contact.lastname}" html-placeholder="Enter Your Last Name"/>
        <apex:commandButton action="{!save}" value="Submit"/>
    </apex:form>
</apex:pageBlock>
</apex:page>

Thanks and Cheers,
Jigar
 
This was selected as the best answer
Frédéric TrébuchetFrédéric Trébuchet
That's HTML pass-through.
Works fine.