jQuery form: on submit validation issue + stay on the same page after submit

Question

I'm not a programmer, just trying to fix & improve my contact form. Right now it's a HTML form (name, email, 4 checkboxes as subject, message). And mail.php (update: method="POST"). Everything works, I receive all form data.

But I have found a script to validate name, email & message inputs, here it is:

<script>
        $(document).ready(function() {
            <!-- Real-time Validation -->
            <!--Name can't be blank-->
            $('#contact_name').on('input', function() {
                var input=$(this);
                var is_name=input.val();
                if(is_name){input.removeClass("invalid").addClass("valid");}
                else{input.removeClass("valid").addClass("invalid");}
            });

            <!--Email must be an email -->
            $('#contact_email').on('input', function() {
                var input=$(this);
                var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
                var is_email=re.test(input.val());
                if(is_email){input.removeClass("invalid").addClass("valid");}
                else{input.removeClass("valid").addClass("invalid");}
            });

            <!--Message can't be blank -->
            $('#contact_message').keyup(function(event) {
                var input=$(this);
                var message=$(this).val();
                console.log(message);
                if(message){input.removeClass("invalid").addClass("valid");}
                else{input.removeClass("valid").addClass("invalid");}   
            });

            <!-- After Form Submitted Validation-->
            $("#button").click(function(event){
                var form_data=$(".myform").serializeArray();
                var error_free=true;
                for (var input in form_data){
                    var element=$("#contact_"+form_data[input]['name']);
                    var valid=element.hasClass("valid");
                    var error_element=$("span", element.parent());
                    if (!valid){error_element.removeClass("error").addClass("error_show"); error_free=false;}
                    else{error_element.removeClass("error_show").addClass("error");}
                }
                if (!error_free){
                    event.preventDefault(); 
                }
                else{
                    alert('No errors: Form will be submitted');
                }
            }); 
        });
</script>

Originally, it was showing error messages next to input fields, I decided not to use them (spans in HTML, "error" & "errow_show" classes in CSS), leaving just input field highlighting ("valid" green/"invalid" red CSS classes).

I feel like the problem is these lines:

var error_element=$("span", element.parent());
if (!valid){error_element.removeClass("error").addClass("error_show"); error_free=false;}
else{error_element.removeClass("error_show").addClass("error");}

And this script highlights empty name, invalid email and empty message. But when I click "SEND" button, the script, despite highlighting invalid fields, shows the alert "No errors. Form will be sumbitted" and sends form to me. The problem seems to be in its last part. I do not know how to properly remove "span", "error" and "error_show" from this script (3 lines before the second IF). I want my form to send everything to me if everything is valid and not send anything ("disabled button"?) if something is invalid. Without any alerts. If it also could stay on the same page after sumbitting... it would be an ideal thing (Submit form and stay on same page?, Submit a form using jQuery, jQuery AJAX submit form). Any help would be greatly appreciated!:)

UPDATE: form html: (removed as unnecessary now)

UPDATE 2: well, guys, this (weird? incorrect? semi-correct?) code I suddenly made up checks and highlights correctly as "valid"/"invalid" all 3 required fields (name, email, message) and shows correct alerts (I'll remove them later) on #button_send click and even sends the whole form with non-required non-validated checkboxes to me:

$('#button_send').click(function(){
if ($('#contact_name').hasClass('valid') && $('#contact_email').hasClass('valid') && $('#contact_message').hasClass('valid')) {
                    alert('No errors');
                    $('.form').submit();
                } else {
                    alert('Errors');
                    return false;
                }
            });

I want to thank everyone for every piece of advice and help.

Answer 1

You want to prevent the default action of the button and then call submit when you are ready.

http://api.jquery.com/event.preventDefault/

        <!-- After Form Submitted Validation-->
        $("#button").click(function(event){
            // prevent the form from being submitted
            event.preventDefault();

            var form_data=$(".myform").serializeArray();
            var error_free=true;
            for (var input in form_data){
                var element=$("#contact_"+form_data[input]['name']);
                var valid=element.hasClass("valid");
                var error_element=$("span", element.parent());
                if (!valid){error_element.removeClass("error").addClass("error_show"); error_free=false;}
                else{error_element.removeClass("error_show").addClass("error");}
            }
            if (error_free) {
                alert('No errors: Form will be submitted');
                // submit the form if no errors
                $( ".myform" ).submit(); 
            }
            else{
                alert('Errors shown');
            }
        }); 
    });

Answer 2

If you want it to be save, I recommend you to do backend validation to.

If in your HTML form, the method is set to "post", this will do the magic;

    $(document).ready(function() {
        <!-- Real-time Validation -->
        <!--Name cant be blank-->
        $("#contact_name").on('input', function() {
            var input=$(this);
            var is_name=input.val();
            if(is_name){input.removeClass("invalid").addClass("valid");}
            else{input.removeClass("valid").addClass("invalid");}
        });

        <!--Email must be an email -->
        $("#contact_email").on('input', function() {
            var input=$(this);
            var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
            var is_email=re.test(input.val());
            if(is_email){input.removeClass("invalid").addClass("valid");}
            else{input.removeClass("valid").addClass("invalid");}
        });

        <!--Message cant be blank -->
        $("#contact_message").keyup(function(event) {
            var input=$(this);
            var message=$(this).val();
            console.log(message);
            if(message){input.removeClass("invalid").addClass("valid");}
            else{input.removeClass("valid").addClass("invalid");}   
        });

        <!-- After Form Submitted Validation-->
        $("#button").click(function(event){
            event.preventDefault();
            var form_data=$(".myform").serializeArray();
            var error_free=true;
            for (var input in form_data){
                var element = $("#contact_"+form_data[input]['name']);
                var valid = element.hasClass("valid");
                if (!valid){
                    error_free=false;
                    element.addClass("invalid");
                }                  
            }
            if (error_free){
                //Submit the  form
                $.post({url: 'mail.php', data: form_data, dataType: 'json'}).done(function(){
                    //clear the fields
                    $("[id^=contact_]").val('');
                })
            }

        }); 
    });

Answer 3

The Problem:

The behavior you're seeing is because you deleted the controls that your code was using to validate/invalidate your form. Without those controls, due to the way it was written, it defaults to a valid state regardless of the actual validity of the inputs.

Solution #1:

If you have a backup, the easy thing to do would be to revert back to how it was before you touched it and just add 'hidden' as properties to your spans. This way they wouldn't be visible to your user, but would still validate the inputs for you.

Solution #2:

If you aren't able to do that, then you'll need to modify your submission code to validate off the remaining controls and their classes. I don't have your full code to test this, but I believe something like this would work:

<!-- After Form Submitted Validation-->
$("#button").click(function(event){
    var error_free=false;
    $.each($('.myform > input'), function() {
        error_free = $(this).hasClass('valid');
        if (!error_free){
            event.preventDefault();
            return false;
        }
    });
    if (error_free){
      alert('No errors: Form will be submitted');
    }               
});

The snippet above loops over any inputs inside of the control with the class 'myform' and checks if they have the 'valid' class, then sets a variable true or false depending. If it detects there is an invalid control, it exits the loop and does not proceed with Posting the form.

Hope that helps.