We Keep Coding

Custom checkout button in checkout.liquid

I am looking to create my own checkout button in checkout.liquid, we currently have a form checkout process but are running into and issue with getting our submit button to complete an order. We do not want to use the shopify standard checkout since this is a specialized store and everything is $0. Shipping and billing is done outside of shopify.
Here is our current layout for our form.
#textHead {
font-weight: bold;
padding-bottom: 8px;
padding-left: 5px;
padding-top: 10px;
}
#configHead{
padding-bottom: 8px;
padding-left: 5px;
font-weight: bold;
}
.textarea {
background: white;
border-radius: 8px;
padding-left: 5px;
padding-top: -10px;
border: solid 1px lightgray;
transition: all 0.3s ease 0s;
max-width: 100%;
}
.textarea:hover {
box-shadow: 2px 6px 25px 2px rgba(10,10,120,0.15);
transform: translateZ(-15px);
}
.strike {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
padding-bottom: 25px;
padding-top: 10px;
color: black;
}
.strike > span {
position: relative;
display: inline-block;
}
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 1px;
background: #0F4B97;
}
.strike > span:before {
right: 100%;
margin-right: 15px;
}
.strike > span:after {
left: 100%;
margin-left: 10px;
}
#import url('https://fonts.googleapis.com/css?family=Open+Sans:600');
.check {
bottom: 0;
display: flex;
left: calc(50% + 40px);
margin-bottom: 10px;
}
.containerOuter {
background: white;
border-radius: 8px;
}
.container {
position: relative;
margin: 20px;
overflow: visible;
width: 100px;
}
.hidden {
display: none;
}
.entry {
height: 25px;
position: absolute;
width: 160px;
}
.entry:nth-child(2) {
left: 8px;
top: 8px;
}
.entry:nth-child(4) {
left: 8px;
top: 58px;
}
.entry:nth-child(6) {
left: 8px;
top: 108px;
}
.circle {
border: 2px solid #545556;
border-radius: 50%;
cursor: pointer;
height: 20px;
position: absolute;
transition: border-color 300ms;
width: 20px;
}
.entry-label {
cursor: pointer;
margin-top: -3px;
padding-left: 40px;
user-select: none;
-moz-user-select: none;
}
.overlay {
background: #fff;
mask: url(#holes);
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACMCAYAAAAOc+uVAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAItSURBVHic7ZnNjhJBFIVPA0txr0Iyw+tIdOXWaDRufZWZeYbZuMKOUV9Gg+HHGN/BHBcNcSBT1KVOEVycb0mq635UVd9U5zQkif+Y3rkFclhQxYIqFlQZiM8vALQAPgP4AWC1+X0E4ALAFMBzAOPiCixjRfIdyX5g/h7JFyTnJYVKBGckHxQsxJBke2rBK5LF55bdal6fSnCmyO1JhlcyKrhkwbYekBySXNcUfF1L7o7k20jhhsxetxYAJk3T/Kks2EfXmkaHxkXO1MfacgCwmbPNjYsIftV1knzJDYgIfqsgkuJ7bkBE8FcFkRTr3IBzXxay9SOCjyuIFM8dEZxUECmeOyL4tIJIimluQKRRLwFcnqBRDwDMUaFRjwG8quC0zxtk5ACEL6wrksNaZiQfkvwZKRxtM08AfGDgBh2Q6wG4BfAo+sAxXB/xp+6VI3lzTMGSK3/Lgu1mt62fji1W+tH0m+R7dm9iZNVeMnjm9om0mUOs8O+zc47dz84Juh76DJG3NYEqeHLOfVnIYkEVC6pYUMWCKhZUsaCKBVUsqGJBFQuqWFDFgipO3OnEfRcn7qWCTtxTOHFP4cS9Ek7cVZy4qzhxL4ZO3AXoxF2QoxP3DifuW5y4q1hQxYIqFlSxoIoFVSyoYkEVC6pYUMWCKhZUsaCKE3c6cd/FiXupoBP3FE7cUzhxr4QTdxUn7ipO3IuhE3cBOnEX5OjEvcOJ+xYn7ioWVLGgigVV/gKEL4RSyM8Z8wAAAABJRU5ErkJggg==);
height: 80px;
pointer-events: none;
transition: background 300ms;
width: 40px;
}
.highlight {
background: #4D98EF;
border-radius: 50%;
height: 12px;
left: 14px;
pointer-events: none;
position: absolute;
top: 14px;
transition: transform 400ms cubic-bezier(0.175, 0.885, 0.32, 1.2);
transform: translateY(-50px);
width: 12px;
}
.hidden:nth-child(1):checked ~ .highlight {
transform: translateY(0);
}
.hidden:nth-child(3):checked ~ .highlight {
transform: translateY(50px);
}
.hidden:nth-child(5):checked ~ .highlight {
transform: translateY(100px);
}
.hidden:nth-child(1):checked + .entry .circle {
border-color: #4D98EF;
}
.hidden:nth-child(3):checked + .entry .circle {
border-color: #4D98EF;
}
.hidden:nth-child(5):checked + .entry .circle {
border-color: #4D98EF;
}
.check:checked ~ .containerOuter .overlay {
background: #ecf0f4;
}
</style>
<button type="submit" name="checkout" class="Cart__Checkout Button Button--primary Button--full">{{ 'cart.general.checkout' | t }}</button>
<form action="ecom#epcusa.com" method="get">
<div class="section1">
<div class="strike">
<span>LAB SERVICES</span>
</div>
<div id="textHead">Would you like to request lab services from our technology center?</div>
<div class="containerOuter">
<div class="container">
<input type="radio" class="hidden" id="input1" name="inputs">
<label class="entry" for="input1"><div class="circle"></div><div class="entry-label">No</div></label>
<input type="radio" class="hidden" id="input2" name="inputs" checked="checked">
<label class="entry" for="input2"><div class="circle"></div><div class="entry-label">Yes</div></label>
<div class="highlight"></div>
<div class="overlay"></div>
</div>
</div>
<svg width="0" height="0" viewBox="0 0 40 140">
<defs>
<mask id="holes">
<rect x="0" y="0" width="100" height="140" fill="white" />
<circle r="12" cx="20" cy="20" fill="black"/>
<circle r="12" cx="20" cy="70" fill="black"/>
<circle r="12" cx="20" cy="120" fill="black"/>
</mask>
</defs>
</svg>
<div id="box" class="config">
<p id="textHead">Lab Configuration Instructions</p>
<textarea class="textarea" name="config-instructions" cols="75" rows="5">Combine with order #[Y/N]:
Engineer Email:
Requester Email:
PM Email:
</textarea>
</div>
</div>
<div class="strike">
<span>SHIPPING</span>
</div>
<div>
<p id="textHead">Ship To MAC:Address</p>
<p>
<input type="text" class="textarea" name="shipping-search" placeholder="MAC:Address" />
</p>
<p id="textHead">Custom Address</p>
<p>
<textarea class="textarea" name="shipping-search" placeholder="Custom Adress" cols="75" rows="5"></textarea>
</p>
<p>
<p id="textHead">Shipping Instructions</p>
<!-- <p id="textSub">Provide any specific shipping requirements for your order.</p> -->
<p>
<textarea class="textarea" name="ship-instructions" cols="75" rows="4" placeholder="Example: Forklift driver, proof of insurance required, etc"></textarea>
</p>
<p>
<p id="textHead">Shipping Method</p>
</p>
<p>
<label for="ship-method" class="textarea">
<select name="shipping-method" id="ship-method" width="50px">
<option value="UPS Ground">UPS Ground</option>
<option value="Fedex Ground">Fedex Ground</option>
</select>
</label>
</p>
<p id="textHead">Requested Arrival Date</p>
<p>
<!-- <sub>Your order's request date may be based on pre-defined working days and service level agreements related to this store</sub> -->
</p>
<input type="date" class="textarea" name="arrival" />
<p>
<b>Ship To Contact</b> <!-- (Add API call for contact lookup here if can't integrate it into ship to address - Contact Email / Phone #) -->
<br /> <sub>Main point of contact for the delivery of your order.</sub>
</p>
<p>
<input type="search" class="textarea" name="shipping-contact" placeholder="Search Contact" />
</p>
</div>
<div class="strike">
<span>BILLING</span>
</div>
<label for="billing">
<b>PO Number</b>
<br />
</label>
<sub>Point of reference for your order.</sub>
<p>
<textarea class="textarea" name="po-number" cols="25" rows="1"></textarea>
</p>
<div class="strike">
<span>ORDER INFORMATION</span>
</div>
<label for="order-info">
<b>Ordered By Contact</b>
<br />
</label>
<sub>This contact will receive a confirmation email and order status notifications depending on store access and preferences.</sub>
<p>
{{ customer.name }} | {{ customer.email }}
</p>
<label for="additional-email">
<b>Additional Confirmation Email Recipients</b>
<br />
</label>
<sub>Add additional email recipients here</sub>
<p>
<textarea class="textarea" name="add-email" cols="75" rows="1" placeholder="Seperate with a "," for multiple addresses"></textarea>
</p>
<p>
<label for="reference-number">
<b>Customer Reference Number</b>
<br />
<sub>Add any additional order identiying reference numbers</sub>
</label>
</p>
<p>
<textarea class="textarea" name="reference-number" cols="25" rows="1"></textarea>
</p>
<div class="strike">
<span>COMPLETE CHECKOUT</span>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#input1").click(function(){
$("#box").slideUp("slow");
});
$("#input2").click(function(){
$("#box").slideDown("slow");
});
});
</script>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
var x = $("form").serializeArray();
$.each(x, function(i, field) {
$("#output").append(field.name + ":"
+ field.value + " ");
});
});
});
</script>
</head>
<body>
<div>
<button>Submit</button>
</div>
<div id="output"></div>
</body>
</html>```

Contact Form Animation

I have the following code:
input[type=text], [type=email], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index:2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom:auto;
margin-top:1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column, input[type=submit] {
width: auto;
margin-top:0;
}
}
<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="thankyou.html" method="POST">
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your firstname.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your last name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate..." style="height:170px" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>
So what I am basically looking for is the shake effect when the user submits without entering any inputs.
Expected Output
When the user hits the submit button without entering anything, the border of the box should turn red as well as shake. I just want the boxes of the placeholders to shake and turn red, not the whole element. I tried adding keyframes to make this possible but got stuck since I was not getting the desired output, any suggestions?
In other words, I just would like the first name, last name, email, and subject borders of the boxes to turn red and shake.

Add an event listener for submit that loops through all the input and textarea fields and checks whether they are valid with checkValidity(). If they are not valid, we set their border color to red with the borderColor style attribute and set their animation with the animation style attribute.
To be able to play the same animation over and over again, we can use setTimeout to wait a specified number of milliseconds and then set the animation style attribute back to unset.
document.querySelector('form').addEventListener('submit', function(e) {
var isValid = true;
this.querySelectorAll('input, textarea').forEach(function(f) {
if (!f.checkValidity()) {
isValid = false;
f.style.borderColor = "red";
f.style.animation = "shake 0.82s forwards";
setTimeout(function(){f.style.animation="unset";},820);
}else{
f.style.borderColor = "initial";
//Sets it back to normal if the field is valid
}
})
if (!isValid) {
e.preventDefault();
}
})
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: 1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: auto;
margin-top: 0;
}
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="thankyou.html" method="POST" novalidate>
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your firstname.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your last name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate..." style="height:170px" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>

Html CSS form not showing radio button

I want to create a registration form. I put the HTML radio button code but however, it is not showing the radio buttons.
I used the "inspect element" in google chrome developer tools but couldn't resolve the problem.
I have highlighted the error-prone area. Rest areas are working fine.
Project code is given. I am new to Front End, Kindly help.
$('.form').find('input').on('keyup blur focus', function(e) {
var $this = $(this),
label = $this.prev('label');
if (e.type === 'keyup') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.addClass('active highlight');
}
} else if (e.type === 'blur') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.removeClass('highlight');
}
} else if (e.type === 'focus') {
if ($this.val() === '') {
label.removeClass('highlight');
} else if ($this.val() !== '') {
label.addClass('highlight');
}
}
});
$('.tab a').on('click', function(e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
background: url(../background.jpg);
/*font-family: 'Titillium Web', sans-serif;*/
font-family: 'Roboto', sans-serif;
background-size: cover;
}
.user {
width: 80px;
height: 80px;
border-radius: 50%;
position: relative;
top: -10px;
left: calc(50%-50px);
right: -170px;
}
a {
text-decoration: none;
color: rgb(39, 153, 219);
transition: .5s ease;
}
a:hover {
color: #179b77;
}
.form {
padding: 40px;
max-width: 500px;
margin: 40px auto;
border-radius: 4px;
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
transition: .5s ease;
position: relative;
}
.form:hover {
box-shadow: 0px 0px 40px 16px rgba(18, 18, 18, 1.00);
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 5px 20px 0;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 15px;
background: #0C0E67;
color: #fff;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: .5s ease;
}
.tab-group li a:hover {
background: #0C0E67;
color: #ffffff;
}
.tab-group .active a {
background: #1316FA;
color: #ffffff;
}
.tab-content>div:last-child {
display: none;
}
h1 {
text-align: center;
color: #fff;
font-weight: 300;
margin: 0 0 40px;
}
/*label {
position: absolute;
transform: translateY(6px);
left: 13px;
color: rgba(255,255,255,0.7);
transition: all 0.25s ease;
pointer-events: none;
font-size: 22px;
}
label .req {
margin: 2px;
color: red;
}*/
label.active {
transform: translateY(50px);
left: 2px;
font-size: 0px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: #000;
margin-top: -10px;
}
input {
font-size: 18px;
display: block;
width: 100%;
height: 100%;
padding: 1px 3px;
background-image: none;
border: 1px solid #fff;
color: #fff;
border-radius: 0;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus {
outline: 0;
border-color: #000;
}
.field-wrap input {
padding-left: 40px;
}
.field-wrap i {
position: absolute;
left: 0;
top: -5px;
padding: 9px 8px;
color: silver;
}
.field-wrap {
position: relative;
margin-bottom: 30px;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row>div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row>div:last-child {
margin: 0;
}
#sp1 {}
.button {
border: 0;
outline: none;
border-radius: 20px;
padding: 5px 5px;
font-size: 2rem;
font-weight: 50rem;
text-transform: uppercase;
letter-spacing: .1em;
background: rgb(54, 57, 221);
color: #ffffff;
transition: all 0.5s ease;
}
.button:hover,
.button:focus {
background: #1316FA;
}
.button-block {
display: block;
width: 100%;
}
.forgot {
margin-top: -20px;
text-align: right;
margin-bottom: 10px;
}
fieldset.date {
margin: 0;
padding: 0;
padding-left: 20px;
padding-bottom: .5em;
display: block;
border: none;
}
fieldset.date legend {
margin: 0;
padding: 0;
margin-top: .25em;
font-size: 100%;
}
fieldset.date label {
position: absolute;
top: -20em;
left: -200em;
}
fieldset.date select {
margin: 0;
padding: 0;
font-size: 100%;
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<title>Sign-Up/Login Form</title>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="form">
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<form action="" method="post">
<div class="field-wrap">
<input type="text" placeholder="First Name" required autocomplete="off" />
<i class="fa fa-user icon"></i>
</div>
<div class="field-wrap">
<input type="text" placeholder="Last Name" required autocomplete="off" />
<i class="fa fa-user icon"></i>
</div>
<div class="field-wrap">
<input type="email" placeholder="E-mail" required autocomplete="off" />
<i class="fa fa-envelope icon"></i>
</div>
<div class="field-wrap">
<input type="password" placeholder="Password" required autocomplete="off" />
<i class="fa fa-lock icon"></i>
</div>
<div class="field-wrap">
<input type="tel" placeholder="Phone" required autocomplete="off" />
<i class="fa fa-phone icon"></i>
</div>
<div class="field-wrap">
<input type="text" placeholder="Post Code" pattern="[0-9]{5}" required autocomplete="off" />
<i class="fa fa-map-marker icon"></i>
</div>
<!--Problem Region-->
Gender<br>
<div>
<input type="radio" name="gender">Male
<input type="radio" name="gender" />Female
</div>
<fieldset class="date">
<legend>Birthday </legend>
<label for="month_start">Month</label>
<select id="month_start" name="month_start" />
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select> -
<label for="day_start">Day</label>
<select id="day_start" name="day_start" />
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select> -
<label for="year_start">Year</label>
<select id="year_start" name="year_start" />
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
</select>
</fieldset>
<!--Error RegionEnds-->
<button type="submit" class="button button-block" />Register </button>
</form>
</div>
<div id="login">
<img src="./user.png" class="user">
<form action="/" method="post">
<div class="field-wrap">
<input type="email" placeholder="E-mail" required autocomplete="off" />
<i class="fa fa-envelope icon"></i>
</div>
<div class="field-wrap">
<input type="password" placeholder="Password" required autocomplete="off" />
<i class="fa fa-lock icon"></i>
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block" />Log In</button>
</form>
</div>
</div>
<!-- tab-content -->
</div>
<!-- /form -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>

Your height property in CSS using the input selector is throwing off your markup and causing the radio buttons to expand far past the point you can see them. I would suggest to be more specific with your selectors. Here's code to give you an idea of what's happening and how to fix it:
$('.form').find('input').on('keyup blur focus', function (e) {
var $this = $(this),
label = $this.prev('label');
if (e.type === 'keyup') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.addClass('active highlight');
}
} else if (e.type === 'blur') {
if( $this.val() === '' ) {
label.removeClass('active highlight');
} else {
label.removeClass('highlight');
}
} else if (e.type === 'focus') {
if( $this.val() === '' ) {
label.removeClass('highlight');
}
else if( $this.val() !== '' ) {
label.addClass('highlight');
}
}
});
$('.tab a').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
*{
box-sizing: border-box;
margin:0px;
padding:0px;
}
body {
background:url(../background.jpg);
/*font-family: 'Titillium Web', sans-serif;*/
font-family: 'Roboto', sans-serif;
background-size:cover;
}
.user{
width: 80px;
height: 80px;
border-radius: 50%;
position: relative;
top: -10px;
left: calc(50%-50px);
right: -170px;
}
a {
text-decoration: none;
color: rgb(39, 153, 219);
transition: .5s ease;
}
a:hover {
color: #179b77;
}
.form {
padding: 40px;
max-width: 500px;
margin: 40px auto;
border-radius: 4px;
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
transition: .5s ease;
position: relative;
}
.form:hover {
box-shadow: 0px 0px 40px 16px rgba(18,18,18,1.00);
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 5px 20px 0;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 15px;
background: #0C0E67;
color: #fff;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: .5s ease;
}
.tab-group li a:hover {
background: #0C0E67;
color: #ffffff;
}
.tab-group .active a {
background:#1316FA;
color: #ffffff;
}
.tab-content > div:last-child {
display: none;
}
h1 {
text-align: center;
color: #fff;
font-weight: 300;
margin: 0 0 40px;
}
/*label {
position: absolute;
transform: translateY(6px);
left: 13px;
color: rgba(255,255,255,0.7);
transition: all 0.25s ease;
pointer-events: none;
font-size: 22px;
}
label .req {
margin: 2px;
color: red;
}*/
label.active {
transform: translateY(50px);
left: 2px;
font-size: 0px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: #000;
margin-top:-10px;
}
[type="radio"] {
height: 10px;
}
input {
font-size: 18px;
display: block;
width: 100%;
height: 100%;
padding: 1px 3px;
background-image: none;
border: 1px solid #fff;
color: #fff;
border-radius: 0;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus{
outline: 0;
border-color: #000;
}
.field-wrap input{
padding-left: 40px;
}
.field-wrap i{
position: absolute;
left:0;
top: -5px;
padding: 9px 8px;
color: silver;
}
.field-wrap {
position: relative;
margin-bottom: 30px;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row > div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row > div:last-child {
margin: 0;
}
#sp1{
}
.button {
border: 0;
outline: none;
border-radius: 20px;
padding: 5px 5px;
font-size: 2rem;
font-weight: 50rem;
text-transform: uppercase;
letter-spacing: .1em;
background: rgb(54, 57, 221);
color: #ffffff;
transition: all 0.5s ease;
}
.button:hover, .button:focus {
background: #1316FA;
}
.button-block {
display: block;
width: 100%;
}
.forgot {
margin-top: -20px;
text-align: right;
margin-bottom:10px;
}
fieldset.date {
margin: 0;
padding: 0;
padding-left: 20px;
padding-bottom: .5em;
display: block;
border: none;
}
fieldset.date legend {
margin: 0;
padding: 0;
margin-top: .25em;
font-size: 100%;
}
fieldset.date label {
position: absolute;
top: -20em;
left: -200em;
}
fieldset.date select {
margin: 0;
padding: 0;
font-size: 100%;
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<title>Sign-Up/Login Form</title>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="form">
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<form action="" method="post">
<div class="field-wrap">
<input type="text" placeholder="First Name" required autocomplete="off" />
<i class="fa fa-user icon"></i>
</div>
<div class="field-wrap">
<input type="text" placeholder="Last Name" required autocomplete="off"/>
<i class="fa fa-user icon"></i>
</div>
<div class="field-wrap">
<input type="email" placeholder="E-mail" required autocomplete="off"/>
<i class="fa fa-envelope icon"></i>
</div>
<div class="field-wrap">
<input type="password" placeholder="Password" required autocomplete="off"/>
<i class="fa fa-lock icon"></i>
</div>
<div class="field-wrap">
<input type="tel" placeholder="Phone" required autocomplete="off"/>
<i class="fa fa-phone icon"></i>
</div>
<div class="field-wrap">
<input type="text" placeholder="Post Code" pattern="[0-9]{5}" required autocomplete="off"/>
<i class="fa fa-map-marker icon"></i>
</div>
<!--Problem Region-->
Gender<br>
<div>
<input type="radio" name="gender" >Male
<input type="radio" name="gender" />Female
</div>
<fieldset class="date">
<legend>Birthday </legend>
<label for="month_start">Month</label>
<select id="month_start"
name="month_start" />
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select> -
<label for="day_start">Day</label>
<select id="day_start"
name="day_start" />
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select> -
<label for="year_start">Year</label>
<select id="year_start"
name="year_start" />
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
</select>
</fieldset>
<!--Error RegionEnds-->
<button type="submit" class="button button-block"/>Register </button>
</form>
</div>
<div id="login">
<img src="./user.png" class="user">
<form action="/" method="post">
<div class="field-wrap">
<input type="email" placeholder="E-mail" required autocomplete="off"/>
<i class="fa fa-envelope icon"></i>
</div>
<div class="field-wrap">
<input type="password" placeholder="Password" required autocomplete="off"/>
<i class="fa fa-lock icon"></i>
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block"/>Log In</button>
</form>
</div>
</div><!-- tab-content -->
</div> <!-- /form -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>

In addition to the height issue that was pointed out. It's a good idea to wrap the radio button inside a label tag. This makes it much easier for a user to interact with since its all clickable...
<label for="myRadioBtn">
<input type="radio" name="myRadioBtn />
<span>Label Text</span>
</label>

Validation for inputs in jquery using regex

i was creating a simple form which has two inputs Name and Email on submit if i write numbers in name input then it will show number is not allowed message as like required message same as in email
Fiddle:https://jsfiddle.net/p6ohxxxe/
please help me out of this problem your help will be appreciated
HTML
<div class="form-container">
<form action="" id="my-form" name="myForm">
<div class="form-row">
<div class="input-container">
<label for="name" class="form-label">Name:</label>
<input type="text" class="form-input" name="name" placeholder="Enter your Name">
</div>
</div>
<div class="form-row">
<div class="input-container">
<label for="Email" class="form-label">Email:</label>
<input type="text" class="form-input" name="email" placeholder="Enter your Email">
</div>
</div>
<div class="form-row">
<div class="input-container">
<button type="submit" class="btnSubmit" >Submit</button>
</div>
</div>
</form>
</div>
js
$("form[name='myForm']").validate({
rules: {
name:"required",
email:{
required:true,
email:true
}
},
messages:{
name:"please Enter your Name",
email:"Please Enter a valid Email Address"
},
submitHandler: function(form) {
form.submit();
}
});
css
.form-container{
position: relative;
width: 100%;
padding: 8px;
box-sizing: border-box;
background: rgba(40, 91, 255, 0.24);
margin:30px auto;
max-width: 50%;
}
.input-container{
width: 100%;
height:auto;
padding-bottom: 12px;
}
.form-label{
font-weight: bold;
margin-bottom: 10px;
font-size: 15px;
display: block;
color:#000;
}
.form-input{
display: block;
width: 50%;
height: 35px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-row{
position: relative;
width:100%;
padding: 14px;
}
.btnSubmit{
padding: 10px 40px;
position: relative;
background: #31708f;
border-radius: 5px;
outline: none;
box-shadow: none;
color: white;
}
.error{
color:red;
border-color: red;
padding: 3px 2px;
}

I dont know if I understand your question, but using the validate plugin, you can create additional validation rules and use regex as the validation parameter. I'm using this code:
jQuery.validator.addMethod("regex", function(value, element, regexp) {
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
},"Invalid Data");
And input:
<input required="" data-rule-regex="^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$" title="Enter a valid IPV4" name="ip" type="text">

where is this empty space coming from?

I didn't write the form but the css is only 8 lines + bootstraps form control and then some classes for the javascript but I cannot figure out why the place holder text bit, or actually it's parent div, is becoming 60px or so in height, there is only 15px padding top and bottom and then a margin for the placeholder text. I've gone through form-control and there's no styles for height so I just can't figure it out. If you could have a look that'd be great.
http://danceforovariancancer.com.au#perform
Here's the contact form html and it's css but I'd recomend inspecting element because there's no answers in the css as far as I can tell :o
<section id="perform">
<div class="container-fluid apply">
<div class="text-center row">
<h1>Want to perform? Sign up here</h1>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<form name="sentMessage" id="contactForm" novalidate>
<div class="col-lg-4">
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Email</label>
<input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone</label>
<input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-success btn-lg">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
and css
.apply {
background-color: #0094ab;
}
.form-control {
color: #fff !important;
}
.floating-label-form-group {
position: relative;
margin-bottom: 5px;
margin-top: 5px;
/* padding-bottom: .5em; */
border-bottom: 1px solid #eee;/* color: #0094ab; */
}
.floating-label-form-group input, .floating-label-form-group textarea {
z-index: 1;
color: #fff;
position: relative;
padding-right: 0;
padding-left: 0;
border: 0;
border-radius: 0;
font-size: 1.5em;
background: rgba(255, 255, 255, 0.24);
box-shadow: none!important;
resize: none;
}
.floating-label-form-group label {
display: block;
z-index: 0;
position: relative;
top: 2em;
margin: 0;
font-size: .85em;
line-height: 1.764705882em;
vertical-align: middle;
vertical-align: baseline;
opacity: 0;
-webkit-transition: top .3s ease, opacity .3s ease;
-moz-transition: top .3s ease, opacity .3s ease;
-ms-transition: top .3s ease, opacity .3s ease;
transition: top .3s ease, opacity .3s ease;/* color: #fff; */
}
.floating-label-form-group-with-value label {
top: 0;
opacity: 1;
}
.floating-label-form-group-with-focus label {
color: #80bc18;
}
form .row:first-child .floating-label-form-group {
border-top: 1px solid #eee;
}
.form-control::-moz-placeholder {
color: #999;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #999;
}
.form-control::-webkit-input-placeholder {
color: #999;
/* font-size: 12px; */
}

You have hidden labels (opacity:0) which takes the space. Actually Opacity:0 hides the element (here: the labels), but reserves the space. You can use display:none instead, to completely hide an element.
I hope this helps.

As others have said the problem is caused by the hidden label.
If you're looking for a quick fix, here's what I would do:
In your mystyles.css add top margin for .form-control.
.form-control {
margin-top: -10px;
}

Apply following changes
label {
opacity: 1 !important;
top:0 !important;
}
.floating-label-form-group input, .floating-label-form-group textarea {
background: rgba(255, 255, 255, 0.54) none repeat scroll 0 0;
border: 0 none;
border-radius: 3px;
box-shadow: none !important;
color: #fff;
font-size: 1.5em;
padding-left: 5px;
padding-right: 0;
position: relative;
resize: none;
z-index: 1;
}
.form-control {
color: #fff !important;
line-height: 1.5;
}