RegEx in HTML5 pattern .vs. JS RegEx

<!DOCTYPE html>
<html>
<head>
<title>Client-side Form Validation via JS (RegEx)</title>
<style type="text/css">
label, button, input[type=submit] {
  display: block;
}
</style>
</head>
<body>
<div id="main">
<form name="myForm" class="validatedForm" action="/action_page.php" onsubmit="return validateForm(event);" method="post">
  <fieldset>
		<label>Name: <input type="text" name="fullName" /></label>
		<label for="country">Country</label>
		<select id="country" name="country" title="Note: we are working hard on making our services available in more countries/language very soon!">
			<option value="-1" selected>[choose country]</option>
			<option value="1">CANADA</option>
			<option value="2">USA</option>
			<option value="3">UK</option>
		</select>
        <input type="submit" id="signupButton" name="signup" value="Sign Up" />
    </fieldset>
</form>
</div>
<script>
/* FORM validations */
function showError(ele) {
   ele.style.border = '1px solid red';
   ele.focus();
}

function clearError(ele) {
   ele.style.border = '1px solid transparent';
   document.getElementById('signup').focus();
}

function validateName() {
	var name = document.forms['myForm']['fullName'].value;
	var validName = /^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$/g;
    if (typeof name === 'undefined' || name === '') {
      alert('Name must be filled out');
      //return false;
    } else if (name.match(validName)) {
      alert('Hi: ' + name);
      //return false;
    } else {
    	//return false;
    }
}

function validateEmail() {
	var emailID = document.myForm.EMail.value;
    atpos = emailID.indexOf("@");
    dotpos = emailID.lastIndexOf(".");

    if (atpos < 1 || ( dotpos - atpos < 2 )) {
      alert("Please enter correct email ID")
      document.myForm.EMail.focus() ;
      return false;
    }

    return true;
}

function validateForm(e) {
	e.preventDefault();
    if(document.forms['myForm']['fullName'].value === '') {
        alert('Please provide your name!');
        document.myForm.fullName.focus(); //notice we can access the form several ways, this is the original way by the name of the FORM element and field as a multi-dimensional Array
        return false;
    }
    if(document.getElementsByTagName('form')[0].email.value == '') {
        alert('Please provide your Email!');
        document.getElementsByTagName('form')[0].email //depends on the order in which this form appears, and total number of FORM elemetns on the page, so not great
        return false;
    }
    if(document.getElementsByClassName('validatedForm')[0].country.value === '-1') {
		alert('Please select your country!');
        document.getElementsByClassName('validatedForm')[0].country.focus(); //CSS class names used for styling can be a bit more specific but potentially suffer similar problems to using the number and ordering of the FORM, in this case there may accidentally be multiple Elements on the page with that class applied
		return false;
	}
    if(document.getElementById('postalCode').value === '' ||
       isNaN(document.getElementById('postalCode').value) ||
       document.myForm.Zip.value.length < 5) {
		alert('Please provide a Canadian postal code in the format L#L #L#  (L=letter, #=number)');
		document.getElementById('postalCode').focus(); //using IDs is typically fairly reliable to retrieve individual fields, as we're supposed to be certain that each ID assigned to an Element on the paeg is unique, however, its not always the case if there are 3rd party integrations/widgets or coding errors and oversights
		return false;
    }
    if(document.querySelector('#newsletterOptIn').value === '' ||
       isNaN(document.getElementById('postalCode').value) ||
       document.myForm.Zip.value.length < 5) {
		alert('Please provide a Canadian postal code in the format L#L #L#  (L=letter, #=number)');
		document.getElementById('postalCode').focus(); //using IDs is typically fairly reliable to retrieve individual fields, as we're supposed to be certain that each ID assigned to an Element on the paeg is unique, however, its not always the case if there are 3rd party integrations/widgets or coding errors and oversights
		return false;
    }
    return true;
}
</script>
</body>
</html>


https://www.w3schools.com/js/tryit.asp?filename=tryjs_validation_js
https://www.geeksforgeeks.org/javascript-match/
https://www.tutorialspoint.com/javascript/javascript_form_validations.htm


https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute--cms-25145
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text

PATTERN example:
<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10" value="test" pattern="^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$" />