0

I have developed the below code using Visualforce page and javaScript + CSS. When I click on "Closed Date", I don't see that date calendar is coming up. Could you please let me know what could be the issue? Any pointers?

JQueryFormValidationExample1

<apex:page standardController="Opportunity" docType="html-5.0" standardStylesheets="false" sidebar="false" showHeader="false">
    <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:stylesheet value="{!$Resource.formvalidationone}"/> 
    <apex:includeScript value="{!$Resource.formvalidationonejs}"/>
    <head>
        <title>Jquery Form Validation1</title>      
        <body>
            <div class="container">
                <div class="form-area" >
                    <apex:form id="CustomerForm" >
                        <div class="form-element">
                            <table>
                                <tr>
                                    <td class="a"> Opportunity Name </td>
                                    <td class="b" ><apex:inputField value="{!Opportunity.Name}" html-placeHolder="OpportunityName" id="OpportunityName" /></td>
                                </tr>
                                <tr>
                                    <td class="a"> Close Date </td>
                                    <td class="b" ><apex:inputField value="{!Opportunity.CloseDate}" html-placeHolder="CloseDate" id="CloseDate" /></td>
                                </tr>
                                <tr>
                                    <td class="a"> Stage </td>
                                    <td class="b" ><apex:inputField value="{!Opportunity.StageName}" html-placeHolder="StageName" id="StageName" /></td>
                                </tr>
                                <tr>
                                    <td class="a"> Type </td>
                                    <td class="b" ><apex:inputField value="{!Opportunity.Type}" html-placeHolder="Type" id="Type" /></td>
                                </tr>
                                <tr>
                                    <td class="a"> Lead Source </td>
                                    <td class="b" ><apex:inputField value="{!Opportunity.LeadSource}" html-placeHolder="LeadSource" id="LeadSource" /></td>
                                </tr>
                            </table>
                            <apex:commandButton action="{!save}" value="Save Form" id="submit" styleClass="submit" />
                        </div>
                    </apex:form>
                </div>
            </div>
        </body>
    </head>
</apex:page>

enter image description here

form-validation1.css

.container{
            margin:0px auto;
            background:#eee;
            width:50%;
            }
           .form-area{
             padding:1%;
             border:1px solid #003;

            }
            .form-element{
             margin-bottom:10px;
             padding:10px;
            }
            .form-element input{
             padding:10px;
             width:90%;
            }
            .submit{
             padding:10px;
             background:#900;
             color:#fff;
             border-width:opx;
             margin-left:40%;
            }
            .error{
              font-weight:bold;
              color:#900; 
            }
            td.a {
                width: 30%;           
                padding: 15px;
                text-align: left;
            }

            td.b {
                width: 50%;
                padding: 5px;
                text-align: left;
            }
            table {
                width: 80%;
            }

and form-validation1.js

<script type="text/javascript"> 
    $( document ).ready(function() {       
         $('[id$=CustomerForm]').validate();             
              errorclass: "myerrorclass";

               $('[id$=OpportunityName]').rules("add",{
                required: true,
                minlength: 5,
                maxlength: 50,               
                messages:{
                  required:"<br/>Required OpportunityName Name",
                  minlength: jQuery.validator.format("<br/>Please etner at least 5 characters are necessary"),
               }                           
            }); 

              $('[id$=StageName]').rules("add",{
                required: true,
               email:true,              
                messages:{
                  required:"<br/>Required StageName",
                  email: jQuery.validator.format("<br/>Please enter StageName"),
               }                           
            });  
    });         
</script>

Error on console

enter image description here

Edit- 1)

enter image description here

2) I expected to see. Note: This is reference screen shot I want to be shown like that, if I tries to submit form without any values populated.

enter image description here

Still some errors are coming

enter image description here

1
  • How we can create the "myerrorclass" and used them in JS code ? Jun 5, 2017 at 7:13

1 Answer 1

1

Below are the problems:

1.You are trying to invoke standard salesforce date picker but you have set standardStylesheets = 'false'. change it to true

2.Invoke jquery functions inside $( document ).ready(function() {}); to ensure jquery attaches event handlers once the dom is constructed

  1. for one of the validators in your JSFile the selector you are using is $('[id$=Stage]') but it should be $('[id$=StageName]') since your id is StageName.

Code snippet for jquery ready.put your entire js code inside the below block

$( document ).ready(function() { $('[id$=CustomerForm]').validate();  ...});

Any code you put inside jquery ready will get fired once the entire DOM loads for the page.

5
  • edited my existing answer. Below documentation explains more about jquery ready api.jquery.com/ready
    – RedDevil
    Jun 3, 2017 at 15:19
  • i dont see the screenshots where are they?
    – RedDevil
    Jun 3, 2017 at 15:32
  • Just added those! I am not sure whats going wrong, exhausting with this issue. I am following 1st example from link : sfdcsrini.blogspot.com/2016/04/jquery-validatior.html Jun 3, 2017 at 15:47
  • If you look at your jquery validation js code it has the error class as 'myerrorclass' but this doesnt exist in your css. It will never pick the error style
    – RedDevil
    Jun 4, 2017 at 8:54
  • @ RedDevil - Could you please guide, I don't have hands-on on the CSS/JS etc. Jun 5, 2017 at 13:14

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .