client side validation1

Client-side validation

Carrying out validation in the browser when a user submits a form is a technique that has been followed by numbers of years. The user is given immediate feedback rather than having to wait for a response from the server, and bandwidth is saved by not submitting the form if there are issues.

In this post we will create a Visualforce page that allows a user to create a contact record. When the user clicks on Save, client-side validation will take place to ensure that one of the e-mail address or phone number fields has been populated before submitting the form.

This post uses the jQuery ( JavaScript framework to swap the buttons. The JavaScript file is included from the Google Hosted Libraries content delivery network.

This post also uses the jQuery Validation plugin to provide the validation functionality. This is included in the Microsoft Ajax Content Delivery Network.

<script>// <![CDATA[
$(document).ready(function(){ /* configure the validator - set the email element to required if the phone is empty and vice versa */ var validator = $('[id="{!$Component.createClientform}"]').validate({ debug: true, rules: { '{!$Component.createClientform.pageBlock.pageBlockSection.contactemail}': { required: function() { return $('[id="{!$Component.createClientform.pageBlock.pageBlockSection.contactphone}"]').val()==''; } }, // email '{!$Component.createClientform.pageBlock.pageBlockSection.contactphone}': { required: function() { return $('[id="{!$Component.createClientform.pageBlock.pageBlockSection.contactemail}"]').val()==''; } }, // phone }, // rules messages: { '{!$Component.createClientform.pageBlock.pageBlockSection.contactemail}':"One of Email or Phone must be provided", '{!$Component.createClientform.pageBlock.pageBlockSection.contactphone}':"One of Phone or Email must be provided", } // messages } )});
// ]]></script>

How it works…

clientside client1

Leaving both the Email and Phone fields blank when saving the record.

When the page is loaded, the jQuery Validation Plugin is activated. Each of the Email and Phone fields is defined as required if the other field is empty:

{!$Component.createClientform.pageBlock.pageBlockSection.contactemail}': {
    required: function() {
        return $('[id="    {!$Component.createClientform.pageBlock.pageBlockSection.contactphone}"]').val()=='';}
}, // email

Each field has an associated message that is displayed when the field is required but empty. messages:
    "One of Email or Phone must be provided",
    "One of Phone or Email must be provided",
 } // messages



Leave a Reply


We're not around right now. But you can send us an email and we'll get back to you, asap.

Property of
Copyright 2017 Forcetalks. All Right Reserved.

Log in with your credentials


Forgot your details?