Prevent user to send empty fields

Question

My jQuery validation form warns user if he tries to send empty data if he clicks "Next" button.

Anyway, user still able to send empty data by pressing Enter.

So I used code below, it makes pressing Enter same with clicking "Next" button;

// this script makes pressing Enter gives error. But empty data still goes to database.
   $('.form-horizontal').keypress(function (event) {
        if (event.which === 13) {
        $(".next").trigger('click');
        }
        });

This code only prevents user to go next step. But when user hits the Enter data being written to database even though he sees "Error Message".

*

Well, server-side verification prevents that easily. But why it's necessary keep server busy with that if we can prevent earlier?

Here is JsFiddle you can test the whole thing:

http://jsfiddle.net/6zu2vsj7/3/

*

Is there any way to make it work without keeping servers busy with empty fields? And I don't want to prevent user pressing Enter because this is not cool at all and not good for user experience.

Clients can always forge request, ALWAYS validate on server side if you care about what is stored in the database. Client side checks should only be used for UX reasons. That said, you can always use 'required', or do a check of the value before submitting the form. — folkol, Aug 29 '15 at 15:47
might also be relevant to your concern http://stackoverflow.com/questions/10281962/is-there-a-minlength-validation-attribute-in-html5 — Daniel Lizik, Aug 29 '15 at 15:47
For example, EVERYONE can manipulate the page's HTML from the pages, or deactivate JavaScript so you have to validate all your information on both sides. — André Silva, Aug 29 '15 at 15:51
Well, maybe I didn't explained myself clearly. I know server-size validation is a **must.** I was looking for a forehand solution instead of making servers busy when it's not necessary. And I found it. — Lukasz, Aug 29 '15 at 16:14

score 2 · Accepted Answer · answered Aug 29 '15 at 15:57

You can add a condition to check whether the form is valid or not before you sending the data to server as below. hope this helps...

// Let's act like we send to database.
            $(function(){
                $('input[type=submit]').click(function(){
                    if($("#myform").valid()){

                    $.ajax({
                        type: "POST",
                        url: "sent.php",
                        data: $("#myform").serialize(),
                        beforeSend: function(){
                            $('#stepsuccess').html('Sent to the database. Strange.');               
                        },
                        success: function(data){
                            $('#stepsuccess').html(data);

                        }
                    });
                    }
                });
            });

score 1 · Answer 2 · answered Aug 29 '15 at 15:50

You just need to prevent the default behavior for that event

you can use this

 $('.form-horizontal').keypress(function (event) {
            if (event.which === 13) {
                event.preventDefault();
                $(".next").trigger('click');
            }
        });

score 0 · Answer 3 · answered Aug 29 '15 at 15:51

Try this:

$(".form-horizontal").submit(function(e){
//do somethings or other validations
return false;
});

well! server side validation is necessary because client side validation is just for normal users! not hackers and robots! got it?! in fact client side validation can be easily pass.

Prevent user to send empty fields

3 Answers3