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.

1
  • Check question no.4 display hide or show before validate this – Rijwandeltax Mar 2 '20 at 9:01
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>

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

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.