Customizing the Form required field using JQuery/JavaScript

RaguPrashanth · ‎02-23-2024

Hi Team,

We have to customize the From field (mandatory/required) to hide/show for a specific group of people. We have done this using Javascript.
After hiding this Form field (mandatory/required) we are getting an error like "This field is required." on the form submission.
We have added a code like below:

$('#persona').removeAttr ('required'); -> To remove required attribute
$('#Lblpersona').remove(); -> To remove label div
$('#persona ').remove(); -> To remove input div

Regards,

Ragu

SanfordWhiteman · ‎02-28-2024

It’s frustrating to have to create a demo page because you won’t provide one. But here’s that exact code running fine: https://cdpn.io/pen/debug/abxoeGr/0bc39e6798134d52fab1879867b28185.

There’s no issue with the code. [object Object] is the default toString() output for a JS Object. The LastName field is hidden as expected.

View solution in original post

SanfordWhiteman · ‎03-01-2024

Yes, if you have a !important override you may have to do more. I would set the display: none !important on the element style, rather than unnecessarily removing classes:

fieldRowJq[0].style.setProperty("display","none","important");

Below code is added to assign the value for the hide field Persona.

fieldJq.attr('value', 'Customer');

That’s not the correct way to set form fields (and you definitely should not be doing it in the unrequireField function, that's not what it's for!).

Use the standard Forms 2.0 method:

MktoForms2.whenRendered(function(renderedForm){
  unrequireField(renderedForm, "Persona", { alsoHide: true }); 

  renderedForm.setValues({
     Persona: "Customer"
  });
});

View solution in original post

SanfordWhiteman · ‎02-24-2024

There are a few errors in your initial code:

You should be using the name attribute to locate inputs, not the id.
You should be scoping the search to the current Marketo form (using whenRendered and find or element.querySelectorAll), not the entire document.
You should be using Marketo’s internal jQuery, not an external copy.

Also, you’re referring to “removing the input div” but it’s not a <div> at all, it’s an <input> by definition!

Call this function, unrequireField(), to set a field to not required and optionally hide its entire row:

/**
 * Programmatically unrequire a Marketo form field
 * @author Sanford Whiteman
 * @version v1.1 2023-01-25
 * @license Hippocratic 3.0: This license must appear with all reproductions of this software.
 *
 */
function unrequireField(mktoForm, fieldName, options = {}){    
  const defaultOptions = {
    alsoHide: false
  };

  options = Object.assign(defaultOptions, options);

  const formJq = mktoForm.getFormElem();
  const fieldJq = formJq.find(`[name="${fieldName}"]`);

  if(!fieldJq.length) {
    return;
  }

  const fieldRowJq = fieldJq.closest(".mktoFormRow");
  const fieldWrapperJq = fieldJq.closest(".mktoFieldWrap");
  const fieldDescriptorJq = fieldJq.closest(".mktoFieldDescriptor");

  fieldJq.removeAttr("aria-required");
  fieldJq.removeClass("mktoRequired");
  fieldWrapperJq.removeClass("mktoRequiredField");
  fieldDescriptorJq.data("mktoFieldDescriptor").required = false;

  if(options.alsoHide){
    fieldRowJq.hide();
  }
};

In your case call it like:

MktoForms2.whenRendered(function(renderedForm){
  unrequireField(renderedForm, "persona", { alsoHide: true });
});

RaguPrashanth · ‎02-26-2024

Hi

Thanks for sharing the JS.

We have tested the JS as mentioned below. But we are still unable to achieve it.

Receiving an [object object] is what the mktoForm is receving in the unrequireField function.

Separate JS files were created for the code 'unrequireField()' and MktoForms2.whenRendered, which was then called in the LP Meta tag section.

SanfordWhiteman · ‎02-26-2024

Supply your URL, please. The correct code is demoed here.

RaguPrashanth · ‎02-28-2024

Hi,

I have share the HTML code of the LP and attached the Form Field (Last Name) and Alert Message for [Object.Object].

 <html>
<head>  
    <title>My Test LP</title>    
</head>

<body>
  <script src="//*******.mktoweb.com/js/forms2/js/forms2.min.js"></script> 
  <form id="mktoForm_1234">
  </form> 
  <script>MktoForms2.loadForm("//*****.mktoweb.com", "******", 1234);</script>
  
	<script>
	function unrequireField(mktoForm, fieldName, options = {}){    
	  const defaultOptions = {
		alsoHide: false
	  };

	  options = Object.assign(defaultOptions, options);

	  const formJq = mktoForm.getFormElem();
	  const fieldJq = formJq.find(`[name="${fieldName}"]`);

	  if(!fieldJq.length) {
		return;
	  }

	  const fieldRowJq = fieldJq.closest(".mktoFormRow");
	  const fieldWrapperJq = fieldJq.closest(".mktoFieldWrap");
	  const fieldDescriptorJq = fieldJq.closest(".mktoFieldDescriptor");

	  fieldJq.removeAttr("aria-required");
	  fieldJq.removeClass("mktoRequired");
	  fieldWrapperJq.removeClass("mktoRequiredField");
	  fieldDescriptorJq.data("mktoFieldDescriptor").required = false;

	  if(options.alsoHide){
		fieldRowJq.hide();
	  }
	};

	  MktoForms2.whenRendered(function(renderedForm){
	  unrequireField(renderedForm, "LastName", {alsoHide: true});
          alert("renderedForm==="+renderedForm)
	});
	</script>
</body>
</html>

SanfordWhiteman · ‎02-28-2024

It’s frustrating to have to create a demo page because you won’t provide one. But here’s that exact code running fine: https://cdpn.io/pen/debug/abxoeGr/0bc39e6798134d52fab1879867b28185.

There’s no issue with the code. [object Object] is the default toString() output for a JS Object. The LastName field is hidden as expected.

RaguPrashanth · ‎02-29-2024

Hi Sanford,

Thanks for the JS code.

We have re-checked the LP code and found that the additional attribute "display: flex !important;" was applied to the class "mktoFormRow".

So we added additional code "fieldRowJq.removeClass("mktoFormRow");" to remove it. Now its working as expected.

And we are trying to save the persona value by default "Customer", but after form submission the contact the value for Presona is blank.

Below code is added to assign the value for the hide field Persona.

fieldJq.attr('value', 'Customer');

SanfordWhiteman · ‎03-01-2024

Yes, if you have a !important override you may have to do more. I would set the display: none !important on the element style, rather than unnecessarily removing classes:

fieldRowJq[0].style.setProperty("display","none","important");

Below code is added to assign the value for the hide field Persona.

fieldJq.attr('value', 'Customer');

That’s not the correct way to set form fields (and you definitely should not be doing it in the unrequireField function, that's not what it's for!).

Use the standard Forms 2.0 method:

MktoForms2.whenRendered(function(renderedForm){
  unrequireField(renderedForm, "Persona", { alsoHide: true }); 

  renderedForm.setValues({
     Persona: "Customer"
  });
});

Customizing the Form required field using JQuery/JavaScript

Customizing the Form required field using JQuery/JavaScript

Re: Customizing the Form required field using JQuery/JavaScript

Re: Customizing the Form required field using JQuery/JavaScript

Re: Customizing the Form required field using JQuery/JavaScript

Re: Customizing the Form required field using JQuery/JavaScript

Re: Customizing the Form required field using JQuery/JavaScript

Re: Customizing the Form required field using JQuery/JavaScript

Re: Customizing the Form required field using JQuery/JavaScript

Re: Customizing the Form required field using JQuery/JavaScript

Re: Customizing the Form required field using JQuery/JavaScript