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
Related
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.
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
I am in the process of converting a Silverlight app into a standard Web app (ie all HTML, CSS and JavaScript via jQuery 1.4.4). I'm not the most experienced when it comes to web development, so I am wondering what would be the best way to convert this custom Silverlight control into a web equivalent?
It boils down to just being a fancy radio button group. The user can click on any type, and only one type can be selected at a time. For the web equivalent, it needs to set a value that will get POSTed to the server.
For now I am just using a standard <select> tag which is of course functional and doesn't require JavaScript (which is nice), but ultimately is not going to fly. I will place a <select> inside of a <noscript> tag to allow non-js people to still be functional.
Can anyone recommend a good approach for tackling this? Any existing plugins/controls out in the wild I could take advantage of?
(I am using ASP.NET MVC 3, but I don't think that's very relevant here)
I would use a <ul> and make the selections a <li>. Styling is easy enough to apply to that, and there are tons of samples online.
Place a click on the li using jQuery to disable. If you are going to disable other selections, you should also include a reset/clear type function to they can choose again in case they made a mistake.
Think of them as an array of buttons. When one is clicked, all others are unselected. Draw a rectangle around the one that was clicked and set a hidden form field equal to the value you expect when the form is submitted.
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.
Morning folks.
Novice Rich here once again requesting assistance.
I have just started dabbling with javascript and although I have set up a few onclick/change for setting the focus of radio buttons,that's pretty much my limit.
In my c# code behind, I would like to have an 'onchange' function whereby once a client starts to type in my autocomplete textbox, a drop down list (which is likely to have been populated previously) is reset/cleared to it's original state.
Anyone got any ideas how to do this?
(Chances are I haven't exp[lained myself very well here)
What you want here is to start exploring jQuery. When you find yourself familiar with it, create a server-side ASP.NET Handler that returns JSON data to your jQuery.getJSON call and from that, populate your autocomplete textbox.
Or, you can of course not reinvent the wheel and just use one of the plethora of jQuery Auto-Complete plug-ins available out there. Whether you'd still need the server-side handler to provide the auto-complete plugin with data depends on your use-case, but in most cases you'd get much better performance out of pre-populating the data when the page loads.