How to add 'required' to the input field base on paragraph class using JQuery or Javascript?

Question

For some reason (I'm sure a good one), Pardot doesn't add 'required' to the input that would allow the visitor to know if the field is necessary before hitting the submit button. Hitting the submit button refreshes my page and closes my popup window. 'Required' is added the the paragraph class, however.

Is there a way to loop through textarea, input, select and add the word 'required' to the input field?

Any help would be appreciated.

  function validateForm() {
  var x = document.forms["pardot-form"]["company"].value;
  if (x == "") {
    alert("Please fill out the required ' * ' fields.");
    return false;
  }
}

<form accept-charset="UTF-8" action="" class="form row" id="pardot-form" method="post" name="pardot-form" onsubmit="return validateForm()">
 <p class="form-field company pd-text col-md-6">
  <label class="field-label" for="">Company Name</label>
  <input class="text" id="" maxlength="255" name="company" onchange="" size="30" type="text" value="">
 </p>
 <p class="form-field email pd-text required col-md-6">
  <label class="field-label" for="">Email Address</label>
  <input class="text" id="" maxlength="255" name="" size="30" type="text" value="">
 </p>
 <p class="form-field country pd-select required col-md-12">
  <label class="field-label" for="">Country</label>
  <select class="select" id="" name="" onchange="">
   <option selected="selected" value=""> </option>
   <option value="">United States</option>
   <option value="">Canada</option>
  </select>
 </p>
 <p class="form-field opted_out pd-checkbox required col-md-6">
  <label class="field-label" for="">Opt-out?</label>
  <span class="value"><span>
  <input id="" name="" onchange="" type="checkbox" value="">
  <label class="inline" for="">yes</label>
  </span></span> </p>
 <p class="form-field favorite_color pd-radio required col-md-6">
  <label class="field-label" for="">What is your favorite color?</label>
  <span class="value"><span>
  <input id="" name="" onchange="" type="radio" value="">
  <label class="inline" for="">blue</label>
  </span></span> </p>
 <p class="form-field comments pd-textarea required col-md-12">
  <label class="field-label" for="1">Tell us more.</label>
  <textarea class="standard" cols="40" id="" name="" onchange="" rows="10"></textarea>
 </p>
 <p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;">
  <label for="pi_extra_field">Comments</label>
  <input id="pi_extra_field" name="pi_extra_field" type="text">
 </p>
 <!-- forces IE5-8 to correctly submit UTF8 content  -->
 <input name="_utf8" type="hidden" value="☃">
 <p class="submit col-md-12">
  <input accesskey="s" type="submit" value="Submit">
 </p>
</form>

You've tagged [tag:jquery] but you haven't used any jQuery in your question, do you really use jQuery? — T.J. Crowder, Apr 26 '19 at 16:56

score 4 · Accepted Answer · answered Apr 26 '19 at 16:55

4

Try to select all the inputs that belong to a form field that has the required class, and set their required property to true.

$('.form-field.required :input').prop('required', true);

answered Apr 26 '19 at 16:55

Taplar

24,788
4
22
35

1

Or if the jQuery tag is erroneous: `document.querySelectorAll(".form-field.required input, .form-field.required textarea, .form-field.required select").forEach(el => { el.required = true; });`, applying [this polyfill](https://stackoverflow.com/questions/46929157/foreach-on-queryselectorall-not-working-in-recent-microsoft-browsers/46929259#46929259) if necessary to support obsolete browsers. – T.J. Crowder Apr 26 '19 at 16:57
Thank you soooo much! This was super helpful! – Katy H. Apr 26 '19 at 17:44

How to add 'required' to the input field base on paragraph class using JQuery or Javascript?

1 Answers1