ericelliott / h5validate Goto Github PK

If one sets input to type="email" it doesn't add classes "validation-error" and "h5-active".

Sometimes you want to add an errorClass to an element that's around your label and inputs. This way you can change the color from your labels etc...

That would be a nice feature.

say i have a json interface /user/isTaken/:id how can i validate the username field in a form against this remote to ensure that the username the user has chosen is unique?

See http://github.com/dilvie/h5Validate/issues#issue/1

I tried all on this page / thread and it did not seem to work. I get this
TypeError: settings is undefined
[Break On This Error]

return settings[action].apply(this, args);

and nothing shows as being validated and is not highlighted. But when I add the h5validate on just the document.ready() it validates but does not keep the focus in the field. How can I use to set the field focus to the validated field.

Hi,

IMHO validation and showing/hiding errors, adding css classes etc are separate things. When combined in one library, you lose flexibility. I think it would be better to just do validation and offer callback functions to the developer implementing the library. That way he/she can define exactly what will happen when elements enter different validation states.

You can of course offer the functionality is it exists right now as seperate plugin.

Just my two cents!

Hi again :-)

I'm trying to make h5 not validate specific fields in a form.

Yet using :not() or .not() does not work. Is there any other way i can make h5 ignore specific fields?

Having problem with the plugin, when i start the text with capital letter then h5validate still tells that its invalid.
http://grab.by/8vzr

EDIT: Similar problem with email regex pattern. Ex: [email protected] is considered invalid.

Should make the patterns case insensiteve.

Is there a way to see whether password confirmation matched password or not, using h5Validate?

If a field have a placeholder, the errorclass does not show when using allValid on a form.

Didn't have time to create a fiddle, but it should not be required, quite easy to test :-)

Thanks,

Best regards,
tmikaeld

Hi! It would be good having a public validation method that you can trigger. Now i have to loop the elements and trigger the event manually to make it validate which is quite hacky.

It would be great to have some sort of method to validate whenever you want. This way I could easily validate when the page loads, and on submit for instance.

Also it would be good to have some way to check if a form is valid or not.

There are stubs in h5Validate to add error messages, similar to these: http://sandbox.leigeber.com/messages/messages.html

However, they need to be implemented so that they are easier for users to hook up and trigger.

Hi,

I'm trying to validate required on a select element, h5 seem to ignore it, this always returns true:
$('#BillingCountry').h5Validate('allValid');
(The element is visible)

<select type="select" name="BillingCountry" id="BillingCountry" required="required">
                          <option>-- Choose Country --</option>
                          <optgroup label="Europe">
                          <option value="SE">Sweden</option>
                          <option value="AX">Aland islands</option>
                          <option value="DK">Denmark</option>
                          <option value="FI">Finland</option>
                          <option value="NO">Norway</option>
                          </optgroup>
</select>

EDIT: Solved by setting -- Choose Country -- to value="". I think this should be a little more flexible, some CMS'es use value="-1" or no value attribute at all.

http://jsfiddle.net/GScSE/

If i validate first, then disable, the disable wont work.

If i disable first, then validate, the validate wont work.

FF reports maxlength as -1 if not set, so h5Validate always reports "tooLong" in lines 279-282 , even with the field empty.

