0

I am trying to check javascript validations on some fields in visualforce page. Following is my code. 

<apex:page >

     <html> 
         <head>
             <script>

              function testit(){
             if ( document.getElementById('answer1').value.length > 10000){
                     alert( "Answer for Question 1 can contain only 10000 characters" );
                     document.getElementById('answer1').focus();
                     return false;
                }
                if ( document.getElementById('answer2').value.length > 10000){
                     alert( "Answer for Question 2 can contain only 10000 characters" );
                     document.getElementById('answer2').focus();
                     return false;
                }
                if ( document.getElementById('answer3').value.length > 10000){
                     alert( "Answer for Question 3 can contain only 10000 characters" );
                     document.getElementById('answer3').focus();
                     return false;
                }
                if ( document.getElementById('answer4').value.length > 10000){
                     alert( "Answer for Question 4 can contain only 10000 characters" );
                     document.getElementById('answer4').focus();
                     return false;
                    }
                   if ( document.getElementById('answer5').value.length > 10000){
                     alert( "Answer for Question 5 can contain only 10000 characters" );
                     document.getElementById('answer5').focus();
                     return false;
                    }
                  }
             </script>
         </head>
        <body>
            <apex:form >

            <p style="font-weight:bold;">Question 1</p>
                            <textarea id="answer1" name="answer1" rows="10" cols="100"/>

                            <p style="font-weight:bold;">Question 2 </p>
                            <textarea id="answer2" name="answer2" rows="10" cols="100"/>

                            <p style="font-weight:bold;">Question 3</p>
                            <textarea id="answer3" name="answer3" rows="10" cols="100"/>

                            <p style="font-weight:bold;">Question 5 </p>
                            <textarea id="answer5" name="answer5" rows="10" cols="100"/>

            <apex:commandButton value="Submit" onclick="return(testit())" styleClass="button button1"  />

            </apex:form>
         </body>
    </html>
</apex:page>

In some cases question 4 is not rendered to the page, so in my current code, I get the validation error for Question 1, 2 and 3 only but I dont get the error on question 5. Please help me understand why the error is not firing for question 5.

Improve this question
1
  • Check question no.4 display hide or show before validate this
    – Rijwandeltax
    Mar 2, 2020 at 9:01

2 Answers 2

Reset to default
0

try this might help

<apex:page >

 <html> 
     <head>
     </head>
    <body>
        <apex:form >

        <p style="font-weight:bold;">Question 1</p>
                        <textarea id="answer1" name="answer1" rows="10" cols="100"/>

                        <p style="font-weight:bold;">Question 2 </p>
                        <textarea id="answer2" name="answer2" rows="10" cols="100"/>

                        <p style="font-weight:bold;">Question 3</p>
                        <textarea id="answer3" name="answer3" rows="10" cols="100"/>

                        <p style="font-weight:bold;">Question 5 </p>
                        <textarea id="answer5" name="answer5" rows="10" cols="100"/>

        <apex:commandButton value="Submit" onclick="return(testit())" styleClass="button button1"  />

        </apex:form>
     </body>
     <noscript>Opps! Please enable javascript for better experience</noscript>
     <script>
         const testit = () => {
            if ( document.getElementById('answer1').value.length > 10000){
                 alert( "Answer for Question 1 can contain only 10000 characters" );
                 document.getElementById('answer1').focus();
                 return false;
            }
            if ( document.getElementById('answer2').value.length > 10000){
                 alert( "Answer for Question 2 can contain only 10000 characters" );
                 document.getElementById('answer2').focus();
                 return false;
            }
            if ( document.getElementById('answer3').value.length > 10000){
                 alert( "Answer for Question 3 can contain only 10000 characters" );
                 document.getElementById('answer3').focus();
                 return false;
            }
            if ( document.getElementById('answer4').value.length > 10000){
                 alert( "Answer for Question 4 can contain only 10000 characters" );
                 document.getElementById('answer4').focus();
                 return false;
                }
            if ( document.getElementById('answer5').value.length > 10000){
                 alert( "Answer for Question 5 can contain only 10000 characters" );
                 document.getElementById('answer5').focus();
                 return false;
            }
         }
     </script>
</html>

Improve this answer
0

Put the <script> Javascript code below the <apex:form> code. The Javascript will only be able to find the elements if they've already been defined

Improve this answer

You must log in to answer this question.

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