1

I need to force the user to enter a (sometimes) mandatory parent value before allowing them to proceed with the actual form. This is dynamic UI form powered by Angular 2. I am confused because sometimes the given parent value is not required. How could it be best handled.

Should I:

  1. Create a modal with mandatory select on loading the page.
  2. Hide the actual form until the first parent value I am looking for is selected.
  3. Just add it to the form & validate on submit and be done with it.
  • TBH 3, Or mix in 2 as the form is disabld... and clicking the form pops a baloon on the required field "You missed this dude..." – Tomer W Jan 31 '17 at 15:27
  • The first aspect to consider is if the child is required in the case the parent is not. If is not, option 2 is the obvious choice. Option 3 is not a good choice, you will make the user search an option that maybe is hidden. Option 1 is not useful if the parent value is not required. – Madalina Taina Feb 1 '17 at 18:58
  • What do you mean by sometimes mandatory parent? On what basis do you decide a certain field is mandatory or not? I wonder if you could work more on the hierarchy. – Sol Apr 7 '17 at 6:29
1

Here's four steps in filling out this form.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

In step 3 someone has checked the "free gift" checkbox but has not entered an address, so the "Address" field is highlighted and marked as required.

The JavaScript to make this happen can be:

var freegift = document.getElementById('freegift')
freegift.addEventListener('click', function (evt) {
  if ( evt.target.checked && '' === document.getElementById('address') ) {
    document.getElementById('addresslabel').style.color = 'red'
    document.getElementById('addressalert').style.display = 'inline'
  }
})

When the form is finally submitted the form is checked again for completeness. The JavaScript to make this happen can be:

var userinfoform = document.forms['userinfo']
userinfoform.addEventListener('submit', function (evt) {
  if ( 
    evt.target.elements['freegift'].checked && 
    '' === evt.target.elements['address'] 
  ) {
    evt.preventDefault();
    alert('Please provide an address for your free gift!')
    document.getElementById('addresslabel').style.color = 'red'
    document.getElementById('addressalert').style.display = 'inline'
  }
})

Then when the form data is received on the server, check it yet again to make sure you have an address if the "free gift" checkbox value is defined. If not, return the user to the form with the fields prefilled with the information provided and flag the "Address" field.

window.onload = function () {
  var freegift = document.getElementById('freegift')
  var address = document.getElementById('address')
  if ( freegift.checked && '' === address.value ) {
    document.getElementById('addresslabel').style.color = 'red'
    document.getElementById('addressalert').style.display = 'inline'
  }
}

Here's a JSFiddle with more detail.

| improve this answer | |
0

It would be useful to have more background about that mandatory value.

Without much context, a modal is a pattern that forces the user to focus in just one thing before they can continue with the main journey, so maybe in that case it would be nice to use it.

| improve this answer | |
  • Lets take a simple case of state and city combo - when the user selects state then we load a list of cities for him to select. So here the first value is needed to create a full form. This page will be used to enter 50-ish "TYPES" of values and not all Types require this mandatory field. – Avinash Feb 1 '17 at 6:54
0

You can make use of progressive disclosure interaction pattern - while hiding the form fields until the field you want the user is filled. This way, the user can see the entire form, but will be unable to progress/ complete until what you asked for is filled.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.