Cannot get a simple example to work

ericelliott / h5Validate

An HTML5 form validation plugin for jQuery. Works on all major browsers, both new and old. Implements inline, realtime validation best practices (based on surveys and usability studies). Developed for production use in e-commerce. Currently in production with millions of users.

576 stars 125 forks source link

Cannot get a simple example to work #42

Closed timothyparez closed 12 years ago

timothyparez commented 12 years ago

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.

ericelliott commented 12 years ago

Thanks for bringing this up again. h5Validate was written for AJAX web applications, and the simple form submit use case (while supported) is (intentionally) not default behavior. I need to add this use case to the docs:

$('#form').submit(function () { return $('#form').h5Validate('allValid'); });

ericelliott commented 12 years ago

Oh, and the Chrome validation is intentionally disabled. h5Validate is an alternative implementation that behaves the same across all browsers (including old IE browsers, mobile browsers, etc...).

It is designed for practical value in eCommerce sites to enable best practice realtime validation based on lots of usability testing. Native browser behaviors don't enable those optimized behaviors, and could potentially damage form usability for the end user.

timothyparez commented 12 years ago

Oh.. well I only added a form to my page because of the jump start on this page: http://ericleads.com/h5validate/

What I really have is a number of fields on an HTML page and when I click the

ericelliott commented 12 years ago

To test a form for validity:

$('#form').h5Validate('allValid');

This will return true or false and fire an event you can subscribe to. It's perfectly all right to put that in a click handler on any type of element. Test the results and wrap your $.post() in a conditional, so it only gets triggered if the form is valid.

It's probably safe to remove the form, but I like to wrap my elements in a form tag, just for semantics. Just because you have a form, doesn't mean it has to use a traditional submit button.

timothyparez commented 12 years ago

Ok, sounds good. Does the library also validate

<input type="number" min="1025" max="32768" required/>

Because it returns true even when I enter 99999999

ericelliott commented 12 years ago

It does not, but it's about time it did.

stevenvachon commented 11 years ago

I'm trying to find h5Validate examples that actually work. Nothing is quite straight-forward enough, so here are my failed attempts:

// Does nothing, not even errorClass
$("form").h5Validate(
{
    errorClass: "invalid",
    formValidated: function(info){ console.log(info.valid) }
});

// TypeError: 'undefined' is not a function (evaluating '$("form").formValida...
$("form").formValidated(function(info){ console.log(info.valid) });

// TypeError: 'undefined' is not an object (evaluating 'e[b]')
console.log( $("form").h5Validate("allValid") );

// Returns the form, not boolean
console.log( $("form").h5Validate() );

ericelliott commented 11 years ago

formValidated is not a function that you pass in or call. It's an event that gets triggered on the form element when your form is validated. For the simplest use cases, you don't even need it. See the h5Validate homepage for working example cases.

stevenvachon commented 11 years ago

There aren't any examples; that's my point.

And here's another failed attempt that I'd forgotten to mention:

$("form").on("formValidated", function()
{
    console.log(arguments);
});

$("form").h5Validated();

ericelliott commented 11 years ago

The last example should call $("form").h5Validate(), not $("form").h5Validated() (which doesn't exist).

Could you post the full example on jsfiddle.net so I can help you get it working?

ericelliott commented 11 years ago

Let's save some time and show you a simple working example on jsFiddle.net:

http://jsfiddle.net/k3yYn/

Lots more examples and documentation are available on the h5Validate home page (view source to see how they all work).

stevenvachon commented 11 years ago

Thanks!

ryanbriscall commented 11 years ago

"There aren't any examples; that's my point." This is still true to this day, despite dilvie saying " I need to add this use case to the docs:" (above) 11 months ago.

There is no clear example on the homepage for how to check if the entire form is validated. I spent time searching and searching until I found this github issue page where you said "$('#form').submit(function () { return $('#form').h5Validate('allValid'); });" will do the job. This works, but I wish you'd have just have it on the homepage.

The homepage just says "h5Validate supports the following events: and says events such as "formValidated" but does not explain how to use these events. No example code snippets are provided.

ericelliott commented 11 years ago

Sorry about that. I have a full time job,a book for O'Reilly, and speaking gigs I try to juggle. Interestingly, nobody has ever sent a pull request to add to the docs. Would you like to be the first?

stevenvachon commented 11 years ago

I'm sure he'll make that request. I will too :)

stevenvachon commented 11 years ago

Is there a way to get a list of invalid fields?

ericelliott commented 11 years ago

Yeah, just listen for the events:

validated

The element in question has been validated. A validity object is passed into the event handler containing:

{
    element: HTMLObject, // A reference to the validated element
    customError: Bool, // Custom validity failed.
    patternMismatch: Bool, // Input does not match pattern
    rangeOverflow: Bool, // Input is greater than max attribute value
    rangeUnderflow: Bool, // Input is less than min attribute value
    stepMismatch: Bool, // Input does not conform to the step attribute setting
    tooLong: Bool, // Input is too long
    typeMismatch: Bool, // Wrong input type
    valid: Bool, // Input is valid
    valueMissing: Bool // Required value is missing
}

formValidated

The form in question has been validated. An object is passed with an object containing a bool, valid, and an array of validity objects corresponding to the validated elements.

stevenvachon commented 11 years ago

Thanks. Is this possible: $("div").h5Validate("allValid");?

I'm getting these errors even with $("form"):

TypeError: 'undefined' is not an object (evaluating 'settings[action]') jquery.h5validate.min.js:544

ericelliott commented 11 years ago

Did you remember to initialize the form?

$(document).ready(function () {
    $('form').h5Validate();
});

stevenvachon commented 11 years ago

You have to initialize it before you can "allValid"? Ok.

Is there a way to "destroy"? In mustache/etc apps, this is very important to avoid memory leaks

ericelliott commented 11 years ago

Initializing it creates the instance settings for you. If you don't initialize it first, it doesn't know what to do.

To destroy, just use jQuery's .remove() method. That will automatically remove event listeners and data references.