HTML проверки скрытого ввода AJAX
Я пытаюсь создать форму, где я должен получить широту и долготу отмеченного местоположения на карте. Эта широта и долгота отправляются на два входа следующим образом:
<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" >
Это смогло решить мои проверочные проблемы.