Valider la saisie de texte dans le bootstrap modal

Je veux valider un formulaire dans une modal bootstrap sans l'aide de n'importe quel cadre. Il est en fait simple modal avec seulement une entrée de texte et deux boutons "Fermer" et "Envoyer".
L'utilisateur doit saisir son nom dans la zone de saisie et cliquez sur envoyer. Le formulaire est envoyé avec la méthode post.

Ce que je veux faire, c'est que, si l'utilisateur ne rien saisir dans la zone de saisie de et clique sur le bouton "Envoyer", la zone d'entrée doit avoir une bordure rouge encerclant la place de la valeur par défaut bordure bleue. Voici le code de mon modal:

<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!--form-->

            <form class = "form-horizontal" id="myForm" method="post" action="test.php" role="form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">My modal</h4>
                </div>
                <div class="modal-body">
                    <p>
                        Please enter your name:
                    </p>
                    <br/>

                    <div class="form-group">

                        <div class="col-lg-12">
                            <label class="control-label" for="firstname">Name</label>
                            <input type="text" class="form-control required" id="firstname" name="firstname">
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="myFormSubmit" class="btn btn-primary">Send</button>
                </div>
            </form>
        </div>
    </div>
</div>

J'ai essayé d'utiliser javascript pour modifier la classe de la saisie de texte à has-errormais cela ne produit pas le contour rouge. Quand je clique sur envoyer il envoie la valeur vide par la méthode post au lieu de
Voici mon code javascript:

    <script type="text/javascript">
        $('#myForm').validate({
            rules: {
                name: {
                    minlength: 1,
                    required: true
                },
            },
            highlight: function (element) {
                $('#firstname').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {
                $('#firstname').removeClass('has-error').addClass('has-success');
            }
        });
    </script>

Je crois que je suis un mélange de tout un tas de choses ici. Je suis encore nouveau pour l'amorçage et le javascript. Comment puis-je obtenir le désiré contour rouge?
Merci.

Edit:
Valider la fonction:

function validate() {
    var x = document.forms["myForm"]["firstname"].value;
    if (x == null || x == "") {
        return false;
    }
}