+ Start a Discussion
dEEPIKA SALESFORCEdEEPIKA SALESFORCE 

Field level validation using apex and jquery

<apex:page >
  
  <apex:form >
  
  <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
 $(document).ready(function() {

    $("#name").focusout(function() {
       
         var value =$('#name').val();
         
          if(value==""){
          
                   $('#name_Error').html(" name is Required!");

          }else{
           $('#name_Error').empty();
          
          return true;
          }
    });

});
</script>
</head>
<body>


 <input type="text"  id="name"/><span id="name_Error" class="Errormessage"></span>
 
 <br/>
<apex:inputText styleClass="form-control" html-placeholder="Name"  id="name" /><span id="name_Error" class="Errormessage"></span>

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

Hi , here iam using the html input  , the jquery is working , when iam using the apex:input text, the value is not working ?? may i get any solution ?
Best Answer chosen by dEEPIKA SALESFORCE
Maharajan CMaharajan C
Hi deepika,

use the  "[id$=name]"   instead of   "#name" then it work

Please try the below changes:

<apex:page >
  
  <apex:form >
  
  <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
 $(document).ready(function() {

    $("[id$=name]").focusout(function() {
         var value =$("[id$=name]").val();

         
          if(value==""){
          
                   $("[id$=name_Error]").html(" name is Required!");

          }else{
           $("[id$=name_Error]").empty();
          
          return true;
          }
    });

});
</script>
</head>
<body>
 
 <br/>
 <apex:inputText styleClass="form-control" html-placeholder="Name"  id="name" /><span id="name_Error" class="Errormessage"></span>

</body>
</html>

Thanks,
Maharajan.C

All Answers

Maharajan CMaharajan C
Hi deepika,

use the  "[id$=name]"   instead of   "#name" then it work

Please try the below changes:

<apex:page >
  
  <apex:form >
  
  <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
 $(document).ready(function() {

    $("[id$=name]").focusout(function() {
         var value =$("[id$=name]").val();

         
          if(value==""){
          
                   $("[id$=name_Error]").html(" name is Required!");

          }else{
           $("[id$=name_Error]").empty();
          
          return true;
          }
    });

});
</script>
</head>
<body>
 
 <br/>
 <apex:inputText styleClass="form-control" html-placeholder="Name"  id="name" /><span id="name_Error" class="Errormessage"></span>

</body>
</html>

Thanks,
Maharajan.C
This was selected as the best answer
Avinash GangadhareAvinash Gangadhare
Hi Deepika,

Salesforce gives some dynamic id's to apex: elements used in VF page while rendering so its good to use styleclass instead of id to apex: elements and use $('.classname') as selector in javascript.

<apex:page >
  <apex:form >
  <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
 $(document).ready(function() {
    $(".name").focusout(function() {
         var value =$('.name').val();
          if(value==""){
                   $('.Errormessage').html(" name is Required!");
          }else{
           $('.Errormessage').empty();
                   return true;
          }
    });
});
</script>
</head>
<body>
<apex:inputText styleClass="form-control name" html-placeholder="Name" /><span id="name_Error" class="Errormessage"></span>
</body>
</html>
dEEPIKA SALESFORCEdEEPIKA SALESFORCE
Thank you  @Maharajan C   and @Avinash Gangadhare... both are worked... thanks a lot.... 

thanks 
deepika