0

I have the below form and I would like to show error message on the form. so the users cannot save with proper email and phone# format.

Here is my vf :

<apex:page controller="Survey" sidebar="false" showHeader="false">
    <apex:form id="SurveyForm" >
        <apex:pageblock Title="Please fill the survey:">
           <apex:pageBlockSection columns="2">
            <apex:inputText value="{!account}" label="Account Name"/>
            <apex:inputText value="{!contactNameTitle}" label="Contact Name & Title"/>
            <apex:inputText value="{!phone}" label="Phone #"/>
            <apex:inputText value="{!fax}" label="Fax #"/>
            <apex:inputText value="{!email}" label="Email"/>
            <apex:inputText value="{!website}" label="Website"/>
            </apex:pageBlockSection>
            <p><apex:commandButton action="{!save}" value="save" style="width:100px;"/></p>
             </apex:pageBlockSection>
        </apex:pageblock>

    </apex:form>
    <script src="/jquery/jquery.js"></script>
        <script src="/jquery/jquery.validate.js"></script>
        <script>
        $(document).ready(function(){
             $('surveyForm').validate({
                  rules: {
                       name: "required",
                       email: {
                            required: true,
                            email: true,
                       },
                       comment: "required"
                  }

             });
        });
</script>
</apex:page>
1
  • Why exactly does what you have so far not work? Can you please edit your post to be more clear about what is lacking in the current implementation?
    – Adrian Larson
    Apr 19, 2017 at 17:41

2 Answers 2

-1

I think you are calling validate function on page load. You need to call this function on click Save button. Put name attribute like below:

<apex:inputText value="{!phone}" label="Phone #" id="phone"/>
<apex:inputText value="{!email}" label="Email" id="email"/>

****Call validateform() on onclick event as below:****

<p><apex:commandButton action="{!save}" value="save" style="width:100px;" onclick="validateform();"/></p>

**put Script like below:**
    <script>
    function validateForm() {
       var email = document.getElementById("{!$Component.SurveyForm.email}");
    var phoneno= document.getElementById("{!$Component.SurveyForm.phone}");
       if ( email == null || email == "" ) {
          alert("Email Required");
          return false;
       }else {
var re = "/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/";
return re.test(email);
}
       if ( phoneno == null || phoneno == "" ) {
          alert("Phone Required");
          return false;
       }

    }
    </script>
10
  • thanks for pointing me in the right direction, how can I check if the email format is correct like [email protected] and also the phone # format is a 10 digit number and does not contain any letters or special characters ?
    – mvr
    Apr 19, 2017 at 18:02
  • Use regex to validate email Apr 19, 2017 at 18:05
  • @SubhasisKar There is no "name" attribute on apex:inputText.
    – sfdcfox
    Apr 19, 2017 at 18:05
  • @sfdcfox - you are correct. This can be handel by id attribute. answer edited. Thanks for pointing out Apr 19, 2017 at 18:10
  • @vreddy Modified answer with correct email validation. Please accept my answer if it helps you Apr 19, 2017 at 18:16
1

First, you'll need to upload jQuery as a static resource, or use a CDN link.

Next, you need to match the input elements to their "name" in order to use this module. At minimum, that means you'll need to specify some ID values, and then specify those names:

<apex:page controller="Survey" sidebar="false" showHeader="false">
    <apex:includeScript value="{!$Resource.jQueryMin}" />
    <apex:includeScript value="{!$Resource.jQueryValidateMin}" />

    <apex:form id="SurveyForm" >
        <apex:pageblock Title="Please fill the survey:" id="block1">
           <apex:pageBlockSection columns="2" id="section1">
            <!-- removed for brevity -->
            <apex:inputText value="{!email}" label="Email" id="email" />

            </apex:pageBlockSection>
        </apex:pageblock>
    </apex:form>
        <script>
        $(document).ready(function(){
             $('surveyForm').validate({
                  rules: {
                       "{!$Component.SurveyForm.block1.section1.email}": {
                            required: true,
                            email: true,
                       }
                  }
             });
        });
</script>
</apex:page>

You must log in to answer this question.

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