Validate select element, does not seem to work?

[tmikaeld]

Hi,

I'm trying to validate required on a select element, h5 seem to ignore it, this always returns true: $('#BillingCountry').h5Validate('allValid'); (The element is visible)

<select type="select" name="BillingCountry" id="BillingCountry" required="required">
                          <option>-- Choose Country --</option>
                          <optgroup label="Europe">
                          <option value="SE">Sweden</option>
                          <option value="AX">Aland islands</option>
                          <option value="DK">Denmark</option>
                          <option value="FI">Finland</option>
                          <option value="NO">Norway</option>
                          </optgroup>
</select>

EDIT: Solved by setting -- Choose Country -- to value="". I think this should be a little more flexible, some CMS'es use value="-1" or no value attribute at all.

[ericelliott]

If you choose no value attribute at all, the value is the text string inside the option tag, which satisfies the required condition just fine.

If you want to use value="-1", one way would be to use the validValues feature of h5Validate, which builds a pattern for you that includes only the values you pass to validValues.

[tmikaeld]

I'll try validValues, seem flexible enough. Thanks!

Another question, how do i use markInvalid?

I have setup a step-by-step tab-based form, and need to validate each section. Thus i need to show the user what fields he have missed or is wrong.

[tmikaeld]

By the way, how do i setup the default "non-valid" option for a select element? Is am i supposed to use validValues for all select's?

[ericelliott]

Set value="" on the default and make the select element required, or use validValues.

[ericelliott]

Another question, how do i use markInvalid?

By default, fields will be marked invalid as the user proceeds through the form. When you run allValid, any remaining invalid fields will also be marked.

In the near future, we'll fire an event from the completed call to allValid that you can listen for to get a list of all valid and invalid fields, but this doesn't happen, yet.

[tmikaeld]

Am, am i running markInvalid wrongly? I get no fields marked. http://jsfiddle.net/9stch/

[ericelliott]

Well, yes. That's wrong. markInvalid expects a parameters object so it knows what to do with your stuff. However, that's a pretty nasty internal-looking API with potentially complicated scoping pitfalls for something that really should be super easy to use.

The short answer: $('#BillingCountry').trigger('blur');

Longer answer:

In order to make the API easier to use, more flexible, and maintain efficiency, I'm planning to move h5Validate to a much more event-driven API. I'm working on introducing custom events that can be triggered to programatically validate fields, and get data objects containing a list of all valid and invalid fields out of allValid().

The right way then will be to run: $('#BillingCountry').trigger('validate');

[ericelliott]

Committed fixes for allValid() and added support for the 'validate' custom event trigger:

http://jsfiddle.net/HBSuJ/ http://jsfiddle.net/WsreQ/

[tmikaeld]

Awesome, works perfect! :-) Thanks!