Hello,

JavaScript was changed significantly in the Forms Layout Designer.

First, jQuery is no longer imported by default so you would either need to use vanilla JavaScript or import the jQuery library via JavaScript.

Second, the JavaScript is now sandboxed meaning it cannot interact directly with the page elements. Any interactions must be done through methods available in the LFForm object, so it is not possible to manually show/hide elements or insert HTML content.

Based on your code and what's available in the LFForm object, I don't think there's currently a way to replicate the exact same functionality in the new designer.

However, you could probably get the error messages working without JavaScript by utilizing multiple Custom HTML fields (instead of dynamically changing the content) in combination with the more advanced Field Rule options available in the new layout designer.

As for using the code in the Classic Designer, I would try attaching the event handler to the change event rather than the blur event so it only gets triggered on a change rather than any time the field loses focus.

Additionally, I would move your compareFields method out of the document ready event.

Something like this:

$(document).ready(function() {
  // Trigger the comparison when Field 1 or Field 2 lose focus
  $('.field1 input, .field2 input').on('change', function () {
        compareFields();
  });
});

function compareFields() {
    $('.Submit').show();
    $('.warningText').remove();

    var field1 = $('.field1 input').val();
    var field2 = $('.field2 input').val();

    // Check if field 2 has a value
    if (field2 !== '') {
      // Compare Field 1 and Field 2 values
      if (field1 !== field2) {
        $('<p class="warningText"><font color="red">Field 1 and Field 2 do not match.</font></p>').insertAfter('.field2 input');
      }
    } else {
      $('<p class="warningText"><font color="red">Field 2 must not be empty.</font></p>').insertAfter('.field2 input');
    }
}