default step is 1. Decimals require special step.

https://codepen.io/cferdinandi/pen/MorBEp

I tested it on Firefox PC, then Safari on Mac OS. Now just retested it.
Finally also tested on iPad and iPhone, everywhere same result.
Now the subscription widget on your blog works magic.

Now to see the two fields popping, you have to submit two different errors in email field or fix the blur to onblur which then gets the event listener to work.

Alternatively you first enter a mistake email like “mistake”, then “mistake@“ or “mistake@c.” and it looks like further down:

var validityObjProperties = ["badInput", "patternMismatch", "rangeOverflow", "rangeUnderflow", "stepMismatch", "tooLong", "tooShort", "typeMismatch", "valid", "valueMissing"];

var supported = function () {
      var input = document.createElement('input');
      if('validity' in input) {
        var supportObj = { lackSupport: false, unsupportedProps: [] };
        for(var i = 0; i < validityObjProperties.length; i++) {
          var validityProp = validityObjProperties[i];
          var isPropSupported = validityProp in input;
           if(!isPropSupported) { 
              supportObj.lackSupport = true;
              supportObj.unsupportedProps.push(validityProp);
           }
        }
      }

  return supportObj;
};

Via Konstantin

Add section on Feature Requests

Had to replace the line in validate.destroy:
var fields = document.querySelectorAll(settings.errorClass)
with
var fields = document.querySelectorAll('.' + settings.fieldClass);

Currently commented out, so loading for everyone

When working with required radios in IE, you always get an error. I've included the polyfill script as well. See attached gif and test case.

Test case: https://codepen.io/alexcarpenter/pen/BOawNy

Browserstack test

In validate.init() you attach a listener to the blur event, with capturing set to true, like so:

document.addEventListener('blur', blurHandler, true);

But in validate.destroy() that same listener is removed with capturing set to false:

document.removeEventListener('blur', blurHandler, false);

Should capturing be set to true when removing the listener, in order to be consistent? Pardon me if I'm wrong. Maybe it doesn't matter?

In older versions of IE, it throws an error even when a checkbox is selected.

Please tell me how to display an error message inside the <span class="input__text"></span> field, as shown in the example?

<span class="input__text">
	  <span class="input__label">Name</span>
	  Error message: <span id="error" class="input__error"></span>
</span>

Thank you
Test case: https://jsfiddle.net/cferdinandi/yhqepa3x/

Hide supporting text if not needed

I'm using Rails 5 and rails-ujs and had to do a few things to get this library running smoothly:

rails-ujs (a javascript driver added by rails) attaches its own submit event listeners to the document. When a form with data-remote=true is submitted, the rails-ujs event listener kicks in and submits the form via ajax. This prevents the submit listener added by validate.init() from 'running'.

To fix this I had to two things:

1 - Use capturing. I had to change from the following:

document.addEventListener('submit', submitHandler, false);

to this:

document.addEventListener('submit', submitHandler, true);

2 - Stop propagation on failed validation:

// Prevent form from submitting if there are errors or submission is disabled
if (hasErrors || settings.disableSubmit) {
  event.preventDefault();
  event.stopPropagation();
}

Now everything works fine.

It's worth pointing out, that the blur handler and click handler are not affected by rails-ujs at all, they work as expected, it's just the submit handler that fails to do run when a form is submitetd via XHR.

No api to validate complete form, return boolean if form looks good or if form has error show all of them.

Test case: https://jsfiddle.net/yhqepa3x/1/

error message from textarea don't disappear when value is not empty anymore and error message is appended on every focus.

Hi there!

I'm replacing the standard form validation in my company, and this seems like a great fit! There's one thing i'm unsure about though: custom and/or variable error messages per input. Often we use messages like "You need to fill out your last name" for example. "last name" here is variable, it only holds true for 1 particular field. I tried doing something like this:

beforeShowError: function (field, error) {
    // error would be "You need to fill out your {label}"
    error.replace('{label}', field.getAttribute('data-label'));
}

But it didn't change the error message. In fact, I can't seem to change the error message at all in the event callbacks. I think the problem is the fact that you don't know what error 'type' is going to show. What I did now is add this for each error type in the hasError function:

// If too short
if (validity.tooShort) {
    if (field.getAttribute('data-error-tooshort')) {
        return field.getAttribute('data-error-tooshort');
    } else {
        return localSettings.messageTooShort.replace('{minLength}', field.getAttribute('minLength')).replace('{length}', field.value.length);
    }
}

But it feels a bit hacky, is there some way of adding it into event callbacks?

Thank you!

Hi,

the submit handler does not remove previous errors that were fixed. When the user makes another attempt to submit it would be useful to reduce the errors to only show those that are persisting.

Or is this behavior intentional?

Regards,
Micha

Just started playing with the plugin. Really nice, thanks.

I'm using the disableSubmit: true to stop the form being submitted if not validated. Is there a way to pass a disabled attribute to the submit input when it's not validated? Functionally it work, bit it would just be nice to provide a visual indicator that the form cannot be submitted.

Unless I'm missing a way to do this already?

Hi, there seem to be some problems with checkboxes and radios on your demo page These impact different browsers in different ways.

Chrome 61 Mac - Radio buttons
Selecting 'Yes' is valid, selecting 'No' is invalid

Safari 11 Mac - Radio buttons
'Yes' and 'No' are both invalid

Firefox 55. - Radio buttons
'Yes' and 'No' are both invalid

Chrome 61 - Checkboxes
Only "Wolverine" is valid

Safari 11 - Checkboxes
No options are valid

Firefox 55 - Checkboxes
No options are valid

validityState-polyfill.js:L19 is currently:

var type = field.getAttribute('type') || input.nodeName.toLowerCase();

.. but should IMO be:

var type = field.getAttribute('type') || field.nodeName.toLowerCase();

Hey there, firstly - love the package, it's wicked!

Not sure if a bug or feature request but I can't find a simple way to change the typical required error message for, say, a 'do you accept.. ' checkbox as "Please fill out this field." doesn't quite ring true.

Also, this should totally be a legit npm package. Installing it through github is.. fine.. but it breaks if you subsequently install another package - you have to delete node_modules and re-install it all (for reason that are beyond me).

Add Validation for ipv4 and ipv6 ip address ?

In package.json
"main": "./dist/js/validate.js"
But 'js' folder not exist in 'dist' folder.

^[\d]*$

Such error is displayed in the browser console:
Failed to execute 'querySelector' on 'Element': '.error-message#error-for-productName[]' is not a valid selector