Source
honestbleepsReddit Enhancement Suite•

So, for someone brand new to Javascript - nice job... you're thinking in the right direction, at least...

I'm guessing this was just an exercise in learning to program, since there are eleventy billion form validation javascript tools out there... That being said - you could learn a lot from them...

Take, for example, the jQuery validation plugin.

The idea here is to allow the user to create forms that validate while minimizing the work in setting it up ...

Instead of having to write code and make a bunch of addRule and registerInput calls, check out how it works... You just attach a class to each input field, and the validation plugin reads the classes and makes the rules for you. (Click the view source tab on the first demo)

A really big thing that you're missing that would make your life easier is the use of regular expressions. However, those are a pretty tricky/complicated thing for a beginning programmer. That said, the idea is that you create a "pattern" to match against. For example, a valid email address is [someaddress]@[somedomain].[extension] ... (I'm oversimplifying big time here)... So, the jQuery validation plugin has a number of commonly used regular expressions to detect valid email addresses, website urls, phone numbers, etc...

It's this kind of stuff that really makes web development easier...

You're on the right track, and for someone so new to programming it's great that you're starting with an object-oriented-ish approach, etc...

Best of luck! Coding can be really difficult, but really rewarding when you can finally do the no-errors happy dance :-)

1
psayre23•

I agree. This is a great exercise in understanding the language. There are a few DOM related trick you could use to make your life easier, such as the classes mentioned above. There is also a handy function document.getElementsByName which might be useful to you.

My main feedback is that it seems like building a form to use this API is more complicated then writing validation by hand. I understand that you are hiding implementation details from the developer, and in some cases that's a good thing. I think it this case that may not hold true. If given the option between writing my own regex and using this, I'd end up using my trusty regex.

I do like that there are callback when there is a failed condition. I think that fits really well with JavaScript's programming model.

So for what I don't like. The chaining seems a unneeded. I see where it could be handy, but I'm not sure I could program in that style here. I think it would quite handy if you needed to add multiple rules to a single element. (i.e. you need to check that a phone number is valid, and separately does not contain hyphens) I also think the GreeLight.booleanOpperator functions are a little hard to read. I see what you intend, but I think it over complicates it all.

Don't get discouraged my what I personally don't like. I'm just one random person on the internet. ;)

1
lulzitsaredditOP•

I use form[name] instead of getElementsByName. I figure the latter is a bit faster and is guaranteed to return at most one element. I store elements by name only that way "work" can be done even before the page is loaded. Once the page is loaded it gets the form element and stores that.

It currently supports regular expressions in constraints. A constraint can be: a rule (string), a function, or a regular expression.

So you could do something like: addRule({name: "phonenumber", constraint: /^(0-9)*$/ });

And after some of the suggestions I've recieved I will be modifying that to also accept: addRule("phonenumber", /^(0-9)*$/);

That way there's a little bit less work required to set rules up.

As far as the chaining, since it was only a matter of returning this at the end of the function, I figured why not? But chaining isn't required so I leave it up to the developer.

I see what you are saying about the operator functions, but I couldn't think of any better alternative if I wanted to support boolean operations. The only alternative (that a friend suggested) was something similar to:

addRule("name", function (e) { return e.isEmpty() && e.isEmail });

But I found the following a lot more concise personally:

addRule("name", ["empty", "email"]);

Even without the array=and shortcut, I think it's still easier to write:

addRule("name", GreenLight.and("empty", "email")]

I figured that they probably wouldn't be writing complex expressions anyways. If you have any suggestion of how to make that easier to understand let me know.

Thanks for the feedback though, I really appreciate it. I'll work on making it easier to get setup, or more "plug and play" as they say. I don't think I'll go as far as using element classes (mostly out of laziness), but I'll do my best to come up with an easy alternative.

1
lulzitsaredditOP•

Thanks for the thought out reply. I will definitely work on getting it easier to setup. I don't think I'll ever get it as easy to setup as that jQuery plugin, but I'll do my best. I think I will stick with javascript only instead of embedding rules in the class attribute -- but I will do some research on it to see how difficult it would be if I wanted to.

The library does currently support regular expressions as constraints though. For example, the following would be valid:

addRule({name: "phonenumber", constraint: /^(0-9)*$/ });

I also provide some default rules for emails and other common inputs that use regular expressions. I will use more of those once I'm a bit closer to having a finished product.

Thanks for the feedback :).

1
honestbleepsReddit Enhancement Suite•

Well, it depends on who your audience is... If you're building a utility class for you only, then stick with what you're comfortable with (i.e. javascript rules, etc)...

If you're building something that you are hoping other people will fall in love with, use a lot, and maybe even contribute code back to -- you're going to want to make it as easy/accessible as possible for everyone.

It's much easier for most people to do:

<input type="text" name="phone" class="required phone">

than write an addRule function...

1
ithkuil•

that's really great. very impressive if thats really your first javascript thing

the rules thing is very awesome. but why can't I just like define a rule like rule('rulename', function(v) { v > 10 }) or rule (someregexhere) ?

or if you are doing the rules the way you are could you add chaining?

also html 5 has an email type input type='email' and :invalid styles http://slides.html5rocks.com/#slide21

also look at jquery

1
lulzitsaredditOP•

I have another function to add multiple rules at once

form.addRules([["rulename", function (v) { v.value > 10 }]
                     ["myregexrule", /^[a-zA-Z0-9_]*$/]
                     ["anotherrule", "email"]]);

Both functions should support chaining. I'll modify the addRule method to accept a rule without the object/named parameters so the following is valid.

addRule("rulename", function (v) { v.value > 10 })

I like jQuery and some of the other frameworks, but since this is a library I figured I shouldn't force anyone to use a framework just to use my library. I don't think it really would have helped dramatically past the event handling anyways. They're free to use any framework they want in the callbacks, etc.

1
ithkuil•

nice

1