html验证隐藏输入ajax

时间:2016-02-24 13:42:44

标签: jquery html ajax validation bootstrapvalidator

我正在尝试创建一个表单,我必须从地图中获取标记位置的纬度和经度。这个纬度和经度被发送到两个输入,如下所示:

<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>

当前的验证脚本如下(请注意,这是一项正在进行的工作,请原谅任何拼写错误):

<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>

我的要求是验证隐藏输入中的数据。但是,这不会发生,因为这些特定输入的验证不起作用。有什么方法可以解决这个问题?

编辑(因为我无法进行跟进:)): -

我通过取消隐藏输入来解决这个问题,而是将输入放在以下样式中: -

<input style="display: none" >

这能够解决我的验证问题。

0 个答案:

没有答案
相关问题