Use with AJAX Form Submission

[ghost]

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?

[ericelliott]

This is a known bug. Originally, this plugin was designed to use an event handler system, where the configuration gets bound in the closure. The string methods were added later, without thinking about maintaining instance scope. Basically what happens is that when you call the method by passing in a method name, it creates a new instance based on the default settings, instead of using the configuration you have already created.

I have fixes coming for this issue, I just didn't have time to get to it over the weekend. Stay tuned. =)

[ghost]

Ok, that makes sense I guess. However, I have a project due by Thurs...and I have implemented h5 in a couple of mobile forms where just required fields were involved. Now that I am on the final payment form, this issue has revealed itself as I need to use the patterns etc. for validation. Any chance you can get those fixes in there today at some point, if they are ready? Don't mean to look a gift horse in the mouth as I'm sure you have a day job and are building and providing this for our consumption free of charge, however...I would love to not have to rip out what I have to replace with another validator if at all possible. But if it's not ready, or not possible to push those fixes, that's what I'll have to do I guess :)

In any event, thanks for your efforts on this!

[ericelliott]

Hi Bucs,

Your problem may not be related to that bug. The bug only affects code that tries to override the allValid selectors. Can you post the code you're trying to use on jsfiddle.net? I'll take a look.

Otherwise, the fix is not done yet, and requires a small refactor. I don't have plans to have it fixed before end of day today.

[ericelliott]

Hey Bucs, I haven't heard back from you. Can you post something on jsfiddle.net that demonstrates your problem?

[ericelliott]

The bug I mentioned is fixed now, and I haven't heard any more feedback from you on this. Closing. Please feel free to comment if you still need help.

[sebringj]

hi Dilvie.

I recommend you add the following events as the "submit" jquery works similar.

$('form').h5Validate({
success : function(ev) {
// "this" is passed as form context by using apply to caught submit event within your code
// its up to the handler to prevent the submit or not "ev.preventDefault()" then do further
// this flow is very easy to use
},
error : function(ev) {

}
});

I write plugins myself and I'm not seeing any obvious way to use this in your code. I'm a fan of you making this html5 capable and testing it on various platforms but as it stands there are no examples of how to use this in your docs and I am confused on how to catch form events at all which is hindering my ability to use this as submit is not firing validation etc.

Thanks for making the code however.

[ericelliott]

sebringj,

You don't see anything about submitting the form, because it's not h5Validate's responsibility to submit your form. h5Validate only validates the fields. What you do with that is up to you. This is in keeping with the Do One Thing and Keep It Simple, Stupid principles of software architecture design.

What this allows for the users of h5Validate is flexibility. Instead of being tied to old school form submit methods, applications that use h5Validate are free to implement ajax submit, they're own resource-based data savers, websockets, on-page model change, or whatever else they might choose to do.

If you want to bind validate to a submit button, that's easy. $('#form').submit(function () { return $('#form').h5Validate('allValid'); });

[sebringj]

Eric,

Thanks for the quick response.

I think you should put this in your docs as this is a typical use case. I don't entirely agree with your statement. You have made a convenience property for modifying a class upon an error happening but have this capability by catching the input error and having a user modify the class anyway. Its not necessary to have the class in there but its convenient. It does not make your code less flexible. Having a submit event as an option makes your code cleaner as you don't have to call it in a submit event. Its optional. Not less flexible. Old school is being confused with being practical in this case. You have done well, don't mistake me. Its just a "nice to have" feature.

[ericelliott]

You make some good points. I'll consider it. Thanks for your feedback. I appreciate it.

[sebringj]

Eric,

Actually, I really like your stuff. My plugin is only partially built out for all the HTML5 input types but I have an event system and a deferred system for remote validation that really makes bass one look like rocket science. I use this on huge ecommerce sites that my company builds and it works on mobile as well. I have not published it on github and frankly not interested in doing so as I don't have much time. I would like to show you what I've done as you might want to incorporate some of the ideas. The deferred logic is quite elegant and very simple. You have a good following and are on the right track so I thought you might want to take a look and see if there are any other aspects to your plugin to make it even better.

You can see an example of it here -> http://www.zipstory.com/signup or here http://www.klim.com on checkout I would rather someone like you take some of these ideas to make your plugin better as you are continuing to maintain it and are doing a great job of it. its the dumbValidation.js file.

[ericelliott]

I'd definitely be interested in checking out your deferred system for remote validation. I have been planning to build in a method for that, which is partially why I implemented the event API (so you can get validation results asynchronously).

h5Validate is already in use on some of the biggest eCommerce sites in the world, some of which transact many millions of dollars per month. Anything we can do to support those users and make the experience better is certainly welcome.

[sebringj]

I did publish dumbFormState on GitHub and you can google it too. This is pretty handy in using it with the forms as you don't have to keep state. Also dumbCrossFade (first attempt). The form examples you see are using dumbFloater which is an attempt to show overlay form hints and error indicators. And there is also kitgui.com which isn't free but its freakin simple cms for developers and emeraldcode.com so you can see the ecommerce sites i do. I would like to use your plugin for sure when the remote thing comes in. good talking.

[sebringj]

sorry, latest source is here -> http://kitgui.s3.amazonaws.com/js/jquery.dumbValidation.js as I fixed a bug as the events were too greedy and not respecting multiple instances