We Keep Coding

Need advise. How to validate forms with AJAX and not to create excess load on server?

Well, hello everybody, I faced with a big problem which I can't solve.
So, here is it: I need validation, but I have my own expectations towards it.
So, what I do:
Here everything goes right as I suppose...
I get the values from fields (e-mail(text input), username(text
input), sex(radio btns), birth date(select lists),
password&repeat_password(password inputs).
Then I handle and validate those values. For example: I check if email is not empty, if it fits the pattern, if birth date is right and real, if password fits needed limitations. Another words, here I validate all params without AJAX, just using custom JS.
After validation, I get the responses from each field with messagies of validation result and the result(Boolean) itself.
HERE'S THE PROBLEM COMES UP
So, as I have results of validation, now I need to check if EMAIL is UNIQUE and if USERNAME if UNIQUE. This ofcs should be performed with AJAX, but IMPORTANT: I shouldn't perform request to server to check email if there were some problems with email before. If its OK, I send it. Same with username field.
AND FINALLY, validation is boundaried on onsubmit event, so I want to check email, username with no AJAX, then validate them on being UNIQUE if there were no errors before with them and then IF ALL fields are correctly validate, only at that case I send form, in other occasion I would like to use event.preventDefault() .
So, due to AJAX works in async way, I can't use event.preventDefault inside it, so that's first problem. Also I cant return anything from ajax callback to let system find out if there were any validation issues or not.
I am not asking for a solutions, I am not crazy, I understand that there is a lot to think about, BUT I want some of matured gyes helped me with advise, how to validate forms correctly using AJAX? How to divide code on blocks in validation and make it reusable, using async AJAX?? Pls, I'm struggling a lot. I've already written a lot of code to validate fields with no ajax, and I dont understand how to relate them with ajax, send the form if everything OK.
Can u share your expiriance in validating forms, how do u usually do it? How have u learnt how to validate forms? AND WHAT ARE BEST PRACTISES OF VALIDATING FORMS WITH AJAX?

When it reaches form validation, there are a few things you should keep in mind:
1. Importance of the transmitted information;
2. How reliable it needs to be;
3. How many requests you are going to have;
4. How much information your form is going to hold;
In my honest opinion, I would use Javascript/Ajax for quick and more accurate paths in your form. For example:
1. Validating date fields are in correct format;
2. Validating ages are matching your requisitions;
3. Validating a gender was selected (BTW it is gender you are looking for, not sex);
etc...
Anything that needs to be correct and secure on your website (specially passwords and emails, etc), if you want to validate such you should do it on your server. Always!
Now, if you form is too long, you can do a step by step registration, instead of all in one. You can keep the progress saved in the session (server side) and maybe use a cookie to inform your site that they started the registration before (for this you can use javascript);
NOTE: You should inform your user you are using cookies as it is mandatory due to GDPR :)
Both validations help making the user journey smoother. There are things you should defo use as Js validation for quick response and making sure user is aware of some mistakes before they submit the form.
Server validation is safer for the sensible data that you need to make sure is correct as user as no say in it.
But it really depends on what you are trying to achieve and how many resources you have available to you.
Ajax form validation overalls
Form validation
Hope it helped clear some things up! :)

use this
https://reactiveraven.github.io/jqBootstrapValidation/
this will help you to set all validation on client side, once fullfilled, it will hit the 'validation success call method' and then go to ajax,
You can also set custom validation like, minlength, maxlength,should contain, maxcheck, mincheck, email/phone formats , etc
revert if any problem

Does form.submit() post checkbox data differently from standard submit button?

I just ran into an odd issue with my CodeIgniter app. I'm using a jQuery .on('submit') event handler to catch all form submissions and follows this procedure: grab the form object using this, stores the object for later, checks the user is logged in with an AJAX call, if logged in, gets the stored jQuery form object and submits the form with form.submit().
This works absolutely fine for all my forms (form validation works fine, returns validation errors correctly) except when I have a form with a checkbox. The checkbox is just ignored.
I use a required form validation rule to make sure the user ticks the checkbox before continuing and it works absolutely fine when this event handler is disabled however, the validation error only appears (oddly) when I add another input to the form that isn't a checkbox!
I'm wondering if there's someone that can understand the theory behind why this error is happening? I could post the code but I'm about 90% sure this is something to do with the way that JavaScript handles posting of checkbox data that I'm just not aware of.
Any ideas?

Javascript, by itself, doesn't actually post any form data.
In the standard HTML submit, if a checkbox is not checked, then there is no key/value submitted for that item.
I've learned the hard way that many Javascript form serializers (used by Ajax calls) are simply broken and don't follow the standards... I spend several days writing my own and my Qunit tests are almost longer than the code itself.
What you'll need to do is use your debugging tools (Firefox or Chrome) and watch the network tab -- see exactly what is submitted.

With very helpful advice from Jeremy J Starcher, I worked out the problem. CodeIgniter's form validation was not running since the $_POST array was empty. Usually, even with only one input field (a checkbox) the actual submit button's value is POSTed, therefore even if the checkbox isn't checked and no value for it is posted, the $_POST array is still populated by the submit button's value. However, when using Javascript to submit the form, the submit button's value is ignored and not POSTed (thanks to Jeremy for that vital info).
The solution was to add a blank, hidden input field (of a type that is always POSTed, regardless of value). There may be a nicer way to solve this using Javascript to create a blank POST variable or something and I welcome further answers relating to this.
As a side note, I was confused as to how CSRF validation was succeeding and yet the $_POST array was empty - I checked out CodeIgniter's Security Class and basically it checks the CSRF POST variable and if it's all good, it unsets it, so by the time the $_POST array was hitting the Form Validation Class, it was empty.

