提交表格确认文本

Have some problem with my "Your message has been submitted!" text after user click submit button on my form. Problem is this text is appearing at the begining even if nothing has been clicked yet, so when you go my page this text is already there... WHat is wrong here?

Form:

<form role="form" id="contactForm">
     <div class="row">
            <div class="form-group">
                 <input type="text" class="form-control" name="name" id="name" placeholder="Wpisz swoje imię, nazwisko" required="required">
            </div>
            <div class="form-group">
                <input type="email" class="form-control" name="email" id="email" placeholder="Enter email" required>
            </div>

        <div class="form-group">
            <textarea id="message" name="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
        </div>
        <button type="submit" id="form-submit" class="btn-block">Wyślij wiadomość</button>
 <div id="msgSubmit" class="h3 text-center hidden">Your message has been submitted!</div>
     </div>
    </form>

JS:

<script>
$(document).ready(function() {
    $("#contactForm").on("submit", function(event) {
        if (event.isDefaultPrevented()) {
        } else {
            event.preventDefault();
            submitForm();
        }
    });

    $("#msgSubmit").removeClass("hidden");
});

function submitForm() {
    $.ajax({
        type: "POST",
        url: "mail.php",
        data: $("#contactForm").serialize(),
        success: function(text) {
             if (text == "success"){
                formSuccess();
            }
        },
        error : function() {
        }
    });
}

$(document).ready(function formSuccess() {
    $("#msgSubmit" ).removeClass( "hidden" );
});

</script>

PHP:

<?php
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];

$EmailTo = "unknown@unknwon.com.pl";
$Subject = $name;

$message .= "

" . 'From: '. $email;
$success = mail($EmailTo, $Subject, $message);

// redirect to success page
if ($success){
   echo "success";
}else{
    echo "invalid";
}
?>

I have:

1. moved the remove class in the submit event.

2. removed the "ready" handler at the end because I think that it was not necessary.

3. added a add class when the ajax call ends

Script (first option):

<script>
$(document).ready(function() {
    $("#contactForm").on("submit", function(event) {
        if (event.isDefaultPrevented()) {
        } else {
            event.preventDefault();
            $("#msgSubmit").removeClass("hidden");
            submitForm();
        }
    });

});

function submitForm() {
    $.ajax({
        type: "POST",
        url: "mail.php",
        data: $("#contactForm").serialize(),
        success: function(text) {
            $("#msgSubmit" ).addClass( "hidden" );
        },
        error : function() {
                $("#msgSubmit" ).addClass( "hidden" );
        }
    });
}

</script>

Second option (message only at the end if success):

<script>
$(document).ready(function() {
    $("#contactForm").on("submit", function(event) {
        if (event.isDefaultPrevented()) {
        } else {
            event.preventDefault();
            submitForm();
        }
    });

});

function submitForm() {
    $.ajax({
        type: "POST",
        url: "mail.php",
        data: $("#contactForm").serialize(),
        success: function(text) {
            if (text == "success") {
                $("#msgSubmit" ).removeClass( "hidden" );
                setTimeout(function() {
                    $("#msgSubmit" ).addClass( "hidden");    
                }, 3000);
            }
        },
        error : function() {
            /* You probably want to add an error message as well */
            $("#msgError" ).removeClass( "hidden" );
        }
    });
}

</script>

You are removing class hidden from #msgSubmit container in document.ready. You should enable this message only after form is successfully submitted.

Comment the line as below:

$(document).ready(function() {
    $("#contactForm").on("submit", function(event) {
        if (event.isDefaultPrevented()) {
        } else {
            event.preventDefault();
            submitForm();
        }
    });

    //$("#msgSubmit").removeClass("hidden"); // comment this line
});