To fix this, I changed the if to:

                if (!isNaN(maxlength) && maxlength >= 0 && value.length > maxlength) {

It would be great if this plugin could support multipart forms, for example validating a div with fields at a time.

First off, I'm aware that in the HTML5 spec, it stats that if the 'required' attribute is specified on an , a value is required, regardless of value the value of 'required' actually is (eq. still means that it is required.

It would appear that some browser's DOM (Chrome and FF) is automatically inserting a property on the HTMLInputElement object named 'required' with a value of false. As such, the logic for a required value in your plugin get executed regardless of whether or not the markup specifies that the element is required.

I'd like to suggest that since your plugin does not have to conform to the spec, you also check for a "false" value.

says it all

I'm hoping to setup a validation check on each character entered into an input or textarea.

I'm getting very close simply by setting the keyup option true, but I'm getting unwanted validation when the tab (or other) key is used to enter a field.

Can you suggest a way to suppress validation on key up unless a character has been entered?

I tried the change option, but that only validates input and textarea on focusout. I'm looking for validation on each character entered.

Thanks for the great plugin, it's really nice to have an updated validate plugin.

I would really like if the error message text is the error message text and that it does not get rewritten because I may have a title attribute on my element. Semantically they may not have to have the same value or meaning. The offending code is in the markInvalid() method.

Any chance you would be willing to add support for the placeholder attribute? I mean so that it works in older browsers. Seems like using h5validate together with a placeholder plugin will probably fail.

Or perhaps point me in the right direction towards adding support myself?

I want make validation for chosen.js block
I add css
.chzn-select{
display: block !important;
position: absolute;
left: -9999px;
}
Validation for select work,
but how can i add error class for chosen block

If I run this on chrome, I get the alert ONLY when there is a value in the required field.

it would be great, if we could use the HTML5-data-attribute to specify the validation-pattern.

e.g. data-h5="phone" instead of class="h5-phone"

Check to see if preventDefault() works cross browser for invalid event listeners. Maybe we can turn off the awkward default behavior of browsers without turning off the built-in validation methods.

So, it validates 0.1 but rejects .1 . This regex is credited to bassistance.de , but on their demo page validation works correctly.

This attribute is useful to include "save" buttons on forms that have validation constraints, to allow users to save their progress even though they haven't fully entered the data in the form. The following example shows a simple form that has two required fields. There are three buttons: one to submit the form, which requires both fields to be filled in; one to save the form so that the user can come back and fill it in later; and one to cancel the form altogether.

I haven't been able to figure out how to get h5Validate to validate maxlength on textarea elements. I see the validity.tooLong attribute but not sure how it gets triggered in IE8/9. Is it supported?

It would be nice to see an example of how this plugin can be used when you want to validate a form prior to performing an AJAX form submission (i.e. not doing a submit). The only way I get this to remotely work is to do the following:

1. Enter all field values first
2. Then call the $('#myform').h5Validate() upon the "checkout" button click
3. Then call if ($('#myform').h5Validate('allValid')) { ... }

If I try to first call the $('#myform').h5Validate() upon form initialization then call the 'allValid' upon checkout button click...the 'allValid' call seems to work but it does not implement the default invalid CSS for the invalid fields.

What am I doing wrong here?

Hello,

I'm trying to implement a tabbed form (Twitter Bootstrap) with h5validate.

Problem is that when required fields are hidden ("div style=display:none" that is) they do not get included into validation and form gets submitted with required fields empty.

Is there a way to fix this behaviour?

Thanks!

Using v0.80

<input type="text" maxlength="15" class="h5-phone" id="phone">

If I enter, say, 121212 and check $('#phone').h5Validate('isValid') it returns true. Same thing whether type is text or tel.

I saw the older ticket (#13) and your comment there that the phone regex is fairly generous. Maybe we need additional pattern/classes like h5-usphone to handle tighter requirements?

There are good email and url patterns in my checked out branch right now, but the HTML5 form specification mentions specific patterns for email and URL that must be implemented in order for the feature to be compliant.

See http://blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4

Hi,

I'm having trouble overriding the :visible setting, since i need to validate a hidden select element.

Setting a new setting to:

Does not work.

Setting a new setting to:

Does not work.

Changing the default code to:

Works.

A better way to override this without changing the plugin code would be great.

There are issues here with accessibility in the demo:

http://wave.webaim.org/report?url=http%3A%2F%2Fericleads.com%2Fh5validate%2F%3Fname%3D&js=2

Made me wonder if there's been any testing done here for accessibility with your code.

I'm also curious what license it is under. Would be great if it were GPL or MIT.

Deprecate validValues API. Fetch them instead from datalist.

http://jsfiddle.net/V4jV2/

I get very inconsistent behavior on the latest h5validate and radio buttons, in this sample, it's not working at all.

Basically you need to 'trim' before checking anything. Do not know what the spec says though.

For example, using ids such as item_quantity[2] won't work when using data-h5-errorid.

Implement missing features as described here:
http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/

Add support for email type, at minimum (very handy for mobile).

Take a fresh look at new input types (Specifically, can we disable the horrible default browser UI for number types? Can we make it easy for users to override built-in browser date pickers, etc...?) Sadly, the spec leaves a lot of those implementation decisions to the browser, without specifying standard ways to override them or style them, but we might be able to track down all the browser implementations.

I'm open to help with these things. I'm not sure when I'll find time.

Something like

I think all you need is this line of code:

settings.delegateEvents('select[required]', {change: true}, this, settings);

Not sure if such use of required attribute is in html5 spec though. Could be made optional.

There is a new events API, as well as a flexible set of validation methods. These need to have tests written for them.

I resubmit this issue as I believe it was closed prematurely.
The argument given against it was the HTML5 spec recommends the title attribute is used for storing the error message.

But after reading the spec (Please read the spec):
http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-pattern

The spec does not make such a recommendation, it suggests that the title attribute must be used for storing pattern descriptions if the pattern attribute is present, and does not stipulate it's use for error messages. In fact it even suggests that the title attribute text should not allude to any error at all, however additions can be made to improve usability. So I believe making the title attribute as a error message store should be optional and definitely hookable to support additional messages. The HTML5 spec clearly supports this.

I've downloaded the latest release from Github
and I'm trying a very simple example, but I can't get it to work:

<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>
      <form id="settings-form" action="someotherpage.html">
        <input type="text" required/>
        <input type="submit"/>
      </form>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <script src="jquery.h5validate.js"></script>

        <script>
        $(document).ready(function () {
            $('form').h5Validate();
        });
        </script>
  </body>
</html>

As soon as I use h5Validate() the standard HTML5 validation of the browser (chrome) stops working
and the page submits even if the text field is empty.

I'm obviously doing something wrong, any suggestions?

The JavaScript console show no errors.

Can't get "validValues" Method to Work. Is it possible to see a simple demo on jsfiddle?

"One thing I'd try and do with the errorClass and validClass is to mimic the CSS3 UI module more closely and allow setting of valid, invalid, in-range, and out-of-range classes along with the other potential pseudo-class equivalents."

http://www.w3.org/TR/css3-ui/#user-interface

• Jonathan Snook via Email
  http://snook.ca

http://blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4

Problem:
readOnly attributes get validated

Expected:
According to the HTML5 spec: "If the readonly attribute is specified on an input element, the element is barred from constraint validation."

this project really really needs a test suite.

as forms are a delicate area, we need robust testing around them

there is probably some tests in the w3c html5 suite and definitely in webkit layouttests that could get you started.

you could also gank tests from h5f and webshim