Form won't submit after validation triggers

I’m using the bootstrap button group along with bootstrapvalidator:

It works fine if you make a selection and then hit submit button (as you’re supposed to), but if the user doesn’t make a selection and just hits submit it causes problems. The validation is working as it shows an x with the properly error message saying they need to make a selection. But then if they make a selection after the initial validation it never validates to let the user submit and you must hit refresh.


      <form class="msForm next" role="form" id="step1">
               <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-default">
                        <input type="radio" name="coverage" value="Basic" /> Basic
                    </label>
                    <label class="btn btn-default">
                        <input type="radio" name="coverage" value="Preferred" />Preferred
                    </label>
                    <label class="btn btn-default">
                        <input type="radio" name="coverage" value="Platinum" /> Platinum
                    </label>
                </div>
         <button type="submit" class="next btn btn-orange btn-lg pull-right" id="next2">Next</button>

 $(document).ready(function() {

        $('#step1').bootstrapValidator({
            message: 'This value is not valid',
            live: 'disabled',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            submitHandler: function(validator, form, submitButton) {

                $.ajax({
                  type: "POST",
                  url: "scripts/process-step2.php",
                  data: $('#step1').serialize(),
                  success: function(msg){
                    // do something
                  },
                  error: function(){
                    alert("error");
                  }
                });//close ajax
            },
            excluded: ':disabled',
            fields: {
                coverage: {
                    validators: {
                        notEmpty: {
                            message: 'Please select level of coverage'
                        }
                    }
                }
            } // end field
        });// bootstrapValidator
      }); //ready(function

Do you have somewhere we can see this running? It sounds like you’re getting a fatal error, which is causing the script to stop working properly - but its hard to tell without seeing it in action

Here is a link to the first page of the form.
http://aaronhaas.com/bsi19a/index.html

You need to enter a valid zip code and select a product to get to the second screen where the problem occurs.

Once on the second page, try hitting the next button first to make the validations errors trigger. If you then select each of the items and try to re-submit the form nothing happens. For some reason the Level Of Coverage buttons are not showing that they are selected after the first validation triggers. If you keep selecting Level Of Coverage buttons eventually it all validate.

Mmm, it seems to be something to do with that validation plugin:

http://stackoverflow.com/questions/23669200/bootstrap-validator-not-submitting-php-form

Try adding some debug into the function: submitHandler:… i.e:

alert("running the submit!");

…does that run?

The alert runs when the submit button is clicked and everything validates.
The submit handler only triggers when everything validates.
It seems the problem is that when the coverage button group is marked as invalid (if you try to submit before making a selection) it’s not changing to valid when a selection is made.

The strange thing is that if you keep selecting the coverage buttons and then hit submit eventually it works, which is why I think it’s some kind of bug.

This fixed it:
Changed “live” setting from disabled to enabled.


$('#step1').bootstrapValidator({
            message: 'This value is not valid',
            live: 'enabled',
            ….

Ah cool - never would have got that! (I use Bootstrap, but have never used that plugin). Seems a bit of a weird option, if I’m honest!