search

ericelliott / h5Validate

An HTML5 form validation plugin for jQuery. Works on all major browsers, both new and old. Implements inline, realtime validation best practices (based on surveys and usability studies). Developed for production use in e-commerce. Currently in production with millions of users.
576 stars 125 forks source link

Noob #67

Closed hcshoss closed 11 years ago

hcshoss commented 11 years ago

Fairly sure this is the wrong place to ask for help but... I have a select drop down that toggles 'invalid/red' on click and stays red until a value is selected. The default 'select one..." value= '' and has attribute required="required". I need the 'select' inputs to only validate on form submission. I believe robust examples of the event API would lead me to a solution. However, I cannot find advanced examples (only the basic stuff on the 'home page'). Short of reading/learning the raw code, is there someplace I can retrieve advanced information?

Thx Hoss.

ericelliott commented 11 years ago

Hi Hoss,

Can you post an example on jsfiddle.net?

hcshoss commented 11 years ago

http://jsfiddle.net/hcshoss/QkVbe/2/

ericelliott commented 11 years ago

You can tell it not to validate any form using the formnovalidate attribute, and then implement any custom allvalid calls or logic you decide. You'll need the latest version to do that, though. You might want to pull a fresh copy. =)

hcshoss commented 11 years ago

Well I jumped into the code (lightly, I didnt get past how mSelectors was parsed or deep into the calls: settings.delegateEvents... (L403)).

The quick and dirty solution for me was to add the 'click: false,' to the default options on init like so:

$('#addAccount').h5Validate({ click: false, errorClass: 'h5-ui-state-error' });

However, this my have side effects on radio and/or check boxes. A solution I was playing around with was to beak up the 'mSelectors:' into 2 groups (radio/checkboxes and dropdown seletctors) which the later group would look something like this: (~L75) mDropDown: 'select:not(:disabled):not(.novalidate), option:not(:disabled):not(.novalidate)', dropClick: false, and then add an additional handlers: (~L398) mDropEvents = { dropClick: settings.dropClick } (L405) settings.delegateEvents(settings.mDropDown, mDropEvents, this, settings);

Just food for thought... ~Hoss~

ericelliott commented 11 years ago

Of course it doesn't make sense for us to fork the code to satisfy every edge case. Why do you feel you need this distinction?

hcshoss commented 11 years ago

WOW....

ericelliott commented 11 years ago

What browser are you using? On your example in Google Chrome, it toggles red only after you've made a selection and then re-selected the invalid empty value. That is the expected behavior. If you're seeing something different, then certainly a fix might be warranted.

ericelliott commented 11 years ago

Can you post a fiddle that demonstrates that two different settings are needed for radio/check boxes and select inputs?