Making Form Fields Required Dynamically Using JavaScript

[Anonymous]

We are using a solution that hides form fields on our landing pages and instead poplulates them with data from an external database.  Data is populated only if there is a match based on what the user enters in the default visible fields. If the database doesn't find a match then hidden fields are exposed for user entry.  In order to make the solution work smoothly, the hidden fields have to be set as "not required" as a default.  

My question is, does anyone know of a javascript (or other) method to make specific form fields required?

The desired functionality would be: upon the database not finding a match and as a result exposing the hidden fields being exposed, another js function could be called that would change the now visible fields to being "required" versus their default "not required" setting.  Any ideas are appreiated ...

[Anonymous]

It looks like the only things that makes a Marketo required field different from a non-required one are two CSS classes. One is "mktFormReq" on the li "container" for the input field, and the second is "mktFReq" on the input element itself. If you add these using .addClass(), it should make them required.

[Anonymous]

Thanks Jason.  As you've described it there are 2 things that need to happen. First, make the asterisk indicating required show and then have the field invoke the required field error from Marketo if left blank. Taking the example below, in order to make the "City" field updated to look like the required field "LastName" I would have to use the jScript code below?

Required Field -- Fine As Is
 

<li class='mktFormReq mktField' ><label>Last Name</label><span class='mktInput'><input class='mktFormText mktFormString mktFReq' name="LastName" id="LastName" type='text' value="" maxlength='255' tabIndex='3' /><span class='mktFormMsg'></span></span></li>

Not Required Field -- Needs .addClass()

<li class='mktField' ><label>City</label><span class='mktInput'><input class='mktFormText mktFormString' name="City" id="City" type='text' value="" maxlength='255' tabIndex='5' /><span class='mktFormMsg'></span></span></li>

JScript to Update Class

<script>
$jQ(document).ready(function(){
$jQ('input#City').parents('li').addClass('mktFReq mktFormReq');

});
</script>

[Anonymous]

To close the loop. I had to use the following code to make this work:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("#City").parents('li').addClass("mktFormReq");

    $("#City").addClass("mktFReq");

  });

</script>

I then call this code from the database function that is triggered when a match isn't found.

[Anonymous]

Nice work...sorry I didn't respond but always better when you get to make the core work yourself! 🙂