How to validate a hidden field?

JavaScript
21

Thanks Pullo, I tried using your demo as a starting point, but had some trouble when I tried adding back all of the stuff I had stripped out for simplicity.

I had an idea which I think could be easier.

Rather than have the main form validate the hidden field I’m getting rid of the hidden field all together. Instead I want to disable the submit button and then enable it after they add a vehicle.

So I disabled the submit button and placed this inside of the function that adds a vehicle. This is working.

document.getElementById("next2").disabled=false;

The problem is when someone select any of the items in the main form it re-enables the button. How do I turn this off so the button stays disabled until I call the above code in the add vehicle script.

<script type="text/javascript">
$(document).ready(function() {

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

            alert("Successful Form Submit");

        },
        excluded: ':disabled',
        fields: {
            coverage: {
                validators: {
                    notEmpty: {
                        message: 'Please select level of coverage'
                    }
                }
            },
             creditRating: {
                 message: 'Please Make a Selection',
                 validators: {
                    notEmpty: {
                        message: 'Please Make a Selection'
                    }    
                }
             }// end dropdown
             
        } // end fields
    });// bootstrapValidator
22

Sorry for the late reply. I was on vacation.
Did you get this sorted out in the meantime, or does the problem persist?

23

Yea I’m still stuck on it.

24

Where can I see a demo of the code which isn’t working?

25

Here is a demo.
http://aaronhaas.com/bsi25/form-auto-s2.php

so basically I want to keep the next button disabled until they add a vehicle. Right now I have it so the next button starts out disabled, and when they add a vehicle it is enabled. The problem is if any of the drop downs from the “coverage details section” are selected this function $(‘#step2’).bootstrapValidator enables the next button. How can I make it so that only the #addVehicle function can enable the button?

26

Hey,

What about just making it so that when the submit button is checked, a script checks whether:

$("#no-vehicle").text() === "No vehicles added yet"

and if so, stops the user proceeding further?

27

Thanks Pullo. Sounds like a good idea, but I’m not sure how to implement it.

So I added something that removes the text when they add a vehicle.

 $('#addVehicle').on("click", function(){
         if(vehmodel && vehmake && vehyear && primaryUse && ownership){
            $("#no-vehicle").text('');
               …

How do I check the statement below inside of $(‘#step2’).bootstrapValidator where the submit button is validated.

      $("#no-vehicle").text() === "No vehicles added yet"
28

To be honest, I’m not sure.
I really dislike these validator plugins and don’t use them if I can help it.

You could (normally) just do:

$("form").on("submit", function()){
  // do stuff here
}

but I’m not sure where or how the Bootstrap validator hooks into the form.

If that doesn’t work, maybe try adding a callback validation option, which allows you to create a custom function for validation.