email and phone validation on visualforce page

Question

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>

Answer 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>

Answer 2

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>