How to validate contact fields in vf using javascript

Question

I tried with the below code for valid error message for firstname,lastname and email but i am not getting result.

<script type="text/javascript">
    function validateForm() {
        try {
            var fNameObj = document.getElementById("{!$Component.myForm.thPageBlock.fName}");
            var lNameObj = document.getElementById("{!$Component.myForm.thPageBlock.lName}");
            var EmailObj = document.getElementById("{!$Component.myForm.thPageBlock.email}");
            var errObj = document.getElementById("{!$Component.myForm.thPageBlock.errMsg}");
            var errObj1 = document.getElementById("{!$Component.myForm.thPageBlock.errMsg1}");
            var errObj2 = document.getElementById("{!$Component.myForm.thPageBlock.errMsg2}");
            if (fNameObj.value.length == 0) {
                errObj.innerHTML = "Please insert first name!!!"
                return false;
            }
            if (lNameObj.value.length == 0) {
                errObj1.innerHTML = "Please insert last name!!!"

                return false;
            }
            if (mail.value.length == 0) {
                errObj2.innerHTML = "Please insert email!!!"
                return false;
            }
            return true;
        } catch (e) {
            alert(e);

            return false;
        }
    }
</script>

i need output like It should show error message only for last name field after i enter valid value in first name field and click on submit button (given invalid value in first name field first, then given valid value) . In the same way for email field also .

Error Message Element:

<tr><td><b>First Name</b></td>
<td><apex:inputText value="{!Firstname}" id="fName"/></td></tr>
<tr></tr> 
<tr><td></td>
<td><apex:outputLabel styleClass="redFont" id="errMsg"></apex:outputLabel></td></tr> 
<tr><td><b> Last Name</b></td>
<td><apex:inputText value="{!lastname}" id="lName"/></td></tr>
<tr></tr> 
<tr><td></td>
<td><apex:outputLabel styleClass="redFont" id="errMsg1">
</apex:outputLabel></td></tr> 
<tr><td><b> Email</b></td>
<td><apex:inputText value="{!Email}" id="email"/> </td></tr>
<tr></tr> 
<tr><td><td></td>
<apex:outputLabel styleClass="redFont" id="errMsg2">
</apex:outputLabel>

Answer 1

There are a number of JS validation frameworks available for this job. You don't have to write it from scratch like email validation etc... I have updated your code with jQuery validation plugin. Hope this helps.

jQuery validation framework tutorial. http://www.javascript-coder.com/form-validation/jquery-form-validation-guide.phtml#simple_usage

<apex:page showHeader="true" sidebar="true" controller="ValidationError">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('[id$=myForm]').validate();
            $('[id$=fName]').rules("add",{
                required: true,
                minlength: 5
            });     
            $('[id$=lName]').rules("add",{
                required: true,
                minlength: 5
            });             
            $('[id$=email]').rules("add",{
                required: true,
                email: true
            });         

        });
        /* Customised the messages */
        jQuery.validator.messages.required = "This is a required field."; 
    </script>
    <style type="text/css">
        .error {
            color: red;
        }
    </style>
    <apex:form id="myForm">
        <table>
            <tr>
               <td><b>First Name</b></td>
               <td>
                  <apex:inputText value="{!Firstname}" id="fName"/>
               </td>
            </tr>
            <tr>
               <td><b> Last Name</b></td>
               <td>
                  <apex:inputText value="{!lastname}" id="lName"/>
               </td>
            </tr>
            <tr>
               <td><b> Email</b></td>
               <td>
                  <apex:inputText value="{!Email}" id="email"/>
               </td>
            </tr>
            <tr>
                <td><b> Submit Form</b></td>
                <td><input type="submit" /></td>
            </tr>       
        </table>
    </apex:form>
</apex:page>