Form
From BC$ MobileTV Wiki
(Redirected from Validation)
Contents
Form Processing
Form processing is an important capability that must be handled both securely and reliably by any website or web service.
Input
Input is the actual data being passed from an HTML (or WAP, xHTML or SemanticForms) form, to the server-side processing script or language (which may be written in PHP, JAVA, Python, Ruby, C#, Visual Basic, etc...)
Radio Buttons
- Radio Buttons in PHP: http://www.homeandlearn.co.uk/php/php4p10.html PHP and Radio Buttons
Checkboxes
- PHP Foundations (checkboxes & multi-input forms): http://www.onlamp.com/pub/a/php/2003/03/13/php_foundations.html?page=last&x-maxdepth=0
Form Validation
Form validation is the important process of checking and validating the input of a web form before processing it.
Client-side validation
It is important to valid the form input both before passing it to the server (on the client, through client-side languages such as JavaScript) and after receiving it at the server, but before changing the state of any stored objects or processing any further commands, programs or applications (in the server-side language such as JSP, ASP, PHP, ColdFusion, Ruby, Python, etc).
- JSfiddle -- bcmoney - JS form validation .vs. HTML5 pattern "attribute" validation: https://jsfiddle.net/bcmoney/abc123/show
- Validate.js: http://rickharrison.github.io/validate.js/
- jQuery plugin -- validation: https://jqueryvalidation.org/
- Parsley.js -- client-side validation library: http://parsleyjs.org/
- Vue.js tutorial - Form Validation: https://dzone.com/articles/vue-tutorial-5-form-validation | SRC
HTML5 pattern
The pattern attribute is a mechanism added to HTML5 for specifying valid formats of certain input fields (text, email, password, etc).
- HTML5 pattern - RegEx examples: http://html5pattern.com/
- MozDev -- HTML5 Form Validation: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation
- MozDev -- HTML5 Form Validation - ValidityStates: https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
[6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25]
Server-side Validation
- Server-Side Validators Using Functional Interfaces: https://dzone.com/articles/server-side-validator-using-functional-interfaces | SRC
Tools
- ACCOUNT NUMBER VERIFICATION (JS): https://www.azcode.com/Mod10/
- Credit card validation extension (jQuery Validation plugin): http://www.ihwy.com/labs/jquery-validate-credit-card-extension.aspx
Resources
- Test Credit Card Account Numbers: https://www.paypalobjects.com/en_US/vhelp/paypalmanager_help/credit_card_numbers.htm
- COMPLETE Forms Processing Tutorial (Send, Pass, Call, Get): http://www.skytopia.com/project/articles/compsci/form.html
- Form processing in PHP (including how to process checkboxes as arrays): http://www.webcheatsheet.com/php/form_processing.php?print=Y
- Your First PHP (form for email submission): http://www.thesitewizard.com/archive/feedbackphp.shtml
- Forms in PHP - Intro Tutorial: http://www.onlamp.com/pub/a/php/2003/03/13/php_foundations.html
- Clean and Pure CSS Forms: http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
- PHP Processing Web Forms: http://dev.fyicenter.com/faq/php/php_processing_web_forms.php
- Form Handling with PHP - Lesson 3 - More Complex Forms & Messages: http://apptools.com/phptools/forms/forms3.php
Styling
- WTF, forms?: http://wtfforms.com (friendlier HTML form controls with a little CSS magic. Designed for IE9+, as well as the latest Chrome, Safari, and Firefox.)
- Sexy CSS Hover Button (using images): http://blog.nublue.co.uk/css-hover-button/
- Bold CSS Buttons: http://www.dynamicdrive.com/style/csslibrary/item/bold_css_buttons/
- Why to NOT use a Text Link to Submit a HTML Form: http://stateofaffairs.info/archive/not-use-text-link/
- CSS button - Using CSS to style your web buttons and widgets: http://cssbutton.com/forms/
- Image buttons made simple: http://www.isocra.com/2008/06/image-buttons-made-simple/
- About image buttons in HTML forms and multi-line texts in normal submit buttons: http://www.cs.tut.fi/~jkorpela/forms/imagebutton.html
Validation
Client-Side validation
- JavaScript Validation tutorial by Apple Developers Resources: http://developer.apple.com/internet/webcontent/validation.html
- JavaScript - Submit The Form When The User Presses Enter: http://www.htmlcodetutorial.com/forms/index_famsupp_157.html
- DHTML Forms validation: http://www.berthou.com/us/2007/11/23/dhtml-forms-validation/
Server-Side validation
- PHP Form Validation: http://htmlcenter.com/blog/php-form-validation/
- Form Validation with PHP: http://www.php-mysql-tutorial.com/form-validation-with-php.php
- Java -- SimpleValidation lib: https://github.com/timboudreau/simplevalidation (SimpleValidation project, used in NetBeans and originally hosted on kenai.com[27])
Tutorials
- Luhn validation algorithm explained: https://sites.google.com/site/abapexamples/javascript/luhn-validation
- Credit Card Validation on the client: http://www.breakingpar.com/bkp/home.nsf/0/87256B280015193F87256CC70060A01B
- JavaScript Credit Card Validation Function: http://www.braemoor.co.uk/software/creditcard.shtml
- PHP Credit Card Validation Function: www.braemoor.co.uk/software/creditcard.php
- PHP Tip - Validating a Credit Card: http://www.codeguru.com/cpp/i-n/internet/security/article.php/c15307/PHP-Tip-Validating-a-Credit-Card.htm
- How to Code a Signup Form with Email Confirmation: https://code.tutsplus.com/tutorials/how-to-code-a-signup-form-with-email-confirmation--net-6860
- How to Create A Multi-Step Signup Form With CSS3 & jQuery: http://webexpedition18.com/articles/how-to-create-a-multi-step-signup-form-with-css3-and-jquery/
- Trigger a button click with JavaScript on the Enter key in a text box: https://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box
- How to prevent form from being submitted?: https://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted
- How do I check if a JavaScript parameter is a number?: https://stackoverflow.com/questions/6441787/how-do-i-check-if-a-javascript-parameter-is-a-number#6441804
- I Want my Label to Vertically Align With my Input Field: https://stackoverflow.com/questions/15193848/i-want-my-label-to-vertically-align-with-my-input-field
- Data Validation – How to Validate Forms using HTML5: https://www.script-tutorials.com/data-validation-html5/ (using HTML/JS/CSS)[28][29][30][31]
- Pure HTML5 input validation: http://www.the-art-of-web.com/html/html5-form-validation/ (use the pattern attribute, for instance validating "Email" you can use <input type="email" pattern="^\S+@\S+\.\S+$" required aria-required="true" />)[32][33][34][35]
- How to Find or Validate an Email Address: http://www.regular-expressions.info/email.html (and why a Regular Expression can only be an "approximation" at best)
- Password Validation using regular expressions and HTML5: http://www.the-art-of-web.com/javascript/validate-password/
- Prevent both blur and keyup events to fire after pressing enter in a textbox: https://stackoverflow.com/questions/11143011/prevent-both-blur-and-keyup-events-to-fire-after-pressing-enter-in-a-textbox#11143098
- Accessible CSS Forms -- Using CSS to Create a Two-Column Layout: www.websiteoptimization.com/speed/tweak/forms/
- Form formatting - center form and align its fields to the left: https://stackoverflow.com/questions/8736079/form-formatting-center-form-and-align-its-fields-to-the-left
- CSS - Two Column Form: https://stackoverflow.com/questions/5736936/css-two-column-form
- How do I align a label and a textarea?: https://stackoverflow.com/questions/1839403/how-do-i-align-a-label-and-a-textarea
- How TO - Responsive Form (using display: table;): https://www.w3schools.com/howto/howto_css_responsive_form.asp
- How to Build a Responsive Form With Flexbox: https://webdesign.tutsplus.com/tutorials/building-responsive-forms-with-flexbox--cms-26767
- How to Align Form Elements with Flexbox: https://www.quackit.com/css/flexbox/tutorial/align_form_elements_with_flexbox.cfm
External Links
- wikipedia: Luhn algorithm
- 16-Digit length check: http://jsfiddle.net/WHKeK/
- Option grouping for multi-select form: https://stackoverflow.com/questions/12352421/option-grouping-for-multi-select-form?rq=1
- How to to store multi-dimensional form data?: https://stackoverflow.com/questions/6259033/how-to-to-store-multi-dimensional-form-data?rq=1
- How to get multiple selected values from select box in JSP?: https://stackoverflow.com/questions/2407945/how-to-get-multiple-selected-values-from-select-box-in-jsp
- Making Compact Forms More Accessible: https://alistapart.com/article/makingcompactformsmoreaccessible
- Exploring accessible form patterns for the web: http://www.frontendadventure.com/web/exploring-accessible-form-patterns-for-the-web/ | DEMO ("hover label" that dynamically repositions as you switch between form inputs)
References
- ↑ Inline Validation in Web Forms: https://alistapart.com/article/inline-validation-in-web-forms/
- ↑ Detecting Locale: https://mzabriskie.silvrback.com/blog/detecting-locale
- ↑ MozDev -- NavigatorLanguage.languages: https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/languages
- ↑ Best way to determine user's locale within browser: https://stackoverflow.com/questions/673905/best-way-to-determine-users-locale-within-browser
- ↑ Detect foreign language support using JavaScript: https://www.techrepublic.com/article/detect-foreign-language-support-using-javascript/
- ↑ Constraint Validation -- Native Client Side Validation for Web Forms: https://www.html5rocks.com/en/tutorials/forms/constraintvalidation/
- ↑ HTML5 Form Validation With the “pattern” Attribute: https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute--cms-25145
- ↑ Building HTML5 Form Validation Bubble Replacements: https://www.telerik.com/blogs/building-html5-form-validation-bubble-replacements
- ↑ Creating A Custom HTML5 Form Validation: https://girliemac.com/blog/2012/11/21/html5-form-validation/
- ↑ Why you should be using HTML5 form validation - a tour: https://pageclip.co/blog/2018-02-20-you-should-use-html5-form-validation.html
- ↑ HTML5 form required attribute - Set custom validation message?: https://stackoverflow.com/questions/5272433/html5-form-required-attribute-set-custom-validation-message
- ↑ Provide custom validation messages using setCustomValidity in HTML 5 pages: http://sanalksankar.blogspot.com/2010/12/custom-validation-message.html
- ↑ Form required attribute with a custom validation message in HTML5: https://www.geeksforgeeks.org/form-required-attribute-with-a-custom-validation-message-in-html5/
- ↑ Fun with HTML Form Validation Styles: https://tylergaw.com/articles/fun-with-html-form-validation-styles/
- ↑ Why is Chrome showing a “Please Fill Out this Field” tooltip on empty fields?: https://stackoverflow.com/questions/5392882/why-is-chrome-showing-a-please-fill-out-this-field-tooltip-on-empty-fields
- ↑ How can I change or remove HTML5 form validation default error messages?: https://stackoverflow.com/questions/10361460/how-can-i-change-or-remove-html5-form-validation-default-error-messages
- ↑ HTML5 -- formnovalidate attribute to skip validation on individual fields in a FORM: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fs-formnovalidate
- ↑ Form Validation –- Part 1 - Constraint Validation in HTML: https://css-tricks.com/form-validation-part-1-constraint-validation-html/
- ↑ Form Validation –- Part 2 - Form Validation Part 2: The Constraint Validation API (JavaScript) : https://css-tricks.com/form-validation-part-2-constraint-validation-api-javascript/
- ↑ Form Validation –- Part 3 - A Validity State API Polyfill: https://css-tricks.com/form-validation-part-3-validity-state-api-polyfill/
- ↑ Form Validation –- Part 4 - Validating the MailChimp Subscribe Form: https://css-tricks.com/form-validation-part-4-validating-mailchimp-subscribe-form/
- ↑ email_validation.js: https://gist.github.com/badsyntax/719800
- ↑ RegEx to fully validate RFC822 email addresses: http://instantbadger.blogspot.com/2006/08/regex-to-fully-validate-rfc822-email.html
- ↑ How to validate an email address using a regular expression?: https://stackoverflow.com/questions/201323/how-to-validate-an-email-address-using-a-regular-expression/1903368#1903368
- ↑ Form Validation UX in HTML and CSS: https://css-tricks.com/form-validation-ux-html-css/
- ↑ OWASP Validation Regex Repository: https://owasp.org/www-community/OWASP_Validation_Regex_Repository
- ↑ How to Quickly Add Validation Code to Swing UIs: https://dzone.com/articles/how-quickly-add-validation
- ↑ Simple Inline Form Validator with Pure Javascript: https://www.cssscript.com/simple-inline-form-validator-with-pure-javascript/
- ↑ Minimal HTML5 Form Validation Library – okjs: https://www.cssscript.com/minimal-html5-form-validation-library-okjs/
- ↑ A Simple HTML5 Form Validation: https://jsfiddle.net/girlie_mac/X6Uuc/
- ↑ Pure javascript HTML5 text type number range validation: https://stackoverflow.com/questions/33025240/pure-javascript-html-5-text-type-number-range-validation
- ↑ Quick Tip - Easy form validation with HTML5: https://tutorialzine.com/2014/12/quick-tip-easy-form-validation-with-html5
- ↑ A Simple HTML5 Form Validation: https://jsfiddle.net/girlie_mac/X6Uuc/
- ↑ HTML5 Form Validation: https://www.sitepoint.com/html5-form-validation/
- ↑ Using novalidate: https://jsfiddle.net/ianoxley/9C2JD/
See Also
Security | Validation | Email | PHP | JSP | Java | JS | Upload
