Answers.Body: <p>I would add validator method via js which would stop the submit until the validator returns true</p>
  <pre><code>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'});
  });
  </code></pre>
  <p>HTH</p>
  <p>Pradeep</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-01-20T11:16:59.203Z
Answers.LastActivityDate: 2021-01-20T11:16:59.203Z
Answers.UserDisplayName: Pradeep Nayak
Body: <p>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.</p>
  <p>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.</p>
  <p>How can I prevent the form submission until my input is validated? Any help would be appreciated. Here's my jquery in the extension..</p>
  <pre><code>    CRM_Core_Resources::singleton()-&gt;addScript(&quot;
          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;
                    }
            }
              });
         });
      &quot;);
  </code></pre>
  
Tags: <forms><online-registration><jquery>
Title: How to prevent a form submission on a CiviCRM form with jquery?
ThreadText: # How to prevent a form submission on a CiviCRM form with jquery?
  
  (Asked by: username_0 on 2021-01-20)
  
  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;
                    }
            }
              });
         });
      ");
  
  **Tags:** forms, online-registration, jquery
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2021-01-20. Score: 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
  
  
  ---
  
  