HTML 5 Native form validation callback - javascript

Ive got a table that contains a series of dynamic form fields and im using html5 and bootstrap 3 to control my site.
Ive decided as its only going to be me using this app that i can use native html 5 form validation.
What im wondering is, how do i detect if there is a validation error anywhere on my form and if so, control additional actions that are performed by the form?
The reason i ask, is because im validating dynamic fields and setting some to be disabled, but then enabling them on submit, and if i do so the validation routine catches it and i cant re-disable them when i need to
any help greatly appreciated

Considering that HTML5 is no longer just HTML, but instead a bunch of technologies lumped under that banner, I figured there would probably be javascript hooks for the validation.
Take a gander at this information from Mozilla:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation#The_HTML5_constraint_validation_API
It looks like you will have no problem hooking into the validation, and doing what you need.

Related

Do I need JavaScript Form validation?

I'm working on some forms for a Website. Currently I have the usual HTML Browser check (with "required"-tag and patterns and stuff in the inputs), I check the values in a JavaScript before submitting and I do a server-sided check of the data after submitting.
Everything works fine, even if I have only one of them enabled, but it seems a little bit overkill to me, so my question is if I can just leave the Javascript check out? Of course I need to keep the server chek :D
Looking forward to your answers!
You must always validate input at serverside. Javascript is optional and it just to make life of your users easier. Your users get better experience. That's it.
All modern browsers support the HTML5 form field attributes. As you are using those, you may skip the JS validation.
To expand a little on the current answers:
Server side validation is always required, you mentioned that.
HTML and Javascript validation are used for different things.
The HTML required tag can be used to check a form's fields are not blank before a form submission.
Javascript validation allows you to be far more flexible with what you want to validate and when. However, it requires more work because it's not as simple as a required tag.
With Javascript you can do far more. Some examples:
Validation that occurs as soon as a user starts to type
Have the box highlight a different colour
Show an error message
Have a big red cross appear next to invalid fields or a big green one next to valid ones
Spin your page around when the user enters something invalid. (don't actually do that)
etc.
Also note browser support for the required tag.

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

Why use a form tag when you're submitting via ajax?

Philosophical question:
Say I've got a web app that requires javascript and a modern browser, so progressive enhancement is not an issue. If my form is being built via javascript, and my data updates are all being done via ajax POSTs & PUTs, is there really any reason to wrap my controls in a form tag? If I'm still going to use the tag, say for semantic or structural reasons, is there any reason to have action and method params that I'm going to ignore? It kind of feels like a hold-over from an earlier era to me.
There is at least one important user-experience feature provided specifically by wrapping inputs inside a form tag:
The enter key will submit the form. In fact, in Mobile Safari, this is how you get the "Go" button to appear on the keyboard.
Without a form wrapping the inputs, there is nothing to submit.
You can of course provide enter-key behavior through a keypress event, but I don't know about if this works for mobile devices. I don't know about you, but I'd rather work with the semantics provided by the browser than have to imitate them with events.
In your case, you would simply provide an onsubmit event handler for the form, which would do your AJAX submit, then return false, canceling the actual submit.
You can simply provide action="" (which means "self"), and method is not required — it defaults to GET.
If you do not need progressive enhancement, you theoretically don't need them.
On the other hand, forms have some cool grouping and semantic effects. Using them, you can group your form elements logically, and make it easier for your scripts to gather the values of certain elements.
For example if you want to ajax-submit some user input, it is always easier to say: "let's take all elements in this form and submit them" than saying "let's take this input, these two selects and these three textareas and submit them". In my experience, it actually helps the developer if form tags are present.
AJAX is great but as JamWaffles (+1 to him) said, using form tags provides a fallback method.
Personally I use form tags, even for things I submit with AJAX because it is syntactically clear and makes it easy to grab all inputs within a specific form. Yes you could do this with a div or whatever too but as I said, using a form is syntactically nice.
Incidentally, screen readers treat the content inside a form differently so there are accessibility issues to be considered whichever way you choose to go. Note that anecdotal evidence suggests that Google considers accessibility in its rankings so if SEO is a concern for you, use a form and do it right.
Summary:
forms OK for MVC, simple web apps, bad for component oriented, rich web apps.
Reason:
forms cannot nest other forms: big limitation for a component-oriented architecture.
Details:
For typical MVC applications, forms are great. In rich, complex web applications using a lot of javascript and AJAX and with a lot of components here and there, I don't like forms. Reason: forms cannot nest another forms. Then if each component renders a form, components cannot nest each other. Too bad. By changing all forms to divs, I can nest them, and whenever I want to grab all parameters in order to pass them to ajax, I just do (with jQuery):
$("#id_of_my_div").find("[name]").serialize();
(or some other filtering)
instead of:
$("#id_of_my_form").serialize();
Though, for sentimental and semantic reasons, I keep naming my divs something_form when they are acting as forms.
Not that I can see. I'm currently building a web application that uses <form>s, but I'm using them so I have a fallback method if the user has JavaScript disabled (an e.preventDefault stops the form posting normally). For your situation, where you're saying the user MUST have JavaScript, a <form> tag isn't necessary, but it might be an idea to keep it anyway in case browser need to do anything with it, or to access it as a sort of class.
In short, no, you don't need to use <form> if you're doing pure AJAX, although leaving it in might an idea if you suddenly decide to create fallback code in the future.
In my opinion: If you use it for semantic reasons, then use it as intended. The action attribute is required (also can be left empty) to be well-formed, also you can separate your URI-s from your js logic, by setting the action attribute, and reading it before the ajax call.
I don't see why you would need to use the form tag here. The only reason to use a form tag (other than to get your markup to validate) is if you are going to have the user "submit" the data using a sumbit input or button tag. If you don't need to do that, then there is no need for the form. However, not sure if it will be considered "valid" markup. If you do use it you can just do <form action=""> as action is the only required attribute of the form tag. However, you do bring up a good point, the future of web applications probably will no longer need the form and traditional submit methodology. Very interesting, and makes me happy. hehe :)

Multi step form with jQuery which degrades nicely if JS is turned off

I currently had my form set up so that each section was refreshed using Ajax, however it didn’t degrade gracefully with JavaScript turned off and I’ve looked into putting each part of the form in to a separate view which works fine but isn’t that great to be honest.
I know the client wants it to look nice so I thought about using jQuery to show and hide forms, so if JavaScript is turned off then all of the forms build in to one long form. However the only problem I am facing is that after each section the user needs to submit this information for it to be validated before the next stage is completed. How can I do this if JavaScript is turned off because the other forms will be visible...
Any ideas? Thanks.
You might consider using one long form divided into sections, and then if JavaScript is enabled you hide all but one section at a time, providing navigation between the sections (via tabs, for instance).
Alternately, you could look at using script and noscript sections, but then you end up duplicating the form (once in the script sections, once in the noscript sections) and it starts getting to be a maintenance problem.
What you do wrong is that you're thinking reverse. When you have it working with javascript disabled then it's much easier to apply some javascript functionality.
In addition to that I would display different forms based on wich step in the process the user are. And to that form pass the values from the last step into hidden fields. That way you can have a "step"-registration without js enabled.
?step=1 and let say you use php <?php if (isset($_GET['step']) && $_GET['step'] == '1'): ?>
Then just reload the part that contains the form with ajax.

Categories