Square Connect Validate Fields - square-connect

Question

I set up square connect api and my form submits just fine. My problem is I am trying to submit the payment and also email additional information to myself. If everything gets filled out then the code works perfectly but When I call requestCardNonce(event); it only requires the fields to generate the Nonce to be filled in and not the rest of the fields even tho I have them as required. If i remove requestCardNonce(event); all fields are required like they should be. Is there a way i can get validation on all of my fields to work with square connect api?
<form id="nonce-form" action="include/process-card.php" method="post">
<div class="sec1crt-frmlft">
<div class="form-container">
<div class="form-top">
<div class="form-toplft">
<center><img src="images/hdng-icon1.png" class="hdng-icon"></center>
</div>
<div class="form-toprgt">
<p class="txt2-chk">Billing Information</p>
</div>
</div>
<div class="form-content1">
<div class="frmelements">
<label for="FirstName">First Name<span>*</span></label>
<div class="field">
<div class="icon-box">
<center><img src="images/frmicon1.png"></center>
</div>
<input type="text" name="FirstName" class="ft-input" autocomplete="off" id="FirstName" required/>
</div>
</div>
<div class="frmelements">
<label for="LastName">Last Name<span>*</span></label>
<div class="field">
<div class="icon-box">
<center><img src="images/frmicon1.png"></center>
</div>
<input type="text" name="LastName" class="ft-input" autocomplete="off" id="LastName" required/>
</div>
</div>
<div class="frmelements">
<label for="Email">Email <span>*</span> </label>
<div class="field">
<div class="icon-box">
<center><img src="images/frmicon3.png"></center>
</div>
<input type="text" name="Email" class="ft-input" autocomplete="off" id="Email"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$" required/>
</div>
</div>
<div class="frmelements">
<label for="Address">Address<span>*</span></label>
<div class="field">
<div class="icon-box">
<center><img src="images/frmicon5.png"></center>
</div>
<input type="text" name="Address" class="ft-input" autocomplete="off" id="Address" required/>
</div>
</div>
<div class="frmelements short1">
<label for="State">State<span>*</span></label>
<div class="field">
<div class="icon-box">
<center><img src="images/frmicon7.png"></center>
</div>
<select name="State" class="ft-input" id="State" class="required" required>
<option value="" onclick="" selected="">Select State</option>
<option value="AL" onclick="">REMOVED TO SHOR</option>
</select>
</div>
</div>
<div class="frmelements short2">
<label for="City">City<span>*</span></label>
<div class="field">
<div class="icon-box">
<center><img src="images/frmicon6.png"></center>
</div>
<input type="text" name="City" class="ft-input" autocomplete="off" id="City" required/>
</div>
</div>
<div class="frmelements short1">
<label for="sq-postal-code">Zip Code <span>*</span></label>
<div class="field">
<div class="icon-box">
<center><img src="images/frmicon8.png"></center>
</div>
<input type="text" name="sq-postal-code" class="ft-input" autocomplete="off" id="sq-postal-code"
pattern="^\d{5}(?:[-\s]\d{4})?$" required/>
</div>
</div>
<div class="frmelements short2">
<label for="Phone">Phone Number <span>*</span></label>
<div class="field">
<div class="icon-box">
<center><img src="images/frmicon4.png"></center>
</div>
<input type="text" name="Phone" class="ft-input" autocomplete="off" id="Phone"
pattern="^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$" required/>
</div>
</div>
</div>
</div>
</div>
<div class="sec1crt-frmrgt">
<div class="form-container">
<div class="form-top">
<div class="form-toplft">
<center><img src="images/hdng-icon2.png" class="hdng-icon"></center>
</div>
<div class="form-toprgt">
<p class="txt2-chk">Payment Information</p>
</div>
</div>
<div class="form-content2">
<div class="lwrform">
<div style="display:block;" id="cardDiv">
<div class="clearall"></div>
<img src="images/cards.png" class="cards">
<div class="clearall"></div>
<div class="frmelements short1">
<label for="sq-amount">Payment Amount<span>*</span></label>
<div class="field">
<div class="icon-box">
<center><img src="images/frmicon9.png"></center>
</div>
<input data-threeds="pan" type="text" maxlength="16" id="sq-amount" name="sq-amount" class="ft-input"
pattern="^[+-]?[0-9]{1,3}(?:,?[0-9]{3})*(?:\.[0-9]{2})?$" required>
</div>
</div>
<div class="frmelements">
<label for="sq-card-number">Card Number<span>*</span></label>
<div class="field">
<input data-threeds="pan" type="text" maxlength="16" id="sq-card-number" name="sq-card-number" class="ft-input noicon"
pattern="^(?:4[0-9]{12}(?:[0-9]{3})?|[25][1-7][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$" required>
</div>
</div>
<div class="frmelements short1">
<label for="sq-expiration-date">Expiration Date<span>*</span></label>
<div class="field">
<input data-threeds="pan" type="text" id="sq-expiration-date" name="sq-expiration-date" class="ft-input noicon" required>
</div>
</div>
</div>
<div class="frmelements short2">
<label for="sq-cvv">CVV<span>*</span></label>
<div class="field">
<input type="text" class="ft-input noicon" name="sq-cvv" id="sq-cvv" maxlength="4"
pattern="^[0-9]{3,4}$" required>
</div>
</div>
<div class="frmelements short2">
<p class="txt4-chk">What is this?</p>
</div>
</div>
<!--
After a nonce is generated it will be assigned to this hidden input field.
-->
<input type="hidden" id="card-nonce" name="nonce">
</div>
<div class="clearall"></div>
<div class="frmelements btn-element">
<input type="submit" value="" id="sq-creditcard" onclick="requestCardNonce(event)"
class="button-credit-card">
</div>
<center><img src="images/postal-crt.png" class="postal-crt"></center>
</div>
</div>
</div>
</form>