Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Subha Ayyappan 7Subha Ayyappan 7 

Javascript to Check the Required Fields

Can anybody help me to write a javascript to check "if the field is blank in a visualforce page" and show the error messages below the field itself? I am new to javascript and not knowing how to write the JS code. Thank you.
Abhijeet Anand 6Abhijeet Anand 6
Please post your visualforce code. You need to make use of the DOM IDs to check for the blank values.
Abhijeet Anand 6Abhijeet Anand 6
Hope this helps:

<apex:page id="pgId" >
    
    <input type='text' id='txtId'/>
    <input type='button' value="Click me" id='btnId' onclick="clickMe();"/>
    <br></br>
     <apex:outputLabel value="Please enter any text" id="msgId" style="display:none"/>
    
    <script>
        
        function clickMe(){
            var txtValue = document.getElementById('txtId').value;
            if(txtValue == ''){
                document.getElementById('txtId').style.borderColor = "red";
                document.getElementById('pgId:msgId').setAttribute('style','visibility:visible');
            }
            
            else{
                document.getElementById('txtId').style.borderColor = "";
                document.getElementById('pgId:msgId').setAttribute('style','visibility:hidden');
            }
            return false;
        }
    
    </script>

</apex:page>




User-added image
Nachu RY 4Nachu RY 4
Hi,

Please find the below code.

<apex:page >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('[id$=commandbutton]').click(function(){
                var x = $('[id$=inp]').val();
                var y= $('[id$=inp2]').val();
                if(x == ''){ 
                    $('#par').html(" Name should not blanck") ;
                }
                else{
                    $('#par').html("") ;
                }
                if(y == ''){ 
                    $('#par2').html(" Ageshould not blanck") ;
                }
                else{
                    $('#par2').html("") ;
                }
                return false;  
            });
        });
    </script> 
    <apex:form >
        <apex:pageBlock >
                <div>
                    <div style="float:left;">
                        <label><b>  Name:  </b></label> <apex:inputText label="inputField" id="inp"/>
                        <p id="par" style="color:red;"/>  
                    </div>
                    <div style="clear: both;">
                        <label><b>  Age:  </b></label> <apex:inputText label="inputField" id="inp2"/>                   
                        <p id="par2" style="color:red;"/>  
                    </div>
                    <div style="clear: both;margin-left: 15em;">
                     <apex:commandButton value="save" id="commandbutton" />
                     </div>
                </div>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Thanks.
Subha Ayyappan 7Subha Ayyappan 7
Thanks for your reply.
Below is my code , But the javascript is not stopping when any field is empty. It shows the error for a second(not stops) and saves the record since i am calling this js function in the onclick of the save button. I am also using actionfunction to do the apex function of save.
Can anyone please throw some light?​

function ValidateFields() {
                     var distance = document.getElementById("j_id0:j_id1:frm:Distance1").value;
                     var nxtdistance = document.getElementById("j_id0:j_id1:frm:NxtDistance").value;
                     var drivingtime = document.getElementById("j_id0:j_id1:frm:DrivingTime1").value;
                     var nxtdrivingtime = document.getElementById("j_id0:j_id1:frm:NxtDrivingTime").value;
                     
                    if(distance.length == 0) {
                       document.getElementById("DistanceError").style.display ='';
                       return ;
                      }
                     
                    if(nxtdistance.length == 0) {
                       document.getElementById("NxtDistanceError").style.display ='';
                       return;
                      } 
                    
                      if(nxtdistance.length == 0) {
                       document.getElementById("DrivingTimeError").style.display ='';
                       return;
                      } 
                      
                      if(nxtdistance.length == 0) {
                       document.getElementById("NxtDrivingTimeError").style.display ='';
                       return;
                      } 
}                                            
Abhijeet Anand 6Abhijeet Anand 6
use return false.
Only return will not work.