I want to validate a form in a bootstrap modal without using any framework. It's actually a simple modal with only an input text and two buttons Close and Send.
The user should type his/her name in the input box and click send. The form is the sent with the method post.

What I want to do is that, if the user doesn't enter anything in the input box of and clicks on the button Send, the input box should have a red border circling it instead of the default blue border. Here's the code for my 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>

I tried using javascript to change the class of the input text to has-errorbut it doesn't produce the red outline. When I click on send it sends the empty value through the post method instead of
Here's my javascript code:

    <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>

I feel like I'm mixing a whole lot of things here. I'm still new to bootstrap and javascript. How can I go about getting the desired red outline?
Thanks.

Edit:
Validate function:

function validate() {

    var x = document.forms[myForm][firstname].value;

    if (x == null || x == ) {

        return false;

    }

}