JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<div data-role="page" id="customerDetails" data-theme="a" >
		
			
			<div data-role="content">	
<a href='#PopUpAddNumber' data-rel='popup' data-position-to='window' data-transition='pop' class='ui-btn' >New</a>
    </div>
<!-- NEW PHONE OR EMAIL POPUP --> 
				<div data-role='popup' id='PopUpAddNumber' data-theme='a' data-overlay-theme='a' data-dismissible='false' style='min-width:300px;'>
					<div data-role='header' data-theme='a'>
				    	<h1>Add Number</h1>
				    </div>
				    <div data-role='main' class='ui-content'>
				    	<form id='addNumber' onsubmit="return false;">
				    	
				    	<input type="hidden" name="cust_id" id="custident" value='<?php echo $custid; ?>' /> 
						<input type="hidden" name="sess_id" value='<?php echo $sid; ?>' />
							
					    	<div class="ui-field-contain">
					    	<label for="phoneType">Type</label>
							    <select name="phoneType" id="phoneType">
							      	<?php echo $phoneInnerOptions; ?>
							    </select>
							</div>
							<div class="ui-field-contain">
								<label for="phoneNumber">Number</label>
								<input type="text" name="phoneNumber" id="phoneNumber" value="">
					    	</div> 
					    	<div class="ui-field-contain">
							    <label for="primaryNo">Primary Contact</label>
							    <select name="primaryNo" id="primaryNo">
							    	<option value="none" id="none" selected></option>
							        <option value="phone" id="phone" >Primary Phone</option>
							        <option value="email" id="email">Primary Email</option>
							      
							    </select>
							</div> 
							<div class='ui-grid-a'>
								<div class='ui-block-a'>
									<input type='submit' id="submitNum" value='Update' class='ui-btn ui-btn-inline' data-transition='pop' />
								</div>
								<div class='ui-block-b'>
									<a href='#' class='ui-btn' data-rel='back' data-transition='pop'...

JavaScript

$('#addNumberReset').click(function(){
			            $('#addNumber')[0].reset();
					 });
//Matches UK landline + mobile, accepting only 01-3 for landline or 07 for mobile to exclude many premium numbers
jQuery.validator.addMethod('phonesUK', function(phone_number, element) {
phone_number = phone_number.replace(/\(|\)|\s+|-/g,'');
return this.optional(element) || phone_number.length > 9 &&
	phone_number.match(/^(?:(?:(?:00\s?|\+)44\s?|0)(?:1\d{8,9}|[23]\d{9}|7(?:[45789]\d{8}|624\d{6})))$/);
});

jQuery.validator.addMethod("phoneOrEmail", function(value, element) {
return this.optional(element) ||
($.validator.methods["phonesUK"].call(this, value, element)) ||
($.validator.methods["email"].call(this, value, element));
}, "Please enter a valid phone number or email address");

$().ready(function() {		
					    // validate new number form
					    $("#addNumber").validate({
					        errorPlacement: function(error, element) {
					            error.insertAfter(element.parent()); // <- make sure the error message appears after parent element (after textbox!)
					        },
					        rules: {
						        
					        	phoneNumber: 
						        	{
					        			phoneOrEmail: true,
					        			required: true,
					        		}
			        		
					        },
					        messages: {
					        	phoneNumber: "Please enter a valid number or email",
					        },

					        submitHandler: function(form) {
					        	$('#PopUpAddNumber').popup('close');
	 							$.post("customer_AddNewNumber.php", $("#addNumber").serialize(),  function(response)
								{
									 LoadCustomerNumber();
								});
								$('#addNumber')[0].reset(); //on close reset form
							}
					    }); //end validate
					}); // end function