html validating hidden input ajax

Question

I am trying to create a form where I have to get the latitude AND longitude of a marked location from a map. This latitude and longitude is sent to two inputs as follows:

<form class="formoid-solid-blue" id="contactForm" style="background-color:#FFFFFF;font-size:14px;font-family:'Roboto',Arial,Helvetica,sans-serif;color:#34495E;max-width:600px;min-width:150px" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
    <div class="title"><h2>Registration form</h2></div>
    <div class="element-input"><label class="title"></label><div class="item-cont"><input class="large" type="text" name="input" placeholder="First Name" /><span class="icon-place"></span></div></div>
    <div class="element-input"><label class="title"></label><div class="item-cont"><input class="large" type="text" name="input1" placeholder="Last Name" /><span class="icon-place"></span></div></div>
    <div class="element-input"><label class="title"></label><div class="item-cont"><input class="large" type="text" name="input2" maxlength="10" minlength="10" placeholder="NIC"/><span class="icon-place"></span></div></div>
    <div class="element-input"><label class="title"></label><div class="item-cont"><input class="large" type="text" name="input3" placeholder="Address"/><span class="icon-place"></span></div></div>
    <div class="element-input"><label class="title"></label><div class="item-cont"><input class="large" type="text" name="city" id="city" placeholder="City"/><span class="icon-place"></span></div></div>
    <div class="element-input"><label class="title"></label><div class="item-cont"><h>Please select location from the map</h></div></div>
    <div id="map" style="width: 550px; height: 300px"></div>
    <input id="latitude" name="latitude" type="hidden" required>
    <input id="longitude" name="longitude" type="hidden" required>
    <div class="element-phone"><label class="title"></label><div class="item-cont"><input class="large" type="tel" pattern="^\d{10}$" maxlength="10" name="phone" placeholder="Contact Number" value=""/><span class="icon-place"></span></div></div>
    <div class="element-input"><label class="title"></label><div class="item-cont"><input class="large" type="text" name="input5" placeholder="Disability"/><span class="icon-place"></span></div></div>
    <div class="element-textarea"><label class="title"></label><div class="item-cont"><textarea class="medium" name="textarea" cols="20" rows="5" placeholder="Reason"></textarea><span class="icon-place"></span></div></div>
    <div class="element-textarea"><label class="title"></label><div class="item-cont"><textarea class="medium" name="textarea1" cols="20" rows="5" placeholder="Description"></textarea><span class="icon-place"></span></div></div>
    <div class="element-textarea"><div id="messages"></div>                                  
    </div>
    <div class="submit"><input type="submit"  value="Submit"   /></div>
</form>

The current validating script is as follows (mind that this is a work in progress, so please excuse any typos):

<script type="text/javascript">
    $(document).ready(function() {
        $('#contactForm').bootstrapValidator({
            container: '#messages',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields:{
                input:{
                    validators:{
                        notEmpty:{ 
                            message: 'The first name cannot be empty'
                        },  
                        regexp:{
                            regexp: /^[a-zA-Z]+$/,
                            message: 'The first name can only consist of alphabetic values'
                        }
                    }
                },
                input1: {
                    validators: {
                        notEmpty: {
                            message: 'The last name cannot be empty'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z]+$/,
                            message: 'The last name can only consist of alphabetic values'
                        }
                    }
                },
                input2: {
                    validators: {
                        notEmpty: {
                            message: 'The last name cannot be empty'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9]+$/,
                            message: 'The last name can only consist of alphabetic values'
                        }
                    }
                },
                input3: {
                    validators: {
                        notEmpty: {
                            message: 'The address cannot be empty'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_/\.,' ']+$/,
                            message: 'The address can only consist of alphabetical, number and underscore'
                        }
                    }
                },
                city: {
                    validators: {
                        notEmpty: { 
                            message: 'Please select a city'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z]+$/,
                            message: 'The last name can only consist of alphabetic values'
                        }
                    }
                },
                phone: {
                    validators: {
                        notEmpty: { 
                            message: 'Please select a city'
                        }

                    }
                },
                latitude: {
                    validators: {
                        notEmpty: { 
                            message: 'Please select a city'
                        }

                    }
                },
                longitude: {
                    validators: {
                        notEmpty: { 
                            message: 'Please select a city'
                        }

                    }
                },
                input5: {
                    validators: {
                        notEmpty: { 
                            message: 'Please select a city'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.,' ']+$/,
                            message: 'The last name can only consist of alphabetic values'
                        }
                    }
                },
                textarea: {
                    validators: {
                        notEmpty: { 
                            message: 'Please select a city'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.,' ']+$/,
                            message: 'The last name can only consist of alphabetic values'
                        }
                    }
                },
                textarea1: {
                    validators: {
                        isEmpty: { 
                            message: 'Please select a city'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.,' ']+$/,
                            message: 'The last name can only consist of alphabetic values'
                        }
                    }
                }
            }
        });
    });
</script>

My requirement is to validate the data in the hidden inputs. However, this does not occur, as the validations for those particular inputs do not work. What are the possible ways to solve this?

EDIT (Because I could not do a follow-up :) ):-

I solved this by making the inputs unhidden, but instead put the inputs in the following style:-

<input style="display: none" >

This was able to solve my validaing problems.