SPUtility not working on Custom edit Form

Question

I have created new Custom Edit Form for one of my List and trying to set Value using SPUtility.js.

I am constantly getting error

Unable to get a SPField named Title(Field Name)

But same piece of code works fine in default Edit/New Form for that List.

SPUtility.GetSPField("Title")

Any Suggestions..

Answer 1

Rendering of Default List Forms & Customize List forms are different. If you want to work SPUtility successfully in your custom list forms, then you have to add some of the tags in your custom list form.

1. Add class in table tag

   • Find your first field <tr> in your custom list form
   • Find it's parent table tag. You get something like below tag: <table border="0" cellspacing="0" width="100%"> modify it as: <table width="100%" class="ms-formtable" style="margin-top:8px;" border="0" cellpadding="0" cellspacing="0">

2. Now go to your field and add below tag before <SharePoint:FormField> tag.

   • <xsl:comment>FieldName="Title" FieldInternalName="Title" FieldType="SPFieldText"</xsl:comment>
   • Replace value in above tag FieldName with Field Display Name, FieldInternalName with Internal Name of the Field, FieldType with Type of the field.

Now you will be able to use SPUtility in your custom list pages also.

Answer 2

Are you including the debug version of the jquery library or the min version? I ran into this problem and found the solution to be a bit strange, but I received this error when using jquery-3.1.0.js and it ran perfectly when using jquery-3.1.0.min.js. I doubt you'd be using the .min.js for one form and the debug version for another, but I thought it was worth sharing my solution in case that's what you are doing.

It's worth noting that even when I included the min.js version in my Content Editor web part, it would still give me the error if I had the debug version included in my master page, since it was loading them both.