Opened 12 years ago

Closed 4 years ago

#6388 closed enhancement (patchwelcome)

required check for other form widgets (checkbox, textarea, etc)

Reported by: guest Owned by:
Priority: high Milestone: 1.13
Component: Dijit - Form Version: 1.1.0
Keywords: validation required checkbox radio select textarea Cc: josh@…, Nathan Toone
Blocked By: Blocking:

Description (last modified by bill)

ValidationTextbox is a great widget for form validation, but to really use dojo for full form validation I think a couple issues need to be addressed. The following objects could use a required="true" attribute for form validation:

MultiSelect, FilteringSelect, ComboBox CheckBox, Radio Textarea, SimpleTextarea

What's nice about ValidationTextbox? is the interface it presents to the user when invalid data is entered. In order to make any of the above required form elements, custom validation coding is needed - unless I missed something???

I believe dojo.validate.check in 0.4 used to support validating some of these items before.

Thanks,

Josh

Change History (18)

comment:1 Changed 12 years ago by guest

Ack - sorry, meant to file as feature request/enhancement - not defect.

comment:2 Changed 12 years ago by bill

Description: modified (diff)
Type: defectenhancement

Hmm I'm not sure exactly what you are asking for, in terms of the UI. Just to flag the field on form submit and display the error that it needs to be filled in, or having the yellow ! mark that appears in the right section like in TextBox? Because I'm not sure how to display that validation icon for Textarea or CheckBox?.

BTW doesn't this already work for ComboBox and FilteringSelect?

comment:3 Changed 12 years ago by guest

I believe ComboBox? and FilteringSelect? do work. I would think TextAreas? could work the exact same way as TextBoxes?. (Show the icon and change color/border if required and user blurs through, or validate is called)

However, radios and checkboxes are more complicated. I would suggest the following:

Create a SelectionGroup? form widget that can validate. It surrounds a group of radios or checkboxes. You could even add some advanced features, such as restricting how many items can be selected. Also, checkboxes should be able to have isValid functions. Here's a contrived Pizza example:

The user has a choice of toppings. They can choose between 1 and 3 toppings. They can only pick one kind of meat.

<div dojoType="dijit.form.SelectionGroup" requireSelected="{min:1,max:3}" errorMessage="You must make between 1 and 3 selections">

<label><input type="checkbox" dojoType="dijit.form.Checkbox" isValid="checkMeatChoices" errorMessage="You can only choose one meat topping!"/>Peperroni</label>

<label><input type="checkbox" dojoType="dijit.form.Checkbox" isValid="checkMeatChoices" errorMessage="You can only choose one meat topping!"/>Sausage</label>

<label><input type="checkbox" dojoType="dijit.form.Checkbox" isValid="checkMeatChoices" errorMessage="You can only choose one meat topping!"/>Salami</label>

<label><input type="checkbox" dojoType="dijit.form.Checkbox"/>Mushrooms</label>

<label><input type="checkbox" dojoType="dijit.form.Checkbox"/>Olives</label>

etc...

</div>

checkMeatChoices simply returns false if the checkbox is checked and more than one meat choice is selected.

So now, when the user checks more than one meat choice, all meat choices are highlighted and next to the checkbox show: "You may only choose one meat topping!"

Also, if they choose more than 3 toppings the whole checkbox group is highlighted in a border and says "You must make between 1 and 3 selections" at the top. If they don't make any choices and try to submit the form, form.validate() is called, and again the SelectionGroup? is highlighted and focused, just like TextBox? elements when you do form.validate()

Also, calling validate on a SelectionGroup? should call validate on each checkbox it the SelectionGroup? itself is valid (requireSelected is not violated).

comment:4 Changed 12 years ago by nathan

Cc: nathan added

I think that's a great suggestion - it's kind of along the lines of the _CombinedFormWidget idea discussed at http://www.dojotoolkit.org/forum/dijit-dijit-0-9/dijit-development-discussion/ideas-enhancements-form-widgets

comment:5 Changed 12 years ago by guest

TextAreas? are my main concern - to be able to validate one as a required field. Radios / Checkboxes are not as critical, though the ideas above are nice. The thought comes to mind that an Editor field also would be nice to have a required attribute. Also it was mentioned that Combobox/FilteringSelect? might already support this - but I'm not sure how.

