List Item required field: Change of form element Title attribute?

Question

In my SP Online (2013) site I have some heavily customised list input forms, the input fields of which I have been quite happily referencing using jQuery using the following syntax:

$('input[title="IncidentStatus"]').val($nextStageValueParam);

and so on...

Anyway, today (Monday 27th Jan 2014), these forms' rendering started to fail despite previously having been OK. On closer investigation, I narrowed down the issue to those fields which I have marked as 'required' when defining the SP column.

Drilling down into the DOM I notice that the title attribute for the mandatory fields is now suffixed with the string 'Required Field', example below:

<select id="ctl00_ctl41_g_9f8b1d26_1bb4_4f9f_b081_2e5349ec8998_ff21_ctl00_Lookup" class="fg_initial" title="IncidentStatus Required Field" name="ctl00$ctl41$g_9f8b1d26_1bb4_4f9f_b081_2e5349ec8998$ff21$ctl00$Lookup" fgid="fg_incidentBranch"></select>

Now thankfully, this is fairly straightforward to resolve by using the jQuery 'begins with' attribute selector (e.g.

$('input[title^="IncidentStatus"]').val($nextStageValueParam);

)

Has anyone else experienced a similar problem recently? Is is something I should have been aware about?

Answer 1

Seems like this has caused a fair bit of angst amongst the dev community working with SP Online and far greater minds than mine have devoted blog posts to the whys and wherefores, but the change is real and here to stay - on the grounds of accessibility for screen readers etc. etc.

There's a couple of ways I got around this:

Firstly you could change your field references, thus:

$('input[title="IncidentStatus Required Field"]')

Secondly, change your field references to use the jQuery 'starts with' attribute selector, thus:

$('input[title^="IncidentStatus"]')

Thirdly, I have used the following self envoking function within a common library to cycle through the field titles and then strip out the 'Required Field' string as appropriate, thus:

(function fixfields(){ //this self involking function removed the Required Field portion of the field title to ensure all old code works OK
    console.log("Fixing Required Field titles");
    $("[title$=' Required Field']").each(function()
    {
    console.log("Fixing: " + $(this).attr("title"));
    $(this).attr("title",$(this).attr("title").replace(" Required Field",""))
    });

})();

(courtesy Mark Rackley on Marc D Anderson's blog (http://sympmarc.com/2014/01/23/office-365-update-changes-display-name-on-required-fields/comment-page-2/#comments)