swal form validation before submit

Hello SweetAlert creator,

I first of all want to congratulate on developing a beautiful and easy to use pop-up script.

For the past week I have tried to use Swal and jquery form validation examples to validate input before submitting a form and I have reached a big brick wall and need to reach out for help.

I have a swal pop-up on my website (http://plantswap.com.au) that appears when you click on “Tell a friend” button. The SWAL componnent works fine, but it submits the form even if I haven’t entered any input. Also, I am not sure that anything actually happens on submit. When submit is clicked, a php file is called through AJAX that should send an email.

Here is the javaScript in my header.php file:

–>

    <script>

         document.querySelector('div.sweetpop1 button.tell').onclick = function(e){
         e.preventDefault();
            swal({
                title: "Tell your friends!",
                text: '<form role="form" id="contact-form" method="post"><div class="control-group"><label for="friend_name">Your friend\'s name</label><input type="text" placeholder="Your friend\'s full name" id="friend_name" name="friend_name" required></div><div class="control-group"><label for="email">Email</label><input type="email" placeholder="Your friend\'s Email" id="email" name="email" required></div></form>',
                html: true,
                showCancelButton: true,
                showConfirmButton: true,
                confirmButtonText: "Submit",
                function( confirmed ) {
                        if( confirmed )
                            $(this).closest('form').submit();
                }
                });
            };


    $('#contact-form').on('submit', function(e){
        e.preventDefault();
        var myForm = $("#contact-form");
        if(myForm.valid()){

            var theData = {
                 friend_name: $('#friend_name').val(),
                 email: $('#email').val(),

            };

            $.ajax({ // ajax call starts
                url: "http://plantswap.com.au/wp-content/themes/flatads/tell_a_friend.php",
                type: 'post',
                data: theData,
                success: function(data)
                {
                    swal("Your request has been received!", "We will contact you for confirmation soon", "success");
                    document.getElementById('friend_name').value='',
                    document.getElementById('email').value='';

                }

            });
        }
    });

if you test this, you will see the swal pops up but the validation does not work. I even tried using the tramero SWAL addition (swal.forms) but the alignment and horizontal and vertical scroll bars were all wrong, so I gave up on that.

Can you please help me modify the above source code to get the form validation working, as well as follow through on the submit so the parameters are passed to my PHP file via the submit POST?

Thanks in advance.

Kind regards, Henry