msrivastav13 · November 2, 2015 03:24
diff --git a/SLDSValidatorDEMO.page b/SLDSValidatorDEMO.page
 <apex:page showHeader="false" sidebar="false" standardController="Account" standardStylesheets="false" extensions="SLDSValidatordemocontroller" docType="html-5.0" id="thePage" applyHtmlTag="false" applyBodyTag="false">

 <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <head>
      <apex:stylesheet value="{!URLFOR($Resource.SLDS0102, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
      <apex:includeScript value="//code.jquery.com/jquery-2.1.4.min.js" />
      <apex:includeScript value="{!URLFOR($Resource.SLDSValidator)}" />
   </head>
   <body>
      <div class="slds">
         <div class="slds-grid slds-wrap">
            <!--Action Buttons -->
            <div class="slds-col slds-size--1-of-1">
               <a href="#" class="slds-button slds-button--neutral slds-float--right" id="callbtn" onclick="createAccount();">Save</a>
            </div>
            <div class="slds-col slds-size--1-of-1 slds-m-vertical--small">
               <h2 class="slds-text-heading--medium">Create Account</h2>
            </div>
            <div class="slds-col slds-size--1-of-1" id="messagewrapper">
            </div>
            <div class="slds-col slds-size--1-of-1">
            
               <div class="slds-form-element">
                  <label class="slds-form-element__label slds-m-top--small" for="Name">{!$ObjectType.Account.fields.Name.label}</label>
                  <div class="slds-form-element__control">
                     <input id="Name"  class="slds-input" type="text" html-placeholder="Name" data-required="true" data-fieldName="Name"/>
                  </div>
               </div>
               
                <div class="slds-form-element">
                  <label class="slds-form-element__label slds-m-top--small" for="fax">{!$ObjectType.Account.fields.Fax.label}</label>
                  <div class="slds-form-element__control">
                     <input id="fax"  class="slds-input" type="text" html-placeholder="Fax" data-required="true" data-fieldName="Fax"/>
                  </div>
               </div>
               
               
            </div>
         </div>
      </div>
      
      <script>
      
      var j$ = jQuery.noConflict();
      var imageURL = "{!URLFOR($Resource.SLDS0102, 'assets/icons/action-sprite/svg/symbols.svg#close')}";
      
        j$(document).ready(function() {
            
        });
    
            function createAccount() {
                if (!validatorSLDSplugin.validate()) {
                    var name = document.getElementById('Name').value;
                    var fax = document.getElementById('fax').value;
                    Visualforce.remoting.Manager.invokeAction(
                        '{!$RemoteAction.SLDSValidatordemocontroller.createAccount}',
                    name,
                    fax,
                    function(result, event) {
                        if (event.status) {
                            console.log(result);
                           validatorSLDSplugin.displayalert('Record created with Id..'+result,'slds-notify slds-notify--alert slds-theme--success slds-theme--alert-texture');
                        } else {
                             validatorSLDSplugin.displayalert(event.message,'slds-notify slds-notify--alert slds-theme--error slds-theme--alert-texture');
                        }
                    }, {
                        escape: false
                    }
                );
            }
        }
 </script>
   
    </body>
 </html>

 </apex:page>
	<apex:page showHeader="false" sidebar="false" standardController="Account" standardStylesheets="false" extensions="SLDSValidatordemocontroller" docType="html-5.0" id="thePage" applyHtmlTag="false" applyBodyTag="false">

	<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<head>
	<apex:stylesheet value="{!URLFOR($Resource.SLDS0102, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
	<apex:includeScript value="//code.jquery.com/jquery-2.1.4.min.js" />
	<apex:includeScript value="{!URLFOR($Resource.SLDSValidator)}" />
	</head>
	<body>
	<div class="slds">
	<div class="slds-grid slds-wrap">
	<!--Action Buttons -->
	<div class="slds-col slds-size--1-of-1">
	<a href="#" class="slds-button slds-button--neutral slds-float--right" id="callbtn" onclick="createAccount();">Save</a>
	</div>
	<div class="slds-col slds-size--1-of-1 slds-m-vertical--small">
	<h2 class="slds-text-heading--medium">Create Account</h2>
	</div>
	<div class="slds-col slds-size--1-of-1" id="messagewrapper">
	</div>
	<div class="slds-col slds-size--1-of-1">

	<div class="slds-form-element">
	<label class="slds-form-element__label slds-m-top--small" for="Name">{!$ObjectType.Account.fields.Name.label}</label>
	<div class="slds-form-element__control">
	<input id="Name" class="slds-input" type="text" html-placeholder="Name" data-required="true" data-fieldName="Name"/>
	</div>
	</div>

	<div class="slds-form-element">
	<label class="slds-form-element__label slds-m-top--small" for="fax">{!$ObjectType.Account.fields.Fax.label}</label>
	<div class="slds-form-element__control">
	<input id="fax" class="slds-input" type="text" html-placeholder="Fax" data-required="true" data-fieldName="Fax"/>
	</div>
	</div>


	</div>
	</div>
	</div>

	<script>

	var j$ = jQuery.noConflict();
	var imageURL = "{!URLFOR($Resource.SLDS0102, 'assets/icons/action-sprite/svg/symbols.svg#close')}";

	j$(document).ready(function() {

	});

	function createAccount() {
	if (!validatorSLDSplugin.validate()) {
	var name = document.getElementById('Name').value;
	var fax = document.getElementById('fax').value;
	Visualforce.remoting.Manager.invokeAction(
	'{!$RemoteAction.SLDSValidatordemocontroller.createAccount}',
	name,
	fax,
	function(result, event) {
	if (event.status) {
	console.log(result);
	validatorSLDSplugin.displayalert('Record created with Id..'+result,'slds-notify slds-notify--alert slds-theme--success slds-theme--alert-texture');
	} else {
	validatorSLDSplugin.displayalert(event.message,'slds-notify slds-notify--alert slds-theme--error slds-theme--alert-texture');
	}
	}, {
	escape: false
	}
	);
	}
	}
	</script>

	</body>
	</html>

	</apex:page>