1

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>
  • Where is your errMsg element? Can you please post your VF code? – Saroj Bera Sep 14 '15 at 13:29
  • <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> – user321 Sep 14 '15 at 13:44
  • @PachipalaHaritha, I've copied your comments into your post for you. You can edit your own post at anytime using the edit link located at the bottom left. – crmprogdev Sep 14 '15 at 15:27
  • Put an alert to the variable and see if they are fetching the elements or not – Samir Feb 28 '17 at 14:04
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>
  • Thanks saroj its working but i need same task using java script not jquery please help on this. – user321 Sep 15 '15 at 5:51
  • Is there any specific requirement not to use jQuery? – Saroj Bera Sep 15 '15 at 5:54
  • No i tried on javascript but i am not getting correct requirement – user321 Sep 15 '15 at 6:05
  • @Sarojbera - Perfect! – Samir Feb 28 '17 at 14:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.