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>
August 17, 2016
·
Answer
·
Like
0
·
Follow
0
You need to sign in to do that.

Need an account? Sign Up
Have an account? Sign In
Dismiss
Browse by Topic

Welcome to Support!

Show

sorted by

How to validate email address or URL on client side?

You need to sign in to do that.
