I have a function to validate a form using Javascript. The function gets called onClick and returns a value of true or false:

<a href="#" class="button color" onclick="validateMyForm();">Submit</a>

I have a jQuery modal I am using that looks like this....

<a href="#" class="button color" data-reveal-id="myModal">Submit</a>

The "data-reveal-id" makes the modal come up. The problem is that the modal is coming up when the button is click regardless of the forms validity. The onClick to validate the form and the "data-reveal-id" go in the same href when combined.

<a href="#" class="button color" onclick="validateMyForm();" data-reveal-id="myModal">Submit</a>

^Above is the result that checks the form but opens the modal regardless. Any suggestions?