マップからマークされた場所の緯度と経度を取得する必要があるフォームを作成しようとしています。この緯度と経度は、次のように 2 つの入力に送信されます。
<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" >
これにより、検証の問題を解決できました。