function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Praveen525Praveen525 

How to show visual force error

VF error

 

Hi friends,

 

        This is Praveen, is there any way to show field level validation error (Same line) like above shown image using visual force. If it's possible can you please share one example with me to solve my issue?

 

Thanks & Regards,

Praveen

 

PremanathPremanath

Hi praveen ,

 

You can try like this may be it's help ful to you..

 

<apex:page standardController="Account">
<apex:form >
<apex:pageBlock >
<apex:pageBlockButtons >
<apex:commandButton value="Save" action="{!Save}"/>
<apex:commandButton value="Cancel" action="{!Cancel}"/>
</apex:pageBlockButtons>
<apex:pageBlockSection title="Student Info">
<apex:inputField value="{!Account.Name}"/>
<apex:inputField value="{!Account.AccountNumber}" required="True"/>
<apex:inputField value="{!Account.AnnualRevenue}" required="True"/>
<apex:inputField value="{!Account.Description}" required="True"/>
<apex:inputField value="{!Account.Site}" required="True"/>
</apex:pageBlockSection>
</apex:pageblock>
</apex:form>
</apex:page>
Praveen525Praveen525

Thanks for your replay,

 

i tried that one, but our team wants those validation errors at same line as i shown in the image. is there any way to show the error message in the same line using visualforce.

 

Thanks & Regards,

Praveen
SaissreeneeSaissreenee

Premnath's code would achieve your purpose except that it would give the error message as Error:  You must enter a value. I think this hould suffice your purpose.

 

But if you need a custom message, you can use JQuery or any javascript to validate the form on submission.  And to have the error reported in the same way you have shown in your post, you can use one column table and do the styling accordingly.

 

Let me know if you need any code snippet.

 

Regards

 

Saissreenee
SamuelDeRyckeSamuelDeRycke

If you investigate the output css I think you'll see they are <span> elements with a certain css class, you can extend css rules for that class using !important. Changing the location will take a bit more work than changing the style, but this can get you on your way:

 

<style>
    .errorMsg {
        font-size:80% !important;
        margin-top: -2px !important;
    }
</style>

 
@taani.ax1426@taani.ax1426

This link might help you: 

 

http://www.mkpartners.com/blog/apex-code/required-field-and-custom-error-messages-in-visualforce and add style to your page.

 

Regards,

Taani
PremanathPremanath

As per Taani said you can try this code

 

<apex:page controller="exampletest">
<apex:form >
<apex:pageBlock >
<apex:pageBlockButtons >
<apex:commandButton value="Save" action="{!save}" />
</apex:pageBlockButtons>
<apex:pageBlockSection >

<apex:pageBlockSectionItem >
<apex:outputLabel value="Required Field" />
<apex:outputPanel styleClass="requiredInput" layout="block" >
<apex:outputPanel styleClass="requiredBlock" layout="block"/>
<apex:inputText value="{!requiredFieldName}" />
</apex:outputPanel>
</apex:pageBlockSectionItem>
<apex:pageMessages />
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

 

 

public class exampletest {
public String requiredFieldName {get;set;}
public void save(){
if ( requiredFieldName == null || requiredFieldName == '' ){
ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'Please enter a value in the Required Field'));
}
}

}

 

 

Good Work Taani..........
Srinu@dreamsSrinu@dreams

By using jquery you can diplay error messages as you mentioned in the above image

1. First download the jquery file here.

2. If it is not downloading copy the code and paste it in notepad and save it with jquery.js like that.

3. Then upload that file into static resources.

4. In your vf page use the following code

<apex:page standardcontroller="Account" showHeader="false" standardStylesheets="false">
    
    <apex:includeScript value="{!$Resource.jquery}"/>
    <apex:includeScript value="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"/>
    
    <script type="text/javascript"> 
        $(document).ready(function() {
             
            $('[id$=commentForm]').validate();             
             
            $('[id$=name]').rules("add",{
                required: true,
                minlength: 5
            });     
            
            $('[id$=email]').rules("add",{
                required: true,
                email: true
            });      
            
            $('[id$=url]').rules("add",{
                url: true
            });
            
            $('[id$=comment]').rules("add",{
                required: true
            });
            
            $('[id$=pwd]').rules("add",{
                required: true,
                minlength: 5
            });
            
            $('[id$=cpwd]').rules("add",{
                required: true,
                minlength: 5,
                equalTo: '[id$=pwd]'
            });      
            
            /* Customised the messages */
            jQuery.validator.messages.required = "You better have entered a value.. or else!"; 
            jQuery.validator.messages.equalTo = "No silly, you're supposed to type the same set of characters AGAIN.";                                                
        });
        
    </script>   
    
    <!-- Ignore my template -->
    <apex:composition template="Template">
        <apex:define name="title">
            <a href="http://thesilverlining-developer-edition.na7.force.com/jqueryvalidatedemo/">jQuery Forms Validation Demo</a>
        </apex:define>
        
        <apex:define name="blurb">
            <p>
                Fiddle with the form entering combinations of correct and incorrect values to see the validation rules in action. Hitting the sumbit button will also trigger form checking.
            </p>
        </apex:define>


        <apex:define name="content">    
            <apex:outputPanel layout="block" style="text-align:center; font-size:12px;padding: 4px">
                <apex:form id="commentForm" > 

                        <apex:outputlabel for="name">Name <span class="star">*</span></apex:outputlabel> 
                        <apex:inputtext id="name" value="{!account.name}"/>
                        <br/>
                        <apex:outputlabel for="email">E-Mail <span class="star">*</span></apex:outputlabel> 
                        <apex:inputtext id="email"  value="{!account.name}"/> 
                        <br/>
                        <apex:outputlabel for="url">URL (optional)</apex:outputlabel> 
                        <apex:inputtext id="url"  value="{!account.name}" /> 
                        <br/>
                        <apex:outputlabel for="comment">Your comment <span class="star">*</span></apex:outputlabel> 
                        <apex:inputtextarea id="comment" value="{!account.name}" style="width: 30%"/>
                        <br/>
                        <apex:outputLabel for="pwd">Password <span class="star">*</span></apex:outputLabel>
                        <apex:inputSecret id="pwd" value="{!account.name}"/>
                        <br/>
                        <apex:outputLabel for="cpwd">Confirm Password <span class="star">*</span></apex:outputLabel>
                        <apex:inputSecret id="cpwd" value="{!account.name}"/>                        
                        <br/>
                        <input type="submit" />
            
                </apex:form>
            
            </apex:outputPanel>
            
        </apex:define>
        
    </apex:composition>
     
</apex:page>

 5. make changes according to your vfpage.

 6. Then you will get the desired output

Refer Here: http://th3silverlining.com/2010/03/02/visualforce-form-validation-enhanced/#more-543