JavaScript Form Validation Failed With Custom Captcha Code

Question

I'm actually working on a project for that I want to implement the client-side validation in the form using JS and every validation is working fine but the problem is that It still submitting the data where regex conditions are returning false.

Example: When in the Full Name (input box) the message shows "Invalid Name" but still it gets submitted. In that case, I want to return (focus()) the visitor to that particular input box.

I'm a newbie in JS so need some guidance regarding this.

const nameError = document.getElementById('full-name-error');
         const emailError = document.getElementById('email-error');
         const phoneNoError = document.getElementById('phone-no-error');
         const subjectError = document.getElementById('subject-error');
         const messageError = document.getElementById('message-error');
         const captchaError = document.getElementById('captcha-error');

         function validateName(){
            const name = document.getElementById('full-name').value;

               if (name.match(/[0-9$&+,:;=?@#|'<>.^*()%!-]/)){
                  nameError.innerHTML = 'Only Alphabets Are Allowed';
                  return false;
               }
               if (!name.match(/^[A-Za-z.]*\s{1}[A-Za-z]*$/)){
                  nameError.innerHTML = 'Invalid Full Name';
                  return false;
               }else {
                  nameError.innerHTML = 'Valid Name';
                  return true;
               }
         }

         function validateEmail(){
            const email = document.getElementById('email-address').value;

               if (!email.match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)){
                  emailError.innerHTML = 'Invalid Email Address';
                  return false;
               }else {
                  emailError.innerHTML = 'Valid Email-ID';
               return true;
               }
         }

         function validatePhoneNo(){
            const phone_no = document.getElementById('phone-number').value;

               if (phone_no.match(/[a-zA-Z$&+,:;=?@#|'<>.^*()%!-]/)){
                  phoneNoError.innerHTML = 'Only Number Are Allowed';
                  return false;
               }
               if (!phone_no.match(/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/)){
                  phoneNoError.innerHTML = 'Invalid Phone Number';
                  return false;
               }else {
                  phoneNoError.innerHTML = 'Valid Phone Number';
               return true;
               }
         }

         function validateSubject(){
            const subject = document.getElementById('contact-subject').value;

               if (subject.length > 50){
                  subjectError.innerHTML = 'Maximum 50 Characters Allowed';
                  return false;
               }
               if (subject.match(/[$&+,:;=?@#|'<>.^*()%!-]/)){
                  subjectError.innerHTML = 'Special Characters Not Allowed';
                  return false;
               }
               if (!subject.match(/^.[0-9a-zA-Z ]{1,50}$/)){
                  subjectError.innerHTML = 'Invalid Subject';
                  return false;
               }
               else {
                  subjectError.innerHTML = 'Valid Subject';
                  return true;
               }
         }


         function validateMessage(){
            const message = document.getElementById('message').value;


               if (message.match(/[$+:;=#|\/~`'<>^{}*!]/)){
                  messageError.innerHTML = 'Only "@ & % , "" - . ? () []" Allowed';
                  return false;
               }

               if (message.length < 150){
                  messageError.innerHTML = 'Write Atleast 150 Characters';
                  return false;
               }
               
               else if (message.length > 500){
                  messageError.innerHTML = 'Maximum 500 Characters Allowed';
                  return false;
               }
               else {
                  messageError.innerHTML = 'Valid Message';
                  return true;
               }
         }

         function validateCaptchaCode(){
            const captcha = document.getElementById('CaptchaInput').value;
            const captchaData = document.getElementById('mainCaptcha').value;
            
            if (captcha != captchaData){
                  captchaError.innerHTML = 'Invalid Captcha';
                  event.preventDefault();
               }
            else {
                  captchaError.innerHTML = 'Valid Captcha';
                  return true;
            }

         }
         
window.addEventListener("load", Captcha);

function Captcha(){
     var alpha = new Array(
                              'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',
                              'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z', 
                              '0','1','2','3','4','5','6','7','8','9',
                              '@','#','$','%','&'
                           );
     var i;
     for (i=0;i<6;i++){
         var a = alpha[Math.floor(Math.random() * alpha.length)];
         var b = alpha[Math.floor(Math.random() * alpha.length)];
         var c = alpha[Math.floor(Math.random() * alpha.length)];
         var d = alpha[Math.floor(Math.random() * alpha.length)];
         var e = alpha[Math.floor(Math.random() * alpha.length)];
         var f = alpha[Math.floor(Math.random() * alpha.length)];
         }
         var code = a + '' + b + '' + '' + c + '' + d + '' + e + ''+ f;
         document.getElementById("mainCaptcha").innerHTML = code
           document.getElementById("mainCaptcha").value = code
      }



   function checkSubmission() {

      const captcha = document.getElementById('CaptchaInput').value;
      const captchaData = document.getElementById('mainCaptcha').value;

      if (document.contact_form.person_name.value == ""){
         document.contact_form.person_name.focus();
         nameError.innerHTML = 'Name Is Required';
      }    
      
      if (document.contact_form.email_id.value == ""){
         document.contact_form.email_id.focus();
         emailError.innerHTML = 'Email Is Required';
      }

      if (document.contact_form.phone_no.value == ""){
         document.contact_form.phone_no.focus();
         phoneNoError.innerHTML = 'Phone No Is Required';
      }

      if (document.contact_form.subject.value == ""){
         document.contact_form.subject.focus();
         subjectError.innerHTML = 'Subject Is Required';
      }

      if (document.contact_form.message.value == ""){
         document.contact_form.message.focus();
         messageError.innerHTML = 'Message Is Required';
      }

      if (document.contact_form.captcha_code.value == ""){
         document.contact_form.captcha_code.focus();
         captchaError.innerHTML = 'Captcha Is Required';
      }

      else if (captcha != captchaData){
         event.preventDefault();
      }

      else {
         return true;
      }

   } 

   #full-name-error, #email-error, #phone-no-error, #subject-error, #message-error,  #captcha-error  {
      color: red;
   }
   
   #mainCaptcha {
      color: blue;
      border: 3px solid grey;
      font-weight: bold;
      padding: 3px;
   }

                  <form id="request" class="main_form" name="contact_form">
                     <div class="row con-row">

                        <div class="col-md-12 con-col">
                           <div class="inputBox">
                              <input type="text" name="person_name" id="full-name" onkeyup="validateName()" autocomplete="off" required>
                              <span class="text">Full Name*</span>
                              <span class="line"></span>
                            </div>
                            <span id="full-name-error">-</span>
                        </div>

                        <div class="col-md-12 con-col">
                           <div class="inputBox">
                              <input type="text" name="email_id" id="email-address" onkeyup="validateEmail()" autocomplete="off" required>
                              <span class="text">Email Address*</span>
                              <span class="line"></span>
                            </div>
                            <span id="email-error">-</span>
                        </div>

                        <div class="col-md-12 con-col">
                           <div class="inputBox">
                              <input type="text" name="phone_no" id="phone-number" onkeyup="validatePhoneNo()" autocomplete="off" required>
                              <span class="text">Phone Number*</span>
                              <span class="line"></span>
                            </div>
                            <span id="phone-no-error">-</span>
                        </div>

                        <div class="col-md-12 con-col">
                           <div class="inputBox">
                              <input type="text" name="subject" id="contact-subject" onkeyup="validateSubject()" autocomplete="off" required>
                              <span class="text">Subject*</span>
                              <span class="line"></span>
                            </div>
                            <span id="subject-error">-</span>
                        </div>

                        <div class="col-md-12 con-col">
                           <div class="inputBox textarea">
                             <textarea name="message" id="message" onkeyup="validateMessage()" required></textarea>
                             <span class="text">Type Your Message*</span>
                             <span class="line"></span>
                           </div>
                           <span id="message-error">-</span>
                         </div>

                         <div class="col-md-12 con-col cap-col">
                           <div class="row">

                              <div class="col-5 cap-col-1">
                                 <div class="CaptchaBox">
                                    <p type="text" id="mainCaptcha" class="align-middle"></p>

                                 </div>
                              </div>

                              <div class="col-7 cap-col-2">
                                 <div class="inputBox">
                                    <input type="text" name="captcha_code" id="CaptchaInput" onkeyup="validateCaptchaCode()" autocomplete="off" required/>
                                    <span class="text">Enter Captcha*</span>
                                    <span class="line"></span>
                                  </div>
                              </div>

                           </div>
                           <span id="captcha-error">-</span>
                        </div>

                         <div class="col-md-12">
                           <button class="send_btn" type="submit" onclick="checkSubmission()">Send Now</button>
                         </div>

                     </div>
                  </form>