Validation or control form from JQuery - Default New and Edit forms

When you create a custom list, you get default edit and new forms with it. So when you are entering data or modifying it SharePoint provides you a form in a popup that enables you to enter or modify data.

But then, if you want to add custom features to the new or edit form, you can do so using JQuery. In the below example, based on the valued selected in the dropdown list, I want to enable or disable other control. And I want to add this JQuery code to the New and Edit forms of the custom list.

function HideColumn(stat, active) 
{  
        var activeObj = $("input[title='" + active + "']");
        
       //initially when the user opens the form, we need to check if the user has selected the status that we have written code for…
       //if selected value is other than Suspend, disable the control
        var initialVal = $("select[title='"+ stat +"']").find('option:selected').text();
        if(initialVal == 'Suspend')
        {$(activeObj).attr('disabled', false)}
        else
        {$(activeObj).attr('disabled', true)}

         //Now handle dropdown list’s change event. In this event we will check what is the selected value of the ddl, based on the value, we enable or disable the control…
 $("select[title='"+ stat +"']").change(function() 
 { 

  var selectedValue = $("select[title='"+ stat +"']").find('option:selected').text();
 
         if(selectedValue == 'Suspend') 
  {
              $(activeObj).attr('disabled', false)
          }
  else {
       $(activeObj).attr('disabled', true)
              }
 });
}

$(document).ready(function() {HideColumn('Status', ' Active');} ); 

In the above example, I have written a function HideColumn which will be called when the document is ready. The parameters to this function are the column names of dropdown list – ‘Status’ and other control which we want to enable/disable.

Now when the user opens the form in edit mode, the status ddl is already selected. At this time, we want to make sure based on the selected value, we change the state (enable/disable) of the other control. In SharePoint you are not aware of the ‘Id’ property of the control. Or this property will be having some junk value. But what you can depend on is the ‘Title’ property. So by passing the title property, we can create the control object.

var activeObj = $("input[title='" + active + "']");

You can get the selected text of the drop down list by using the find method as below.

var initialVal = $("select[title='"+ stat +"']").find('option:selected').text();

Once you are done with enabling and disabling the control at start up, you have to attach change event handler to the status drop down list.

$("select[title='"+ stat +"']").change(function(){});

This function will fire every time you change the value in the drop down list. Now based on the selected value, you can enable or disable the other control.


Now, how do you put this on to the new and edit form? Well go to the list tab, click on ‘Form Web Parts’ and select ‘Default New form’. In the form, click on add web part, click on ‘Media and Content’. Add ‘Content Editor’ web part.

Now in the ‘Editing Tools’ – ‘Format Text’ tab, click on ‘HTML’ – ‘Edit HTML Source’. Paste you JQuery code in this popup dialog. Don’t forget to set the chrome type to ‘None’ in the web part properties.

Follow the same steps to configure JQuery code in the edit form also.

Happy SharePointing...

-Vighnesh