SharePoint 2013 List Form Validation and List Control Events by using Jquery

The purpose of this writings is to generate jquery events on the basis of id of a particular list field. Our first target should be to select and get the id of a form field as shown below:

Select the control to get the Id

People Picker/User Field Focus Out/Changed Event Using Jquery

Catch focus out event of a user field as follows:

$("#ctl00_SPWebPartManager1_g_840570ae_f359_466e_b37c_b99ae98c9690_ff171_ctl00_ctl00_UserField").focusout(function()

{

    /* To get the first people picker in the form */

var eEntityData

 =$('#ctl00_SPWebPartManager1_g_57601f17_1a6d_471e_8c5e_d12b25ea3114_ff31_ctl00_ctl00_UserField_containerCell').find('div').eq(1) 

if (eEntityData.length > 0 ) 


      {   
          $('.hrm-depatment').show(100);

      }

}

Check Radio Button Checked Event

Do Something for a radio button checked option:

if ($('#ctl00_SPWebPartManager1_g_68a0d33a_a74a_4692_9dd9_d2fa635d4771_ff121_ctl00_ctl00').is(":checked")

||  $('#ctl00_SPWebPartManager1_g_68a0d33a_a74a_4692_9dd9_d2fa635d4771_ff121_ctl00_ctl01').is(":checked"))                
  
   {
        $('.OtherCompany').show(100);
   }    

Check DropDown Selected Indexed Changed Event

Dropdown changed event in jquery can be done using the corresponding column name:

 $("select[title^='Employer']").change(function()
   {
           if ($(this).val() == "Shovon")

   {                            
                             $('.divTitle').show(100);
                             $('.divLevel').show(100);
                     }
    }

Catch Text Changed Event of a Input Text Field in List Form

It is as simple as drop-down but only using the id this time:


$('#ctl00_SPWebPartManager1_g_68a0d33a_a74a_4692_9dd9_d2fa635d4771_ff221_ctl00_ctl00').change(function()
     {                              
               $('.answer4-class').show(100);                                            
     });


The same thing can be done by using the field name of the text field:

$("[title^='Question4']").change(function()


    {
          $('.answer4-class').show(100); 
    }


Thats all for today. Happy SharePointing...............................:)