Having trouble validating a form- Please help

Hi I'm not too sure where I went wrong here, but if someone can please look at this code, it will be much appreciated. The form is sending the data out correctly, but it's not validating. I've tried using html5, and jquery to validate these input fields... and technically, it should work- but it's not...where did I go wrong? I've been trying to figure this out for a few days now...

Ok, so, here's the link to my files:

https://www.dropbox.com/sh/ef321r70ie0l508/tAAjK0dw8A

..I created a symbol called form, and attached these actions to it:

$("<input type='email' id='Email' class='required' name='Email' tabindex='2' maxlength='200' style='background-color:white; border:1px solid black' required>").appendTo(sym.$("emailbox"));

$("<input type='text' id='Firstname' class='required' name='first_name' pattern=' .{5,30}'  tabindex='1' maxlength='200' style='background-color:white; border:1px solid black' required>").appendTo(sym.$("firstnamebox"));

$("<input id='myform' >").appendTo(sym.$("form"));

$("#myform").validate();

...and my send button has these actions attached to it:

var emailFromVal = Email.value;

var messageVal = "<strong><p><font face='helvetica' size='5'> Name : "+Firstname.value+"<br><br> Email: "+Email.value+"</p>";

// we add this variable to make sure if anyone find out the address of our php file cant send empty message by calling php file by url

var Permission = 1;

alert("Thank you, we will contact you shortly");

$.post("sendEmail.php",{ flag:Permission, email:emailFromVal, message:messageVal });

sym.$("#Email").detach();

sym.$("#Firstname").detach();

Permission = 0;