Salesforce Developer Community

Alex Wong 4
NEWBIE
185 Points
Member since 2016

Chatter

Feed
0

Best Answers
2

Likes Received
0

Likes Given
21

Questions
58

Replies

Can apex:inputFile have the html5 validation function?

My web page is a form using html5 validation to check blank. All field in my form can use html5 to perform validation, except the inputFile field for uploading attachment. Can apex:inputFile have the html5 validation function? Or is there any way to perform validation for checking whether the attachment field is blank or not? Thanks.

Alex Wong 4
August 18, 2016
Like
0

0 replies

How to validate email address or URL on client side?

My page is form. There are fields for email and url input. How to validate them? Since I have try the same technique, it works on the "required", but not the "email" field. For the required validation, when I click the save button, there is a message box shows under the field which is blank. But the message will only show one by one. Can they all show at the same time? How can I solve it?
Here is my code:

<apex:page standardController="Artist__c" extensions="extattachfile" showHeader="false" sidebar="false" docType="html-5.0">
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<style type="text/css">
h1 {font-size: 150%; font-weight: bold;}
h2 {font-size: ;}
p { width:100%;
    font-size: 120%;
    text-align: justify;
    text-justify: inter-word;}
.reddot {color: red; font-size:120%;}
.textarea { height:200px; 
            width:300px;
            border-radius: 5px;}