How safe is it to use prototypes Form.serialize()?

Somehow, when using Prototype's Form.serialize() to submit complex forms, I always feel a bit unsure as to whether this will work in all cases.
Possible issues I worry about are quote/string escaping issues, or perhaps the submission of unusual character codes, anything that could mess up the process.
So the question is:
Is it safe (on the client side) to collect all the data from a form using Prototype and then send it to the server via AJAX or are there any browsers that are known to have troubles sending forms this way — or perhaps, lack of support for it?

While no browser that I know internally uses Javascript to submit a form, the exact details of how a form should be submitted are very well documented.
It is quite possible to write form submission code in Javascript that follows the protocol exactly. On the other hand, an experienced coder may miss some of the edge cases -- like disabled checkbox controls.
I can't speak for the prototype library since I've never used it, but if there is a form that does not submit properly, or a server that does not take a submitted form, then it should be submitted as a bug report.

I'm not sure why you were downvoted originally, it's a valid question.
I think that the real answer, though, is that the security aspect really happens on the backend. It's OK to serialize an entire form and send it through a request but you need to validate the information that you receive on the other side.
For instance, you don't want to do this (or the equivalent in another language):
(assume $form is the serialized form)
foreach ($form as $key => $value) {
$object->$key = $value;
}
save($object);

Maths sum for javascript validation on form

Trying to create a very piece of validation to prevent spammers. I want a field with a label saying 'What's 2 + 7?' so the Javascript needs to know the result and pass the validation. I'm struggling to write this, would it be something along the lines of:
var valid = '';
var required = ' is required';
var sum = $('form #sum').val();
if (sum == '9') {
valid += '<p>An answer is' + required + '</p>';
}

It is hard to tell exactly what's needed without looking at more code.
A simple question like this may very well work if it is generated server side and it is a lot better for accessibility than captchas. In order to be effective the question and answer should also be randomly selected.
You may chose to include a pre-submit client side validation for usability purposes, but since spam bots ignore JavaScript, it is useless to prevent them, unless you do something really complicated.
A bonus tip off topic: Your JQuery selector is inefficient. When using an id-selector you will never need to include its parent.

Client side validation via Javascript is not going to do much to guard against spammers. Most spammers will have bots that don't even parse Javascript.
The only way to do this reliably is to handle it server side.
I would recommend trying something like Recaptcha: http://www.google.com/recaptcha

Ok so this is not going to answer your question per se but I want to suggest that you don't do this. Creating these spam preventions mechanisms is actually very complicated and your idea isn't really going to work if a spammer really wants to come after your site. I would suggest you look into a service called recaptcha. It is free, easy to set up and the information entered by users is put to use digitizing old books.

As I wrote in comments, you could prevent the bots from posting your data with just a javascript by itself. Let me explain how you could do it:
You could set initially the wrong or empty action for your form and later, with the help of javascript, set it to the correct one if the answer on the 'sum' was correct. Or even without the request for 'sum' as most of the spam-bots do not run js.
You could insert a hidden field named 'passed' with false initial
value of it. Again, based on form interaction, you could set it to
true and later check the data from the form (the value of this
hidden field) on the server.
The last method, which I prefer in most cases, is to encode html
code of your form with, for example, base64 and use your javascript
to convert it back to HTML code. As soon as bots do not run js, they
will not even know that you have a form on the page. The good part here is that you do not have to ask a person to enter something else in the form.
All these methods can be bypassed by a person interested in spamming on your website. He could check the final data sent to the server and create the set of the same requests to your server. That is why you need some server-side support in order to prevent you form even from manually crafted spam requests.

Advanced Form Validation in JavaScript

I'm already familiar with how to use onSubmit to evaluate form content against RegEx to ensure it meets static parameters for acceptable content. What I'm wondering is if there is a way to further provide validation against a MySQL database, such as if you want to make sure an e-mail address hasn't been used yet before submitting a form and having to re-load the field data back into the proper places for correction.

Unless you sent all the valid email addresses to the client (you wouldn't) then you're going to have to do some sort of server roundtripping to validate the field, which is equivalent to submitting the form. But using AJAX you can fully validate the form without the user experience being compromised; to them it will look like any other client-side validation. There are JQuery plugins to help make AJAX-based validation easier to code, but it isn't too hard to roll one up yourself.

you have to use a serverside language for that: php, perl, python... as javascript (client-side technology) cannot communicate with a mysql server (serverside technology) directly.
In javascript you could use the AJAX methodology if you want to avoid the full page refresh. Try using jquery, (a javascript library that take care of crossbrowser issues and simplifies greatly rich interaction programming) and its $.ajax() function. This has been made really easy through the use of the jquery form plugin.

Most examples of this kind of validation use some kind of asynchronous request back to the server to do the lookup in the database. Either by using XMLHttpRequest or some other Ajax style method.
I'd recommend creating a small URL end-point that you can make a quick HTTP request to sending the email address to check. It can return either true or false in a simple JSON response.