Added credit card validation and fixes for issue victorjonsson#127

Author: victorjonsson

README.md

@@ -38,18 +38,17 @@ particular form.
 </script>
 ```
 
-### Moving up to version 2.0
+### Support for HTML5
 
-So what has changed since version 1.x?
+Since version 2.2 you can use this plugin as a fallback solution for the validation attributes in the HTML5 spec.
+Add the module `html5` to the module string and you can use the following native features:
+
+**Attributes**: require, pattern, maxlength, min, max, placeholder
+
+**Input types**: url, date, time, email, number
+
+**Elements**: Use the element `datalist` to create input suggestions
 
- * A whole bunch of validation functions have been added (see below).
- * A modular design have been introduced, which means that some validation functions is default and others is
- part of a module. This in turn lowers server and bandwidth costs.
- * You no longer need to prefix the validation rules with "validate_".
- * Error message position now defaults to "element".
- * The optional features (validateOnBlur and showHelpOnFocus) is now enabled by default.
- * The function $.validate(config) is introduced to reduce the amount of code that has to be written when initiating the form validation.
- * Demos and full documentation is now available at http://formvalidator.net/
 
 ### Default validators and features (no module needed)
  * **url**
@@ -75,7 +74,9 @@ Read the documentation for the default features at [http://formvalidator.net/#de
 ### Module: security
  * **spamcheck**
  * **confirmation**
- * **strength** — *Validate the strength of a password (strength strength3)*
+ * **creditcard**
+ * **CVV**
+ * **strength** — *Validate the strength of a password*
  * **backend** — *Validate value of input on server side*
 
 Read the documentation for the security module at [http://formvalidator.net/#security-validators](http://formvalidator.net/#security-validators)
@@ -299,9 +300,11 @@ it calls jQ func **$.formUtils.validateInput** to validate the single input when
 * This plugin now serves as a html5 fallback. You can now use the native attributes to declare which type
 of validation that should be applied.
 * Use a template for error messages when having errorMessagePosition set to top
+* Added validation of credit card number and CVV to the security module
 * Event onElementValidate added
 * Use the attribute data-validation-confirm to declare which input that should be confirmed when using validation=confirmation (issue #112)
 * Validation "required" now supports inputs of type radio
+* $.validateForm is now deprecated, use $.isValid instead
 
 
 #### 2.1.47

form-validator/date.dev.js

@@ -10,7 +10,7 @@
  *
  * @website http://formvalidator.net/#location-validators
  * @license Dual licensed under the MIT or GPL Version 2 licenses
- * @version 2.1.56
+ * @version 2.1.63
  */
 (function($) {
 

form-validator/file.dev.js

@@ -10,7 +10,7 @@
  *
  * @website http://formvalidator.net/
  * @license Dual licensed under the MIT or GPL Version 2 licenses
- * @version 2.1.56
+ * @version 2.1.63
  */
 (function($, window) {
 
@@ -45,7 +45,6 @@
                 $.each(files, function(i, file) {
                     valid = false;
                     mime = file.type || '';
-                    alert(mime);
                     $.each(allowedTypes, function(j, type) {
                         valid = mime.indexOf(type) > -1;
                         if( valid ) {

form-validator/file.js

@@ -19,6 +19,10 @@
             width: 375px;
         }
 
+        button, input[type="submit"], .button {
+            margin-bottom: 8px;
+        }
+
         /* While server is being requested */
         form.validating-server-side {
             background: #F2F2F2;
@@ -170,6 +174,7 @@
             <label class="control-label">File validation</label>
             <input type="file" name="some-file1" class="form-control"
                    data-validation="size mime required"
+                   data-validation-size-error-msg="The file cant be larger than 100kb"
                    data-validation-error-msg="You must upload an image file"
                    data-validation-allowing="jpg, png, ico"
                    data-validation-max-size="100kb" />
@@ -180,7 +185,9 @@
             <input type="file" multiple="multiple" name="some-file2" class="form-control"
                    data-validation="size mime required length"
                    data-validation-length="min2"
-                   data-validation-error-msg="You must upload at least two image files"
+                   data-validation-size-error-msg="The images may be max 100kb"
+                   data-validation-length-error-msg="You have to upload at least (two) images"
+                   data-validation-error-msg="You have to upload at least two images"
                    data-validation-allowing="jpg, png, ico"
                    data-validation-max-size="100kb" />
         </div>
@@ -213,8 +220,19 @@
                 <input type="checkbox" name="box" value="5" /> 5
             </label>
         </div>
-        <p>
+        <p style="line-height: 200%">
             <input type="submit" class="button">
+            <br />
+            <button class="button" type="button"
+                    onclick="alert('From a is ' + ( $('#form-a').isValid({}, {}, false) ? 'VALID':'NOT VALID'));">
+                Test validation via js (<strong>without error messages</strong>)
+            </button>
+            <br />
+            <button class="button" type="button"
+                    onclick="alert('From a is ' + ( $('#form-a').isValid() ? 'VALID':'NOT VALID'));">
+                Test validation via js (showing error messages)
+            </button>
+            <br />
             <input type="reset" class="button">
         </p>
     </form>
@@ -285,7 +303,14 @@ <h2>HTML5 attributes</h2>
         </div>
         <div class="form-group">
             <label class="control-label">pattern="^([a-z]+)$"</label>
-            <input type="text" pattern="^([a-z]+)$" required="required" />
+            <input type="text" name="some-colorz" list="some-colorz" pattern="^([a-z]+)$" required="required" />
+            <datalist id="some-colorz" style="display: none">
+                <option value="Green">Green</option>
+                <option value="Blue">Blue</option>
+                <option value="Red">Red</option>
+                <option value="Black">Black</option>
+                <option value="White">White</option>
+            </datalist>
         </div>
         <p>
             <input type="submit" class="button">

form-validator/form-test.html

@@ -17,14 +17,14 @@
  *
  * @website http://formvalidator.net/
  * @license Dual licensed under the MIT or GPL Version 2 licenses
- * @version 2.1.56
+ * @version 2.1.63
  */
 (function($, window) {
 
     "use strict";
 
-    var SUPPORTS_PLACEHOLDER = 'placeholder' in document.createElement('input'),
-        SUPPORTS_DATALIST = 'options' in document.createElement('datalist');
+    var SUPPORTS_PLACEHOLDER = 'placeholder' in document.createElement('INPUT'),
+        SUPPORTS_DATALIST = 'options' in document.createElement('DATALIST');
 
     $(window).bind('validatorsLoaded formValidationSetup', function(evt, $form) {
 
@@ -92,10 +92,13 @@
                     attrs['data-validation-length'] = 'max'+$input.attr('maxlength');
                 }
 
+                console.log($input.html());
                 if( !SUPPORTS_DATALIST && $input.attr('list') ) {
+                    console.log($input.attr('list'));
                     var suggestions = [];
                     $('#'+$input.attr('list')+' option').each(function() {
-                        suggestions.push($(this).attr('value'));
+                        var $opt = $(this);
+                        suggestions.push($opt.attr('value') || $opt.text());
                     });
                     $.formUtils.suggest( $input, suggestions );
                 }