I’m trying to figure out how to validate a hidden field on my form. The value for the hidden field is added when the user submits a second form via a popup. So the value of the hidden field is coming from a different form and is added dynamically with javascript.
Here is the html of the hidden field
<div class="form-group">
<label class="" for="fname"></label>
<input type="hidden" name="customerVehicles" class="customerVehicles form-control"
id="customerVehicles" />
</div><!-- close form group -->
Here is the javascript that populates the hidden field
$('#add').click(function(){
// store field values
var vehmodel = $("#model").val();
var vehmake = $("#make").val();
var vehyear = $("#year").val();
var primaryUse = $("#primaryUse").val();
var ownership = $("#ownership").val();
if(vehmodel && vehmake && vehyear && primaryUse && ownership){
// concatinate variables to one variable
var vehP = vehyear+" : "+vehmake+" : "+vehmodel+" : "+ownership+" : "+primaryUse;
// add value to hidden field
$('#customerVehicles').attr('value', vehP);
}// end if
else{
alert ("Please add at least one vehicle.");
}
});// close .click
Here is the validation script that I want to check that there is a hidden field value
$('#step2').bootstrapValidator({
message: 'This value is not valid',
live: 'enabled',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
submitHandler: function(validator, form, submitButton) {
...
},
excluded: ':disabled',
fields: {
customerVehicles: {
message: 'Please Make a Selection',
validators: {
notEmpty: {
message: 'Please Make a Selection'
}
}
}// end dropdown
} // end field
});// bootstrapValidator
good point Dormilich. I guess I don’t have anything that appears for that field when the invalid form fires. I do have a p tag that says “no vehicle selected” which is hidden once they select a vehicle. I pulled that out of the code that it displayed for simplicity.
Pullo, i checked out that link, but I’m not sure if that is what i’m doing. It seems those examples are adding a new cloned field. So if the user doesn’t add a new field there is nothing to validate. In my case, the hidden field is always there. Does that make sense?
right now i have it concatenating all the values from the popup to create one string for that vehicle, but I don’t really need to do it that way now because I’m storing that info in a db each time they add a vehicle. So it could be a boolean if that it easier.
Don’t validate the hidden field - instead add the validation to the process that is adding the value into the hidden field.
For people with JavaScript off the hidden field will still be empty when the form is submitted so another alternative is to simply omit the hidden field and generate the value on the server after the form is submitted.
The section where you can add a vehicle doesn’t work at all for people with JS disabled, so the form seems quite unusable without JavaScript.
Whether the time and effort involved in fixing this will outweigh the benefit is a different question.
I’m so used to forms (especially) needing JS to work nowadays, I would simply enable JavaScript on this page.
Saying that, I still think that progressive enhancement is still the way to go, and if one considers this when designing the site, it isn’t particularly hard to implement.
In which case since the hidden field can only be set when that other section is filled in you don’t need to validate the hidden field since if the values filled in those other fields are valid then the hidden field must be valid and if the other fields are not filled in then they are not valid.
The validation isn’t working as expected. Currently it is triggering the validation error when the hidden field is blank, but after it triggers it won’t validate even after the user then adds a vehicle. It does work if the user selects a vehicle before attempting to submit the form. Any ideas?
As for the js issue, at some point I’ll redesign the forms at which time I would consider employing a more “progressive enhancement” approach, but for now I’m relying on the user having js enabled. My reasoning is that less than 2% have their js disabled, and with our audience it’s probably much lower (although i should test this now that we are talking about it).
Ok i pulled almost everything out and created a much simpler page with just 2 form fields, and the vehicle form.
Here is the new 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
customerVehicles: {
message: 'Please add a vehicle',
validators: {
notEmpty: {
message: 'Please add a vehicle'
}
}
}// end dropdown
} // end field
});// bootstrapValidator
$('#add').click(function(){
// store field value
var vehyear = $("#year").val();
if(vehyear){
//flag for hidden field
var veh = "vehicle added";
// add value to hidden field
$('#customerVehicles').attr('value', veh);
}// end if
else{
alert ("Please add at least one vehicle.");
}
});// close .click
}); //ready(function
</script>
So it validates if you run through the form and select everything. But if you select the first two items and hit submit the forms locks up and won’t allow another submit.