The best validation library technic - javascript

I want to write a plugin to validate forms. I have made detailed research about that but I want to write it with my own way. I dont want to write so many lines of code when using the library. It should be easy to use.
I found a jQuery library for validation. It uses HTML classes. For example if you want to a field with presence validation you just add the field required class done but I am not sure this is this is clear way. So I am confused with this, so anyone can tell me which is the best way to write a form validation library?

Actually the I found the jQuery validation plugin way is a very nice of dealing with validation logic. Here are some my reasons for it..
Its un-intrusive. You need no extra
markup on your form elements.
Used by many other plugins so
replacing one with a better one
should be relatively simple
Elements having same class will get
same validation logic and chance of
missing is rare (all date elements
will get same date logic, although
you can easily override)
You can use the same class to add
extra logic and same UI look and feel
(obvious) too and you are sure that
they all behave the same. (I add a
jquery rule to make all date elements
has a date picker too)
Adding and removing rules can be done
relatively easy with out change to
your markup.

I the method you describe is a good one. You can easily query anything with a class of "required", determine its type and check for a selected value. You can do this for all input types.

Related

Using a forced suggestion mechanism using JavaScript and jQuery (ASP.NET MVC project)

Yesterday I discovered that jQuery is really powerful and can do amazing things with only a few (sometimes just one) line of code, amazing! I did some animating which went really well!
So I was wondering if the following is also possible/ simple to implement with jQuery (if not, please tell me what could do this):
Basically I want a suggestion mechanism for the webapplication we are creating. We are doing this using ASP.NET MVC 4. By suggestion mechanism I mean the user gets presented with a textfield, he can start typing and based on his typing topics (I have a model class Topic with a few properties) get suggested. The user can ONLY choose out of those topics, they can't define any by themself. So I would like to generate a list based on the input (with each key tap). If they click on an item, it gets added to the box and they can choose other topics if they would want to.
I do realize that this is probably rather difficult to implement, but it would be great if I could find a tutorial or example. Preferable with JavaScript or jQuery, but if that's not possible anything will do really!
If my explanation is not clear enough: I mean something similar to the StackOverflow suggestion mechanism for tags.
If you want suggestive text field, search for html5 datalist datalist
Also take a look at JqueryUI Auto Complete
However if the options are not too much, i would go with select menu instead of text field.

How to add Constraints between Form fields of HTML forms?

I was wondering if there is already a framework or a jquery plugin which i can use to add constraints to form fields. With "constraints" in this case I don't want to say that field x is an e-mail field and needs to be validated as such but i want to define relations between form fields like:
If there is something selected in checkbox A --> enable Button B
If there are at least X entries selected in list A --> enable form field B
and so on and so forth..
I'm currently on the point of implementing it myself but I wanted to make sure that I don't reinvent the wheel.
It could be any JavaScript framework (standalone or jquery plugin).
Why a plugin? This is fairly easy with just jQuery:
$('input.A:checkbox').change(function() {
$('button.B').prop('disabled', !($(this).prop('checked'));
});
$('select.C').change(function() {
$('button.D').prop('disabled', !($(this).find('option:selected').length >= 10));
});
We're just assigning handlers to the events that happen when the inputs are changed - and I enable or disable the field depending on my condition.
I think it's better than getting a plugin because:
You're saving on HTTP requests for more files
You're saving performance by not loading more JS code
This is fairly simple as-is and there's no point to overcomplicate it.
See demo
If you use something like knockout you'd be able to make use of the knockoutvalidation framework.. or, in the past I've used jqbootstrapvalidation... the latter obviously requires bootstrap as well.
There are quite a few code samples on both sites & both frameworks are pretty easy to use. Feel free to comment on this post if you need any more specific help/advice.
Just a word of warning. If you do use knockout. Go with knockoutvalidation, and not bootstrap validation... or you'll have sleepless nights trying to get the 2 to play nicely.
Here is a jQuery plugin you could use:
http://github.com/keyo/jQuery-Form-Dependency

MVC and Javascript/JQuery validation library

I am working on a project that use MVC 2.0 with Kendo UI. We decided to use AJAX validation instead of MVC Model level validation; which means validation happens during most "onchange" events on HTML controls. We coded the red CSS "highlight" on HTML controls when error happens and remove the highlight when there is no error. If there are multiple controls (e.g. checkboxes) we will highlight all of them when error occurs...and of course, error messages related to multiple fields validaton....
We get it sort of working but we had to implement a lot of javascript/jQuery coding on each web form page (including control id/name matching on the validation message) and does not seem to be able to implement it as a common routine against all web forms. We are also wondering if there is some sort of validation library already out there that more or less achieving the same thing...
Any suggestions?
If you tag your question with kendo-ui you are probably using it so it might be worthy taking a look into kendo.ui.Validator
You should try jQuery Validation
Its very easy to use, but you do still need to link each input to they type of validation required

JQuery sortable/selectable plugin with drag'n'drop?

First of all, I'm not a JS developer, so I apologize if I'm asking a rather too general, previously asked or complex question. The functionality I'm searching for is that I'd like to have two HTML lists, on the load the first one is empty and I want user to pick the items he like from the second list and drag them into the first one (which should be sortable so user can set the order he likes). Is there a easy to use plugin for it?
I really like the idea and look of those two plugins..
http://www.emposha.com/javascript/fcbkcomplete.html
http://loopj.com/jquery-tokeninput/
http://code.drewwilson.com/entry/autosuggest-jquery-plugin
There are doing something different, but those "bubbles" in textfield are a great way to handle it (from UX point of view). Just to be able to have an empty text field, available bubbles below it and to be able to drag them into the text field, just those user wants (no autocomplete functionality, just draging from some list of them, maybe sorting in text field available would be nice). Maybe there's a similar plugin to do that.
Another thing is, it's a part of a form so I need to be able to send those picked up elements to the server with the form, each with it's position. I know, I am asking too much but any help will help me.
Try to use Jquery UI
Here are links for demos
http://jqueryui.com/demos/sortable/
http://jqueryui.com/demos/droppable/
EDIT
I think all you want is this
http://jqueryui.com/demos/droppable/#shopping-cart
Maybe jQuery UI would work for you; it is composed of several handy helper functions.
Take a look at sortable with connected lists: http://jqueryui.com/demos/sortable/#connect-lists

Validating all entries in Input Boxes

I want a class in JavaScript through which I can validate all the Input Boxes on a form. I just want to supply the form name and it must validate the input boxes there in.
Is there any class or something other through which I can achieve this?
Have you looked at the validator plugin?
http://docs.jquery.com/Plugins/Validation
If you don't want to use JQuery I described an alternative library in an earlier post
What JavaScript library to use for client-side form checking?
That allows you to just add attributes like REQUIRED or DATE to an <INPUT> tag.
It's a bit old-hat now, but we are still using it in production :)

Categories