bboyle / form-validation Goto Github PK
View Code? Open in Web Editor NEWValidation UI for web forms
License: MIT License
Validation UI for web forms
License: MIT License
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)
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.
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).
.alert
inline warningsCreate a set of checkboxes and make them required.
Is the validation performed?
Does validation still work for other form fields?
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)
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:
.group
:
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.