CODEWITHSUNDEEP
qooxdoo
Nasorenga
Nasorenga

Reputation: 61

How can I make a SelectBox required in qooxdoo?

How can I force a user to make a selection from a qooxdoo SelectBox? I would like the SelectBox to initially appear with an empty selection (or better yet, a "Please select..." message). I would like form validation to fail if the user has not made a selection, and the selectBox to appear with the red "invalid" decoration and "required" tooltip, just like a required textField.

Similarly for RadioButtonGroup: is there a way to make the group initially appear with no button selected, and not become valid until a selection is made?

Later... this seems to work for the SelectBox case:

var genderSlct = new qx.ui.form.SelectBox();
genderSlct.add(new qx.ui.form.ListItem("")); // initially selected null item
genderSlct.add(new qx.ui.form.ListItem("Male", null, "M"));
genderSlct.add(new qx.ui.form.ListItem("Female", null, "F"));
...

myForm.getValidationManager().setValidator(function(items) {
    var valid = true;

    if (genderSlct.getSelection()[0].getModel() == null) {
        genderSlct.setValid(valid = false);
        genderSlct.setInvalidMessage("Please select your gender.");
    }   
    ...   

    if (valid) {
        genderSlct.setValid(true);
        ...
        return true;
    } else {
        return false;
    }   
});

Later still... Found a solution for the RadioButtonGroup as well:

To get that initial unselected state, add an invisible first listItem with null model:

myRbg.add(new qx.ui.form.RadioButton("").set({
     model: null, visibility: "excluded"
}));

Then add the same style of code as for the selectionBox to the form validator.

Upvotes: 1

Views: 451

Answers (1)

Martin Wittemann
Martin Wittemann

Reputation: 2116

Check out this demo which offers exactly which your looking for in the SelectBox case: http://demo.qooxdoo.org/2.0.1/demobrowser/index.html#data~Form.html

You can simply check for the selection in the validator.

Upvotes: 0

Related Questions