How to do javascript alert only when validation passes

See more:

Javascript

HTML

jQuery

I have an email textbox (required field) and a button. I want that whenever a user puts his mail id and clicks the button a JavaScript popup should appear.

My problem is when I click the button, that popup is appearing before the required-field msg.

I want JavaScript code written in a way that if textbox is empty then it will show a "please enter email id" validation message and if user gives his email id then that popup will appear; otherwise not.

pls help me out


this is my text box and button

<div class="input-append">
              <input type="email" id="email" name="email" placeholder="Your Email" required>
              <button class="subscribe-button btn" type="submit" onclick="myFunction()">SUBSCRIBE</button>
            </div>

and this is my javascript code

<script type="text/javascript">
function myFunction() {
    alert("You have done it");
}
</script>