Form Validation with Dropdown

[CelineBen]

I have this dropdown element in my form and I'm not quite sure how to make sure an item is selected using Semantic-UI Form Validation.

<div class="field">

<div class="ui selection dropdown">

<input type="hidden" name="month">

<div class="text">Month</div>

<i class="dropdown icon" ></i>

<div class="menu ui transition hidden">

<div class="item" data-value="1">January</div>

<div class="item" data-value="2">February</div>

<div class="item" data-value="3">March</div>

etc...

</div>

</div>

</div>

In the list of validation rules, I have:

month: {

identifier : 'month',

rules: [{

type   : 'empty',

prompt : 'Please enter a month'

}]},

Could someone tell me what should be written as the type instead of 'empty'? I did not find anything in the doc that corresponded to this issue. 

[CelineBen]

Here is a jsfiddle: http://jsfiddle.net/CelineBen/B28S9/2/

It actually works but the error message does not update automatically like on the text input fields which is somewhat confusing. I placed both types so it is easier to compare.

[CelineBen]

The error on the dropdown field does not update unless I click on Submit again, whereas the error on the text field updates properly as soon as the value entered is correct (without clicking on Submit). 

[ I modified the jsfiddle because I had the same rule twice on the first name: http://jsfiddle.net/CelineBen/B28S9/3/ ]

[Jack Lukic]

Hi, thanks. I understand completely now. 

Yes this is a bug

https://github.com/Semantic-Org/Semantic-UI/blob/master/src/modules/behavior/form.js#L204

This line for attaching events for form change is #203 here

      if(type == 'checkbox' || type == 'radio') {
        return 'change';
      }

should be this line instead



    if(type == 'checkbox' || type == 'radio' || type == 'hidden') {
       return 'change';
    }

Will have to fix in next patch.

You can try it out manually if you need a fix immediately.

On Tue, Mar 11, 2014 at 8:16 AM, CelineBen <celine.b...@gmail.com> wrote:

The error on the dropdown field does not update unless I click on Submit again, whereas the error on the text field updates properly as soon as the value entered is correct (without clicking on Submit). 

[ I modified the jsfiddle because I had the same rule twice on the first name: http://jsfiddle.net/CelineBen/B28S9/3/ ]

--
You received this message because you are subscribed to the Google Groups "Semantic UI" group.
To unsubscribe from this group and stop receiving emails from it, send an email to semantic-ui...@googlegroups.com.
To post to this group, send email to seman...@googlegroups.com.
Visit this group at http://groups.google.com/group/semantic-ui.
For more options, visit https://groups.google.com/d/optout.

[Jack Lukic]

I also recommend using inline field for the dropdown or a 'fluid dropdown' to keep the error pointing correctly.

http://jsfiddle.net/BE2b4/1/

[CelineBen]

Alright. Thank you very much for your help ! :)

[CelineBen]

I actually have another question.

If you have three dropdown fields in your form: month, date, year, is there a way to then validate the date using the semantic-ui from validation?