Bootstrap 3 form validator interfering with click event in jQuery?

Question

So I'm working on a project for a client and they're using Bootstrap 3's form validation widget. And there's one submit button that I'm trying to place a custom '.click()' event on but it isn't being called no matter what.

In inspect element I can see there are many click event handlers from bootstrap.min.js. I'm thinking this is the culprit. Does anyone have experience with this problem in the past?

Code:

var fieldsFilled = false;

   //Iterate through all the input fields/textarea of the feedback form
   $('#fbForm').find('input, textarea').each(function () {
       //Each time a key is pressed while the input has focus
       $(this).keyup(function () {
           //Check if fields are empty
           fieldsFilled = checkFormFieldsEmpty('#fbForm') && $('#terms').is(":checked");

           //If fields are filled and terms is checked then enable Submit
           if(fieldsFilled) {
               $("#btnSubmit").css("pointer-events","auto");
           } else {
               $("#btnSubmit").css("pointer-events","none");
           }
       });
   });

   $('#terms').change(function () {
       fieldsFilled = checkFormFieldsEmpty('#fbForm') && $('#terms').is(":checked");

       if(fieldsFilled) {
           $("#btnSubmit").css("pointer-events","auto");
        } else {
           $("#btnSubmit").css("pointer-events","none"); 
       }
   });

   //Checks if the form id has blank text fields
   function checkFormFieldsEmpty(id) {
       var filled = true;

       $(id).find('input, textarea').each(function () {
           //Check whether the input/textarea is blank
           if(!$(this).val()) {
               //If the input/textarea is empty return false
               filled = false;
           }
       });

       return filled;
   }

    $(document).on('click', '#btnSubmit', function (event) {
        alert('this');

        if($('#btnSubmit').hasClass('disabled')) {
            alert('empty');
        } else {
            grecaptcha.execute();
            grecaptcha.render();
        }
    });

other part:

    

    
    
        Feedback Form


    
    

    
      First Name  
      
      
      
      
        
      
      
    


    

    
      Last Name 
        
        
      
      
        
      
      
    



    

    
      Country 
        
        
      
      
        
      
      
    



    
    
      E-Mail  
        
        
            
        
        
      
      
    

    

     
     Comment
        
            
                
                
            
        
        
    

    
    
    GDPR Disclaimer
    
    By ticking the below tick box, I hereby give my consent for the personal information which I am providing in this application to be processed and recorded by the Agriculture Directorate, and to exchange this information with Public Authorities, Government Departments and any other third parties, as necessary , in order to process this application and as permitted by Maltese Law.
    
    


    


      
    
      

        
        I agree

Louys Patrice Bessette · Accepted Answer

That is a type="submit" button inside a form tag. Its normal behavior is to submit the form where the consequence is to reload the page (or load the URL found in the action attribute of the opening form tag). That is instantaneous. It doesn't "wait" for the execution of anything else on the actual page.

If you want to perform tasks prior to submit, you have to prevent that normal behavior:

$(document).on('click', '#btnSubmit', function (event) {
    event.preventDefault();

    // ... Your additionnal validations

    // When ready to submit:
    $(this).closest("form").submit();
});

And, by the way, this condition if($('#btnSubmit').hasClass('disabled')) will never be true... Since the click event won't fire on a disabled element.

Bootstrap 3 form validator interfering with click event in jQuery?

Answers (1)

Related Questions