12

I'm trying to use AMT's new crowd-form HTML elements to create a HIT.

The documentation for <crowd-radio-group> says

The following attributes are supported by this element.

allow-empty-selection

A Boolean switch that, if present, allows no radio button to be checked.

However, even without that attribute, the form is perfectly happy to allow the user to submit without selecting any of the radio buttons in the group.

Can I get it to require a selection using just the HTML elements, or do I need to add validation code and check it myself?

PurpleVermont
  • 1,179
  • 4
  • 18
  • 46
  • Make sure you have NO OTHER HTML CODE within the radio-group. I started using plain HTML for all input. Pretty much the same HTML as mturks, you just need to provide some styling. Also, the provided mturk tags are very inflexible and provide no advanced functionality – Gabriel Petersson Apr 22 '20 at 13:26

1 Answers1

2

You can include a custom script in the design page that validates your form when a user clicks submit.

The code is available on Github, as directed here by a more active community of MTurk requesters on Reddit.

The code is as follows:

function validateForm() {
    var valid = true;
    var radioGroups = document.querySelectorAll("crowd-radio-group");
    for (var i = 0; i < radioGroups.length; i++) {
        var validGroup = false;
        var radioButtons = radioGroups[i].children;
        for (var j = 0; j < radioButtons.length; j++) {
            validGroup = validGroup || radioButtons[j].checked;
        }
        valid = valid && validGroup;
    }
    return valid;
}

window.onload = function() {
    document.querySelector('crowd-form').onsubmit = function(e) {
        if (!validateForm()) {
            alert("Please answer all the questions in order to submit.");
            e.preventDefault();
        }
    }
}

As, you can see, the validateForm() function is invoked on submitting the form which checks if all radio-groups have at least one checked button.The user is alerted if the form is incomplete. Any other necessary custom checks can be placed here.

Shrestha Ghosh
  • 116
  • 1
  • 8