.url {width:300px;}
.title {font-size:175%;}
.standard {width: 310px;}
@media only screen and (min-width: 900px) {
    /* For desktop: */
p { width:890px;
    font-size: 120%;
    text-align: justify;
    text-justify: inter-word;}
}
.color {
    background-color: #F7F6D2;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
</style>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
    <apex:includeScript value="https://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"/>
    <apex:includeScript value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"/>
    <apex:includescript value="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />
    <apex:includescript value="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" />
</head>    

 <script>
        $ = jQuery.noConflict();
        $(document).ready(function() {
        $('[id$=artistform]').validate();             
              
            $('[id$=chiname]').rules("add",{
                required: true,
            });
            $('[id$=engname]').rules("add",{
                required: true,
            });       
            $('[id$=chibio]').rules("add",{
                required: true,
            });  
            $('[id$=engname]').rules("add",{
                required: true,
            });
            $('[id$=contactperson]').rules("add",{
                required: true,
            });
            $('[id$=contactno]').rules("add",{
                required: true,
            });                                                  
            $('[id$=email]').rules("add",{
                required: true,
                email: true
                });
              
            /* Customised the messages */
           jQuery.validator.messages.required = "<label style='color:red'>This field is required</label>";
                      jQuery.validator.messages.email = "<label style='color:red'>This is an invalid email.</label>"; 
        });
    </script>     

<apex:form styleclass="form" id="artistform">
   <apex:pageBlock >
<apex:pageMessages />
<div><b class="title">Artist Submission Form</b></div><br/>
<br/>
     <h1>Artist / Group Information</h1>
     <br/><br/>
      <div class="standard">
     <h2>Artist / Group Name (Chinese)</h2><br/>
<apex:outputText styleClass="reddot" value="*"/>
     <apex:panelGroup styleClass="col02 requiredInput" layout="block">
     <apex:panelGroup styleClass="requiredBlock" layout="block"/>
     <apex:inputText value="{!artist.Artist_Group_Name_Chinese__c}" id="chiname" required="true"/ >
     <apex:outputlabel id="op2" />
     </apex:panelGroup>
     <br/>      </div>
<br/>
      <div class="standard">
     <h2 >Artist / Group Name (English)</h2><br/>
<apex:outputText styleClass="reddot" value="*"/>
     <apex:panelGroup styleClass="col02 requiredInput" layout="block">
     <apex:panelGroup styleClass="requiredBlock" layout="block"/>
     <apex:inputText value="{!artist.Artist_Group_Name_English__c}" label="" id="engname" required="true"/>
     </apex:panelGroup>
     <br/>      </div>
<br/>
      <div class="standard">
     <h2 >Artist / Group Biography (Chinese)</h2><br/>
<apex:outputText styleClass="reddot" value="*"/>
     <apex:panelGroup styleClass="col02 requiredInput" layout="block">
     <apex:panelGroup styleClass="requiredBlock" layout="block"/>
     <apex:inputTextarea value="{!artist.Artist_Group_Biography_Chinese__c}" label="" styleClass="textarea" id="chibio" required="true"/>
     </apex:panelGroup>
     <br/>      </div>
<br/>
      <div class="standard">
     <h2 >Artist / Group Biography (English)</h2><br/>
<apex:outputText styleClass="reddot" value="*"/>
     <apex:panelGroup styleClass="col02 requiredInput" layout="block">
     <apex:panelGroup styleClass="requiredBlock" layout="block"/>
     <apex:inputTextarea value="{!artist.Artist_Group_Biography_English__c}" label="" styleClass="textarea" id="engbio" required="true"/>
     </apex:panelGroup>
     <br/><br/>      </div>
<br/>
      <div class="heading">
     <h1>Name and Roles of Group Members (if applicable)</h1>
     <br/>
     <br/><br/>      </div>
<br/>
      <div class="standard">
     <h2>Name and Roles of Group Members</h2><br/>
<apex:outputText styleClass="reddot" value=""/><br/>
     <apex:inputField value="{!artist.Member_Name_Role__c}" label="" styleClass="textarea"/><br/>
     <br/>      </div>
<br/>
      <div class="standard">
     <h2 >Photo of Artist/ Group : max 3 attachments</h2><br/>
<apex:outputText styleClass="reddot" value="*"/>
     <br/>
     <apex:panelGroup styleClass="col02 requiredInput" layout="block">
     <apex:panelGroup styleClass="requiredBlock" layout="block"/>
     <apex:inputFile value="{!objAttachment.body}" fileName="{!objAttachment.name}" required="false" id="photo"/><br/></apex:panelGroup>
     <apex:inputFile value="{!objAttachment2.body}" fileName="{!objAttachment2.name}" required="false" /><br/>
     <apex:inputFile value="{!objAttachment3.body}" fileName="{!objAttachment3.name}" required="false" />
     <br/><br/>      </div>
<br/>
      <div class="standard">
     <h2>Website </h2><outputtext/><apex:outputText styleClass="reddot" value=""/><br/>
     <apex:inputField value="{!artist.Website__c}" label="" styleClass="url" id="web"/><br/>
     <br/>      </div>
<br/>
      <div class="standard">
     <h2 >Facebook</h2><apex:outputText styleClass="reddot" value=""/><br/>
     <apex:inputField value="{!artist.Facebook__c}" label="" styleClass="url" id="facebook"/><br/>
     <br/>      </div>
<br/>
      <div class="standard">
     <h2 >SoundCloud</h2><apex:outputText styleClass="reddot" value=""/><br/>
     <apex:inputField value="{!artist.SoundCloud__c}" label="" styleClass="url" id="soundcloud"/><br/>
     <br/>      </div>
<br/>
      <div class="standard">
     <h2 >YouTube</h2><apex:outputText styleClass="reddot" value=""/><br/>
     <apex:inputField value="{!artist.YouTube__c}" label="" styleClass="url" id="youtube"/>
     <br/>      </div>
<br/><br/>
      <div class="standard">
     <h2>Technical Rider (File to be less than 1 MB) : max 1 attachment</h2><br/>
<apex:outputText styleClass="reddot" value=""/><br/>
     <apex:inputFile value="{!objAttachmentt.body}" fileName="{!objAttachmentt.name}" /><br/>      </div>
<br/>
      <div class="standard">
     <h2>Stage Plot (File to be less than 1 MB) : max 1 attachment</h2>
     <br/>
<apex:outputText styleClass="reddot" value=""/><br/>
    
     <apex:inputFile value="{!objAttachments.body}" fileName="{!objAttachments.name}" required="false" /><br/><br/>      </div>
<br/>
      <div class="heading">
     <h1>Contact Information </h1> <br/><br/>      </div>
<br/>
      <div class="standard">
     <h2>Contact Person </h2><apex:outputText styleClass="reddot" value="*"/><br/>
     <apex:panelGroup styleClass="col02 requiredInput" layout="block">
     <apex:panelGroup styleClass="requiredBlock" layout="block"/>
     <apex:inputText value="{!artist.Contact_Person__c}" label="" id="contactperson" required="true"/>
     <br/>
     </apex:panelGroup>      </div>
<br/>
      <div class="standard">
     <h2 >Contact No. </h2><apex:outputText styleClass="reddot" value="*"/><br/>
     <apex:panelGroup styleClass="col02 requiredInput" layout="block">
     <apex:panelGroup styleClass="requiredBlock" layout="block"/>
     <apex:inputText value="{!artist.Contact_Number__c}" label="" id="contactno" required="true"/>
     <br/>
     </apex:panelGroup>      </div>
<br/>
      <div class="standard">
     <h2>Email </h2><apex:outputText styleClass="reddot" value="*"/><br/>
     <apex:panelGroup styleClass="col02 requiredInput" layout="block">
     <apex:panelGroup styleClass="requiredBlock" layout="block"/>
     <apex:inputText value="{!artist.Email__c}" label="" id="email" required="true"/>
     <br/>
     </apex:panelGroup>      </div>
<br/>
>
<br/>
      <div>

        <apex:commandButton action="{!save}" value="Save"/>
      </div>
      
<script>
 var addclass = 'color';
var $cols = $('.standard').click(function(e) {
    $cols.removeClass(addclass);
    $(this).addClass(addclass);
});

</script>

</apex:pageBlock>       
</apex:form>
<apex:pageMessages />
</apex:page>

Alex Wong 4
August 17, 2016
Like
0