Hi,

I am customizing my custom list's NewForm for an OOB application. List has a column for choice(Individual, Team) and people picker to enter employee names.

Based on the selected value for the radio button on my New Form, i need to validate people picker to check if it has multiple values or single value is selected.

I tried to update my JSLink reference by adding another reference of a JS file like -

~sitecollection/Style Library/SpotAwards/app.js|~sitecollection/Style Library/SpotAwards/validation.js

The second file has the validation function as below -

function PreSaveItem()
{   
   if ("function"==typeof(PreSaveAction))
   {
      return PreSaveAction();
   }
   return true;
}


function PreSaveAction() {   
   alert("Test Pre Save validation");
}

But, the above function is not getting called.

Could you please suggest what else can i try to achieve the same ?

T

Hi Kelkars,

I tested the same code in my environment, and it seems that the code in the JS file did not load in the NewForm page if the JS file was uploaded to a library instead of Master Page Gallery library.

If I uploaded the JS file to the Master Page Gallery library, and used JavaScript Display Template content type for the JS file and set the Target Control Type to Form.

After that, published a major version of the JS file and referred to this JS file in the New Form web part: ~site/_catalogs/masterpage/validation.js, then the function worked and I got the alert.

In the JS file, the code should be like this:

(function () {
	var overrideCtx = {};
	overrideCtx.Templates = {};
	overrideCtx.Templates.Fields = {
		'User': {'NewForm': PreSaveItem} //change your field name here
	};	
	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function PreSaveItem()
 {   
    if ("function"==typeof(PreSaveAction))
    {
       return PreSaveAction();
    }
    return true;
 }
 function PreSaveAction() {   
    alert("Test Pre Save validation");
 }

I recommend to upload the JS file to Master Page Gallery and use JavaScript Display Template content type for the JS file, set the Target Control Type to Form and then check the results.

http://www.learningsharepoint.com/2013/06/24/customize-fields-in-newform-aspx-hidedisablepre-populate-with-js-link-in-sharepoint-2013/

http://www.learningsharepoint.com/2013/03/31/uploading-javascript-js-files-as-javascript-display-template-in-sharepoint-2013/

Best regards,

Victoria Xia

Thanks Victoria for your response and sharing the links as well.

The approach suggested by you(placing the js file in master page gallery and changing the content type as JavaScript Display Template) is working and gives the alert.

But, the alert occurs on the page load and not during the submit action.

Could you please let me know if we can modify it to implement the validation on button submit(save action of New List Form) ?

Upon clicking submit button, it should check the value selected in the radio button and accordingly validate the people picker values and show the validation message.

Also, what is he significance of Target Control Type to Form/View/Field ?

I am sorry but looks like there is very less documentation available for the JSlink examples.

Hi Kelkars,

To validate the field in New Item form, you can use code to check this field directly in JSLink file instead of by clicking the save button.

Here is a similar blog about field validation with JSLink for your reference:

http://blog.vgrem.com/2014/03/14/introduction-to-client-forms-validation-in-sharepoint-2013/

The target control type is set for which type of form the JS file should work on.

Best regards,

Victoria Xia