Customizing Required Fields with JavaScript

Note: This section applies to classic forms. For CSS and Javascript in the Form Designer, see this section.

The form designer allows you to specify which fields in your form are required or not required. If a field is required, users cannot submit the form without filling that field. Here, we provide examples of how you can customize behavior related to required fields.

Dynamically Make a Field Required or Optional

You can insert custom JavaScript that makes a normally required field optional if a certain checkbox or radio button is selected. In this example, we have a checkbox that is assigned the custom class checkbox. We also assign the custom class req to all fields that we want to make required if the checkbox is selected. In our example, this class contains just the signature field. These custom classes allow us to insert the appropriate HTML around the signature field to make it required (or not) depending on whether the checkbox is selected.

The following JavaScript snippet implements this dynamic behavior:

$(document).ready(function () {
    $('.checkbox input').change(function () { 
        if ($(this).is(':checked')) { //if box is selected
            $('.req label').append('<span class="cf-required">*</span>');
            $('.req input').attr('required', 'True');
        } else { //if box is not checked
            $('.req span.cf-required').remove();
            $('.req input').removeClass('required').removeAttr('required');
        }
    })
});

$('.checkbox input').change is triggered when the checkbox's input is changed. If a change happens, then one of two options happens:

• If the box is selected, the appropriate HTML is added to make the field required.
• If the box is not selected, any HTML that specifies that the field is required is removed.

If you need to pick out one radio button or checkbox among multiple buttons or checkboxes in the same field, use the button or checkbox's id instead of using this. For example, in the screenshot below, we have used Chrome's Developer Tools to highlight the part of the HTML code that corresponds to the "No" radio button. In that snippet, we can see that the id of that button is Field6-1. Consequently, if we want to make another field required if "No" is selected, then we would use $('#Field6-1').is(':checked') in line 3 of the JavaScript snippet, rather than $(this).is(':checked').

Note: When using JavaScript to dynamically make fields required or not, avoid setting the fields in question as "Required" on the form designer Layout page.  This minimizes any potentially problematic interactions between the two different ways of making fields required.

Hide "Next" Button on Paginated Form Until Required Fields Completed

If you have a multi-page form, you may want users to fill out all the required fields on one page before proceeding to the next page.

First, make sure that your form uses a progress bar instead of tabs (so that users cannot click to other tabs at their own will). Then, insert the following JavaScript snippet:

$(document).ready(function(){
  $("#form1").change(validate); //run validate function if anything on form changes
  validate();
  $('.cf-next-btn').click(validate); //run validate function when next button clicked
  $('.cf-prev-btn').click(validate); //run validate function when previous button clicked
  function validate() {
    //exclude hidden fields when validating fields with parsley
    if ($("#form1").parsley({excluded:":hidden"}).isValid()) {
      $('.cf-next-btn').show(); //show next button if form valid
    }
    else {
      $('.cf-next-btn').hide(); //hide next button if form not valid
    }
  }
})

The snippet ensures that the form is validated (using the validate function defined in the snippet) whenever one of the following events happens:

• When the document finishes loading
• When any changes are made to inputs
• When the "Next" button is clicked
• When the "Previous" button is clicked

Validation means that, among other things, required fields are checked to make sure that they have been filled in. To validate, the JavaScript snippet uses a function that does the following:

• Uses the Parsley library to check that the fields on the current page have been filled out according to requirements. Hidden fields are excluded from this check.
  • If the page inputs are valid, the "Next" button is shown.
  • If the page inputs are not valid, the "Next" button is hidden.