我正在尝试创建一个表单,我必须从地图中获取标记位置的纬度和经度。这个纬度和经度被发送到两个输入,如下所示:
<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" >
这能够解决我的验证问题。