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

Client side validation for PHP project good or bad? And how to improve the PHP project?

new to PHP. After around hours of learning&practising I have created a small PHP project with MySQL database for check/create/edit/delete employee's information.
So here are my questions to improve it(as a good and smart php project standard, doesn't have to be a enterprise levelled one):
Should I use more Javascript to do the client side validation , or use PHP functions to do the job mostly? (e.g. check if form data was entered with the correct format )
To modify the employee's information , what should I do to make sure the data was created/edited with the same standard inside database(e.g. first & second name should always starting with the one(and the only) upper case letter no matter what did user entered into the forms), javascript, php function or the sql queries? I think they could all make it working but which one is the best way and why?
This kind of code is driving me crazy
<input type="text" name="inputFname" class="field-divided" placeholder="First"value="<?php echo $emp['f_name'] ?>"/>
Any better way to make the php code separated with the html code?

Any and all data coming from an untrustworthy source (the client, which can be manipulated by a hostile user) needs to be validated and sanitized within a controlled, secure environment (the server, which is locked away where end-users can't get at it) before being allowed contact with the database.
You can (and should) also perform "bozo-test" validation at the client to ensure completeness, correct formatting &c.; client-side validation allows you to inform the user of an error immediately without the overhead of a round-trip to the server. Keep in mind, though, that client-side validation can not protect you from an actively hostile user.
Hope that helps.

Meteor check text before database insert

I have a simple textarea which people can insert a paragraph of text. A user doesn't have to be logged in to submit, and the submit will be displayed in the browser straight away.
My question is around validating the text in the client. I am planning to use .allow then insert in the client. What is the best way to check that the text is not something which will do something harmful in the database once the data is committed?
I am new to web development, so I am not sure if anyone can write some harmful text which when submitted will delete the entire database once it is inserted, or do something else harmful.
It may be impossible, but I was wondering if anyone checked the schema for anything harmful before submitting.

I think this is really two questions.
One: Can someone insert malicious text into the database (like SQL injection)?
The answer to this is no, nothing they write can get directly executed. For instance, they could enter the text: "function(){ /do some naughty things/ }", which would just end up as a string in whatever document you store it in.
Two: How do I validate data before inserting into the database?
Regardless of whether query injection attacks are a significant risk or not, any web-application should always expect and deal with bogus form entries. In terms of validation, you have a lot of options out there. My personal favorite is Collection2, which will automatically validate all data against a schema you define when creating the collection.You can easily define min/max lengths, type restrictions, or use the custom option to define a custom function to validate a field. This is a really easy way to make sure all your data get's validated before inserting into the database.

Best practice for handling errors in forms submitted via ajax?

I'm wondering what is considered best practice for dealing with forms submitted via ajax. Specifically, I'm wondering what is the best way to handle a form which contains errors.
I see two possible options upon submitting a form with errors:
A. The server returns a JSON document of name value pairs of fields names / error messages. This would then need to be processed client-side and the form would need to be altered by prefixing each field with it's error message and changing the form's styling (adding an error class to the fields for example).
OR
B. The server simply returns a new HTML fragment containing the form with error messages and styles pre-applied. No need to process anything client-side except swap-out the form.
To me option B seems like the easier/quicker option but I can't help but feel that it isn't 'best practice'. Is there pros/cons for either method?

Separation of logic is a huge one here I reckon.
As a project grows, you generally have a front-end team and a back-end team. Imagine the website gets a huge makeover but the logic stays the same. Option B is harder to change the style when the layout is enforced server side.
The application logic (which is this case is server side validation) should be separate from the presentation layer (which is this case is the html/css rendered by the browser).
But at the end of the day, we get paid to produce results so if your not trying to win an academy award for best quality code, and you got bills to pay, just get it done the quickest way.

I'd go with the first option.
The second option just increases the load on the server ... which you always want to avoid. Plus, I feel that if the styling was done on the server-end, the your website isn't exactly modular ... all styling should be done on the front end only.

This is sort of an opinion question but there are a few objective things to say about the topic. Your first option, the pure JSON choice is best used for apps that focus on speed an keeping HTTP requests as small as possible.
The other option, to process your form server-side then return the new form through AJAX doesn't seem to have too many advantages to me. If you're going that route then why bother with AJAX at all? Why not just do a regular form post to the server?
I usually prefer a front end validation and server-side verification. This way you can avoid a JSON call at all if things aren't valid but just in case someone sneaks something in there the server-side code will verify.

I would establish a JSON scheme for validation on the front end. Just basic stuff like what you're checking for on each field, which fields are optional, etc... That gets baked into every page with a form on it. Then let your front end devs pre-validate to avoid unnecessary calls in whatever way makes the most sense to them.
Pre-built errors isn't against any best practice I'm aware of and it's not a terrible way to go (people tend to throw the UI manual of style out the window when it comes to forms anyway), but sometimes you'll want to give more specifics or different errors for different problems.
Always aim for having your cake and eating it too, IMO.

Favorite Web Form Validation Technique

What is everyone's favorite way to sanitize user data?
I've been using Javascript, but have recently required something more secure (people can turn it off, after all), so I was looking at Flex, but thought I'd ask the community what they thought.

NEVER NEVER NEVER use javascript or any other client-side technology for the only validation. You can use client-side validation to save some load on your server or make your app seem more responsive by showing the error sooner when validation fails, but you should always validate using server-side code.
Personally, I like the ASP.Net validation controls because it gives you the benefit of client-side validation with security of server-side, without having to write your logic twice. Of course, the stock controls are pretty bare, but you can extend them.

Validation should ALWAYS be done server-side. Doing it client-side, in addition, is fine.
How you do it depends on what your app is written in. Any language should be able to handle validation; the logic used is what matters, not the language.
It also depends on what you're doing with the data you're given. Putting it in a URL or storing it in a SQL database requires two very different kinds of sanitization. If at all possible, white-list valid values--don't black-list invalid values. Someone will always be able to come up with a new mal-input you hadn't considered.

Depending on the requirements of your project you may or may not want to implement client-side validation. However, server-side validation should ALWAYS be implemented. I prefer to white-list appropriate inputs and values as opposed to black-listing invalid data because this ensures that no one will ever slip something by that I failed to consider.

always use server side validation at the very least
use regular expressions
PHP Example:
preg_match('/^[\w][\w\,\-\.]*\#[\w]+[\w\-\.]*$/', $_GET['email'], $matches);
if (count($matches) > 0) {
$_GET['email'] = $matches[0];
} else {
die('invalid email address');
}

It's recommended to use both server- and client-side validation.
I use JQuery for client side validation.