comment:6 Changed 11 years ago by bill

Milestone: 1.4
Summary: Validation of Other Form Objectsrequired check for other form widgets (checkbox, textarea, etc)

Josh or Nathan, if you want to work on this feel free. That would be great. I'm not opposed to the idea, although not sure sure about the exclamation mark icon on a tall textarea, seems like that would look weird, and also be hard to implement.

comment:7 Changed 11 years ago by guest

I might take a stab at at least a "required" attribute for Textarea and the Select type widgets. I don't see the radios/checks as being used quite as often. I used to use tmt:validator http://www.massimocorner.com/libraries/validator/ which handles all these kinds of validations and then some but I don't like the idea of loading even more JS on top of dojo.

FWIW, dojo.validation.check() I believe still exists in dojox.

comment:8 Changed 11 years ago by Nathan Toone

Cc: Nathan Toone added; nathan removed

comment:9 Changed 11 years ago by bill

Milestone: 1.41.5

bumping 1.4 tickets to 1.5, and most 1.3 tickets to 1.4

comment:10 Changed 11 years ago by dante

+1 from me. Seems like required="true" on Textarea makes a lot of sense.

comment:11 Changed 11 years ago by thekryz

Hi there,

I am looking forward to textarea validation, but I want to subscribe for the need of a validator for radio buttons as well! In my case, I need to validate, if one of the radio buttons has been selected. "Guest" suggested 10 months ago to use a SelectionGroup?, but by checking http://api.dojotoolkit.org/jsdoc/dijit/1.2/dijit.form and my Dojo 1.2.3 folder it doesn't seem to exist (any more?) - so PLEASE add required for radios somehow. We could split the ticket up into two if that's more convenient.

My problem is not to code a validation for radios, but to make it look Dojo-stylish.

comment:12 Changed 11 years ago by Douglas Hays

Owner: set to Douglas Hays

comment:13 Changed 11 years ago by Douglas Hays

Milestone: 1.5future

see also #8963

comment:14 Changed 10 years ago by Johnathon Harris

We have created a simple extension of Textarea which supports validation where some input is required (originally based on some code from http://www.harelmalka.com/?p=137). We use this within a dijit Form where the submit button is not active while any validation widget is invalid.

It would be good to have this officially supported in future releases.

dojo.provide("custom.form.ValidationTextarea");

dojo.require("dijit.form.Textarea");
dojo.require("dijit.form.ValidationTextBox");

dojo.declare(
  "custom.form.ValidationTextarea",
  [dijit.form.ValidationTextBox,dijit.form.Textarea],
  {
    invalidMessage: "This field is required",

    postCreate: function() {
      this.inherited(arguments);
    },

    validate: function() {
      this.inherited(arguments);
      if (arguments.length==0) this.validate(true);
    },

    validator: function(/*anything*/value, /*dijit.form.ValidationTextBox.__Constraints*/constraints){
      // Override base behavior of using a RegExp, it is unnecessarily complex and fails on multiple lines
      // contained in a Textarea.
      return !this._isEmpty(value);
    },

    _onInput: function() {
      this.inherited(arguments);
      // Validate as you type, means any widgets which depend on this get updated without user
      // having to click elsewhere to trigger onBlur.
      this.validate();
    },

    onFocus: function() {
      if (!this.isValid()) {
        this.displayMessage(this.getErrorMessage());
      }
    },

    onBlur: function() {
      // Force the popup of the invalidMessage.
      this.validate(false);
    }
   }
);

Can be used like this:

<textarea id="question" name="question"
  dojoType="custom.form.ValidationTextarea" required="true"></textarea>

comment:15 Changed 9 years ago by bill

Component: DijitDijit - Form

comment:16 Changed 6 years ago by Douglas Hays

Owner: Douglas Hays deleted
Status: newassigned

comment:17 Changed 6 years ago by Douglas Hays

Status: assignedopen

comment:18 Changed 4 years ago by dylan

Milestone: future1.12
Resolution: patchwelcome
Status: openclosed

Given the lack of interest over the past 5+ years, I'm closing as patchwelcome. Please re-open if you want to create a pull request.

Note: See TracTickets for help on using tickets.