Check to see if certain fields have been filled out before a form is submitted

Question

I have a form that is sending data to a MySQL database and I want to make sure several of the fields are not left blank. I think I can figure out how to do this with JavaScript, but my question is should I? When I made the database table that I am working with I made the fields that I want to make sure are filled out NOT NULL to ensure I would at least get a MySQL error when they were left empty (I also realize that "empty" and NULL are not the same thing).

My question is, should I check to see if fields are empty/null with JavaScript before the form is submitted, or should I let the user attempt to submit the form and then base my corrective action on what every MySQL error I get back?

And a second question, if I do the first (check with JavaScript) what is the point of creating some fields NULL and some fields NOT NULL in my database if I am going to be catching all the possible "errors" with JavaScript before the submitted form hits the database?

Answer 1

You should validate on the client side before sending the data to the server. This would allow you to highlight errors to the user, potentially before they've submitted the data to the server.

But you should also validate on the server side. It's possible for someone to maliciously send invalid data to your server, bypassing the client-side validation.

Client-side validation is good for ensuring that the user gets some helpful feedback when they haven't filled in a form correctly. But relying only on that validation is insecure. Make sure the the server doesn't allow invalid data.

Also, if you ever allow the data to be accessed through some sort of API, you'll want server-side validation to prevent invalid data getting into the database.

Answer 2

My question is, should I check to see if fields are empty/null with JavaScript before the form is submitted, or should I let the user attempt to submit the form and then base my corrective action on what every MySQL error I get back?

Do both, check with javascript but checking with PHP is a must . Don't insert empty values if you want that.

Answer 3

You should always do checks on the back-end, regardless of whether or not there are JavaScript checks. What if someone has JavaScript disabled? What if the user is malicious and uses something like Firebug to compromise your JavaScript validation and security? It's not only possible, it's very easy to do. Always check on the back end.

I would say do the check in PHP first - if any fields are empty, take them back to the form and make them fill it back out. After it works in PHP, add JavaScript validation to make the form more usable.

Answer 4

You shouldn't be messing with back-end errors like this. Make sure you validate at client side with JavaScript. Not say ignore back end validations and or sanatization.

Answer 5

If you are not going to allow the user to submit the form with empty fields then you are correct there is no point allowing these fields to be NULL in the database.

I would say that you should use Javascript to validate as a usability issue (it saves the user waiting for a page reload to discover they have not entered a required field). However this needs to be backed up by server side validation and appropriate error messages for users with javascript disabled.

Answer 6

Your database should always enforce your assumptions about the structure of the data. It costs you nothing to do, but it serves as a last line of defense against corruption of your database.

Never assume that a client side process is going to hand you well formed data. Your server side scripts should consider anything coming from a browser as having come out of the saddle bag of a dead Pony Express rider whose horse dragged him in from the frontier.

Check on both sides. Setting your db column NOT NULL costs you nothing. Javascript uses the client's resources, so it also costs you nothing, and it gives your user instant feedback without having to communicate with the server.

You can check that a field has data by checking that it's value attribute is not an empty string. Something like:

if (formElement.attachEvent) { //handle IE
    formElement.attachEvent('onsubmit', function() {
        if (window.event.sourceElement.someFormElement.value === '') {
            // outline empty form in red or otherwise alert user of bad input
            return false;
        } else {
            // check other fields that can't be empty
        }
    }
} else {
    formElement.addEventListener('submit', function() {
        if (this.someFormElement.value === '') {
            // outline empty form in red or otherwise alert user of bad input
            return false;
        } else {
            // check other fields that can't be empty
        }
    }
}

Returning false from the even handler prevents the form from being submitted.

Answer 7

I'm a newcomer to SQL, so I've been reading up on ways to destroy and hack into DBs. Frightening! The bottom line, for me, is: always validate everything at your server BEFORE submitting any SQL query. Ref: http://www.securitydocs.com/library/3587

I also validate a lot of things via JS to maintain responsiveness, as many others have mentioned before.

A rule that I like a lot and try to follow: validate with a whitelist , the collection of things to allow. Don't validate with a blacklist, the things to disallow. Why? Because I really can't be sure the blacklist contains all things illegal. My carelessness and the constant pressure of hacker inventiveness ensure there will be hundreds or thousands of illegals.

It's much easier to be sure of the things that are allowable: there are relatively few of those guys.