SOLVED

Customizing the Form required field using JQuery/JavaScript

Go to solution
RaguPrashanth
Level 2

Customizing the Form required field using JQuery/JavaScript

Hi Team,

 

  1. We have to customize the From field (mandatory/required) to hide/show for a specific group of people. We have done this using Javascript.
  2. After hiding this Form field (mandatory/required) we are getting an error like "This field is required."  on the form submission.
  3. 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

2 ACCEPTED SOLUTIONS

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Customizing the Form required field using JQuery/JavaScript

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
Level 10 - Community Moderator

Re: Customizing the Form required field using JQuery/JavaScript

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

7 REPLIES 7
SanfordWhiteman
Level 10 - Community Moderator

Re: Customizing the Form required field using JQuery/JavaScript

There are a few errors in your initial code:

  1. You should be using the name attribute to locate inputs, not the id.
  2. You should be scoping the search to the current Marketo form (using whenRendered and find or element.querySelectorAll), not the entire document.
  3. 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
Level 2

Re: Customizing the Form required field using JQuery/JavaScript

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
Level 10 - Community Moderator

Re: Customizing the Form required field using JQuery/JavaScript

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

RaguPrashanth
Level 2

Re: Customizing the Form required field using JQuery/JavaScript

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>

​

Alert_Message.jpg

 

Last Name Form Field.JPG 

 

 

SanfordWhiteman
Level 10 - Community Moderator

Re: Customizing the Form required field using JQuery/JavaScript

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
Level 2

Re: Customizing the Form required field using JQuery/JavaScript

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
Level 10 - Community Moderator

Re: Customizing the Form required field using JQuery/JavaScript

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"
  });
});