compose-form-up - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

lib/validation.js

@@ -24,6 +24,4 @@ // Dependencies
 
-    Event.on( document.body, {
-      invalid: function( event ) { event.preventDefault() },  // Suppress default message bubbles
-      submit: submit
-    })
+    document.addEventListener( 'invalid', function( event ) { event.preventDefault(); }, true )
+    Event.on( document.body, 'submit', submit )
 
@@ -103,5 +101,9 @@ // Watch input events
   // Set a custom validation message for word count
-  if ( input.dataset.minWords ) checkCount( input, 'min' )
-  if ( input.dataset.maxWords ) checkCount( input, 'max' )
+  var message = checkCount( input, 'min' )
+             || checkCount( input, 'max' )
+             || checkValue( input ) 
+             || ''
 
+  input.setCustomValidity( message )
+
   return input.checkValidity()
@@ -111,18 +113,27 @@
 
+function checkValue( input ) {
+  var invalid = input.dataset.invalidValue
+
+  if ( invalid && input.value.match( new RegExp('^'+invalid+'$', 'i') ) ) {
+    return input.dataset.invalidValueMessage || "Cannot equal '"+invalid+"'"
+  }
+}
+
 // Test custom validation for maximum or minimum words present
 function checkCount ( input, limit ) {
 
-  var goal         = input.dataset[ limit + 'Words' ],
-      lessThanGoal = wordCount( input.value ) < goal
+  var goal = input.dataset[ limit + 'Words' ]
 
-  var phrasing     = ( limit == 'min' ) ? 'at least ' : 'no more than ',
-      valid        = ( limit == 'min' ) ? !lessThanGoal : lessThanGoal,
-      message      = '';
+  if ( goal ) {
 
-  // Set a custom error message
-  if ( input.value && !valid )
-    message = 'Please write ' + phrasing + goal + ' words.'
+    var lessThanGoal = wordCount( input.value ) < goal
+        phrasing     = ( limit == 'min' ) ? 'at least ' : 'no more than ',
+        valid        = ( limit == 'min' ) ? !lessThanGoal : lessThanGoal
 
-  input.setCustomValidity( message )
+    // Return a custom error message
+    if ( input.value && !valid )
+      return 'Please write ' + phrasing + goal + ' words.'
+  }
 
+
 }
@@ -129,0 +140,0 @@

package.json

 {
   "name": "compose-form-up",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A lightweight HTML5 form validation utility",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -36,3 +36,3 @@ # FormUp
 } else {
-  // For is not valid
+  // Form is not valid
 }
@@ -46,2 +46,23 @@ ```
 
+### Custom Validation Messages
+
+Inputs can have custom validation messages with the
+`data-message` attribute. 
+
+This input uses the pattern attribute to check for a valid email address and then the `data-message` attribute to use a custom message if the field is invalid.
+
+```
+<input type="email" pattern="([^@]+@[^@]+\.[a-zA-Z]{2,}|)"
+data-message="Please enter a valid email address."
+required="required" value="">
+```
+
+### Custom Validation helpers
+
+- `data-max-words="3"` - Ensure no more than 3 words are entered.
+- `data-min-words="3"` - Ensure at least 3 words are entered.
+- `data-invalid-value="superman"` - Superman cannot be entered.
+- `data-invalid-value-message="Invalid value: superman"` - Sets a custom error message when a value matching the `data-invalid-value` is set.
+
+
 ## Progressive Forms
@@ -48,0 +69,0 @@

test/test.js

@@ -39,2 +39,22 @@
 
+    it( 'tests invalid values', function() {
+
+      var input = utils.addInput( fieldsetOne, { 'data-invalid-value': '[e-mail]' })
+
+      setValue( input, '[e-mail]' )
+      isInvalid( input )
+      formUp.validate( form )
+      assert.equal( input.parentNode.textContent, "Cannot equal '[e-mail]'" )
+
+      input.dataset.invalidValueMessage = 'Email address already registered'
+      formUp.validate( form )
+      assert.equal( input.parentNode.textContent, "Email address already registered" )
+
+      setValue( input, '[e-mail]' )
+      isValid( input )
+
+      fieldsetOne.removeChild( fieldsetOne.lastChild )
+
+    })
+
     it( 'tests maximum words', function() {
@@ -41,0 +61,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21665

increased by8.37%

Lines of code

451

increased by4.64%

Number of lines in readme file

120

increased by21.21%

No dependency changes