bboyle / form-validation Goto Github PK

Should there be an event for invalid form submission?
Is there an event in the html5 spec? (XForms has one?)
An event to show when the summary is displayed (or its contents change)

Might be required to resize a layout.

Inline alert is not appearing for a set of required radio buttons (but is for others).

may be related to find( '.label, .required' ), as .required is not always present in markup.
consider using abbr[title="(required)"] instead.

            $this.forcesForms( 'label' ).parent().find( '.label, abbr[title="(required)"]' ).eq( -1 ).after( alertElement );

add extra tests for radio buttons and try to reproduce.

error summary (above form) should fade in if not already present

groups should display a single alert at the group level, rather than alerts for individual controls

this matches the submit summary

consider precedence if different errors existed in the group
the most likely scenario is multiple required fields being blank
however it's possible that some fields could have a custom error or pattern mismatch etc.

Improve handling of .invalid class for atomic groups.

After submit, .invalid is applied to invalid questions and groups within a form.

If an atomic group is valid at submit, the group is not classed as .invalid (this is correct)
If an invalid entry is made within the group, the question is classed as .invalid (this is correct)
If an invalid entry is made within the group, the group is not classed as .invalid (this is INCORRECT)

If an atomic group is valid at submit, the group is classed as .invalid (this is correct)
If an invalid entry is corrected, the question is no longer classed as .invalid (this is correct)
If all invalid entries are corrected, the group is no longer classed as .invalid (this is correct)
If an invalid entry is corrected, but invalid questions remain, the group is no longer classed as .invalid (this is INCORRECT)

use of this.name in script causes javascript error when this is a field that has @id and @name of 'name'

If an atomic group contains multiple invalid fields, it will display a single alert message.

If one of those fields is corrected, the alert message is removed.
The alert message should be present (it may need to be updated) until all questions within the atomic group are valid.

A server-side script may insert .status block into the page.

If so, this should be reused instead of adding another .status block for the form error summary.

Consider this grouping of form fields

Postal address (atomic group)

• Address line 1
• Address line 2
• Compact group:
  • Suburb
  • State
  • Postcode

The inline 'must be completed` message should only appear for postal address. It is appearing for the suburb and postcode fields as well.

Example: confirm password, confirm email

Use custom validation. Value must exactly match value of previous field.
Note that the only validity constraint should be the 'confirmation' check.
e.g. If field A is type="email", the confirmation field B should be type="text" and not email.

If the confirmation field is not @required then it may be blank and will be valid.

Confirmation validation should be applied when both fields A and B have values. If only one field has a value, no validation is performed. This is to prevent users from being informed of errors (e.g. passwords do not match) before they even have a chance to type their input!

Blank fields will be handled by required validation, not confirmation validation.

1. Create a form with a radio button group that is required and no item is selected by default
2. Submit the form. One 'must be completed' alert should be shown
3. Submit again. Only one 'must be completed' alert should be shown.

Sometimes multiple errors are appearing. May be an old version of the script and already be fixed.

Test coverage?

Possible cause: the name attribute of each file upload field is identical so all files are included in the email attachment. This is (I believe) a requirement of file upload. Essentially it seems that file upload and the SWE mandatory script aren’t playing nice together.

Clicking on a select list to open it causes options to flash quickly.

Observed in Ubuntu chrome and opera

Validation message: Must be a number—numerals only, no letters or other characters

http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#number-state-(type=number)
Note 'valid floating point number' constraint.

data is stored in forcesForms key

method is named .forcesForms( 'methodName', data )

rename
provide a legacy-API helper function

Use jquery core scrollTop() method

Now that disabled has been added to the polyfill, submission is failing.
Invalid forms are being submitted.

Strange behaviour for required radio buttons (when left blank).

• may show multiple .alert inline warnings
• may not remove inline warnings when a button is checked and or form submitted (after checking a radio button)

Create a set of checkboxes and make them required.

Is the validation performed?
Does validation still work for other form fields?

1. Test a set of required radio buttons
2. Leave out the 'fieldset' element
3. Trigger validation to cause script error

For example: a required field may be display as invalid. The underlying @required might be toggled to make the field valid. There needs to be a way to update the UI to reflect this.

Consider:

$( '.invalid input' ).each(function() {
   this.removeAttribute('required');
}).forcesForms( 'checkValidity' );

where forcesForms( 'checkValidity' ) calls the .checkValidity() on the underlying DOM elements, and then updates the UI.

Useful hook for css.

                <li>
                    <label for="consultationResponse:group:0:question:3:answerTL:value">
                        <small class="instructions relevance">Please answer this question if you answered ‘<samp>No</samp>’ to ‘<var>Q1 Do you own a pet?</var>’</small>
                        <span class="label">Q3 Why don't you own a pet?</span>
                        <abbr title="(required)">*</abbr>
                    </label>
                    <textarea id="consultationResponse:group:0:question:3:answerTL:value" name="consultationResponse:group:0:question:3:answerTL:value" cols="100" rows="5" required="required"></textarea>
                    <small class="hint">Maximum 500 characters</small>
                </li>

Is the problem with the @id values? Are they being quoted in the [for="<id>"] filters?

Calling .forcesForms( 'validate' ) binds submit event handlers.

Calling this repeatedly binds handlers again without first unbinding (or checking if already bound) which causes issues with submit suppression in the submit done handler.

Note that call validate once immediately and a second time 'ondocumentready' might be a problem if the second call unbinds ands rebinds—it may be bound AFTER other dependent handlers that were relying on submit being stopped if invalid fields were present.

Create a required set of radio buttons.
Submit form.
Radio group should be marked invalid.
Check one option.
Inline alert should be removed.
Submit.
Inline alert reappears.
(note summary is correct)

https://developer.mozilla.org/en-US/docs/Web/API/Navigator.vibrate

When 2 (or more) items are invalid in a group, fixing one should not remove the invalid class from the group.

If there form has only one relevant question when validated, the warning message should say 'Please check your answer' instead of 'Please check your answers'.

n.b. watch out for 'atomic group' which also represent a single question.

invalid class is being set on .section wrapper elements, when they are children of .questions

also looks like group should be .group (line 100)

UNIQUE_ID_# is not very nice when seen in URLs
also needs to guarantee uniqueness.

Can type a@b in email field. Change validation thinks this is valid. Submit validation works correctly.

The script relies on specific HTML structures and classnames. When these don't exist, a script error can cause all validation checks to be skipped.

Example: if the script cannot locate the .label associated with an invalid element.

To reproduce, change class="label" to class="lable"

Possible fix: when .label cannot be found (0 elements) use @name or .generateId() fallbacks.

bower should output dist folder, not src
dist should include minified and unminified versions.

provide a custom message for validityState.patternMismatch

Consider typical address pattern:

.atomic.group Residential address:

• Street address (multiple lines)
• .group:
  • Suburb
  • State
  • Postcode
• Country

Allow 'locality' group (Suburb, State and Postcode) to use .group class, but display errors on 'Residential address' level.

Need to rework group, label and alert traversal.

We currently display this:

• Your name: Must be completed
• Your email: Must be an email addresses
• Birth certificate: Your attachments are too large
• Driver licence: Your attachments are too large

When we need something more like this:

• Your name: Must be completed
• Your email: Must be an email addresses
• Your attachments are too large: birth certificate, driver licence

Maybe it should say:

• Your attachments are too large (help)
• And help pops up a lightbox to display the file sizes and offer help?

Use console to setCustomValidity
Submit

Error message should be shown
Summary and alert are saying 'undefined'

scrollTo plugin uses $.browser which has been deprecated