How to prevent a form submission on a CiviCRM form with jquery?

Question

I have a custom field set and then added to a profile, where the text input is shown based on selection of radio button via jquery. Within the profile, the radio is a required field but the text input is not.

I was able to show input based on the condition of radio selection and make the input a required field if visible. But when I click the submit button although I see the alert but it does not stop the form submission.

How can I prevent the form submission until my input is validated? Any help would be appreciated. Here's my jquery in the extension..

    CRM_Core_Resources::singleton()->addScript("
        CRM.$(function($) {
            showInput();
              function showInput() {
                $('.CRM_Event_Form_Registration_Register input[name=custom_280]').change(showInput);
    
            if ($('.CRM_Event_Form_Registration_Register input[name=custom_280][value=1]').is(':checked')){
                $('div#editrow-custom_281 input').val('')
                $('div#editrow-custom_281').slideDown('slow');
           }
            else {
                  $('div#editrow-custom_281').slideUp('slow');
                }
            }
    //on click of proceed btn
            $('button#_qf_Register_upload-bottom').on('click', function(e) {
    //check if the checked value is 1
          if ($('input[name=custom_280]:checked').val() === '1') {
            if (!$('div#editrow-custom_281 input').val()) {
              $('div#editrow-custom_281 input').focus();
// Prevent submit
              e.preventDefault(e);
                          Swal.fire({
                      icon: 'error',
                    });
            } else {
                    return;
                  }
          }
            });
       });
    ");

Answer 1

I would add validator method via js which would stop the submit until the validator returns true

CRM.$(function($) {
  $.validator.addMethod('concessionaryError', function(value, element) {
    let isValid = true;
    if (value == '') {
      isValid = false;
    }
    return isValid;
  });
  $('#custom_39').addClass('concessionaryError valid');
  $.extend($.validator.messages, {concessionaryError:'please correct the error'});
});

HTH

Pradeep