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...............................:)

Use PreSaveAction method for conditional client side validation using a list form SharePoint 2013

It is possible to check validation of list fields before the save button is clicked on a list form:

Suppose, We have a list form like below:

If the Save button is pressed, a method named PreSaveAction() is always executed by default. You can just write a function named as PreSaveAction in a .js file and link the file to the desired list form.

You can place all your validation code in the method as shown in the section below. These validations are client side validation using jquery.

function PreSaveAction()
{
    //--List Field HRBP 
    if($('#ctl00_SPWebPartManager1_g_840570ae_f359_466e_b37c_b99ae98c9690_ff21_ctl00_ctl00_UserField').text().trim() =="")
    {
$('#vld-hrbp').show();
$('#vld-hrbp').css('color','red');
return false;
    }
    else
    {
    $('#vld-hrbp').hide();
    }
     
    //---List Field Hiring Manager
    if($('#ctl00_SPWebPartManager1_g_840570ae_f359_466e_b37c_b99ae98c9690_ff31_ctl00_ctl00_UserField').text().trim() == "")
         {
      $('#vld-hrmanager').show();
      $('#vld-hrmanager').css('color','red');
      return false;
         }
    else
         {
    $('#vld-hrmanager').hide();
$('#vld-hiring-depatment').hide()
        }

}

Happy SharePointing........................:)