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>
4
  • Where is your errMsg element? Can you please post your VF code?
    – Saroj Bera
    Sep 14, 2015 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, 2015 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, 2015 at 15:27
  • Put an alert to the variable and see if they are fetching the elements or not
    – Samir
    Feb 28, 2017 at 14:04

1 Answer 1

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>
4
  • Thanks saroj its working but i need same task using java script not jquery please help on this.
    – user321
    Sep 15, 2015 at 5:51
  • Is there any specific requirement not to use jQuery?
    – Saroj Bera
    Sep 15, 2015 at 5:54
  • No i tried on javascript but i am not getting correct requirement
    – user321
    Sep 15, 2015 at 6:05
  • @Sarojbera - Perfect!
    – Samir
    Feb 28, 2017 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.