Hello guys,
I'm working on a code for weeks now and can't get it to work.
I have a form, if you enter a zip code it automatically find the street name and place that come with it. That all works fine. When I enter a zip code the DIV "txtHint" pops up and give the right names in the textboxes.
If it can't find the zip code in the database it give blank textboxes. This is also working fine, so you can enter it manually.
The only thing is I'm using Bootstrap Validator on my form.
When I load the page and press the submit button without entering anything I see the error messages that I have to fill in the required fields: zip code, house number, street and place which is also working perfectly fine. But when I enter a zip code that is not in the database, it give the standard empty textboxes (which is good) but the bootstrap validator doesn't "see" them. I tried it with the same names (id="street" name="street") but also something else (id="street2" name="street2"). But my validator keep ignoring them but I want them to be required fields.
So in short, everything works fine, only not the validation on the required fields street and place.
I think I found a answer (another person with a similar problem) why its ignoring my required fields:
But I have no idea to apply this. Can someone give me a hint/tip how to fix this?
Here are my files:
The form:
<script type="text/javascript">
function findZipcode(str)
{
if (str.length==7)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","zipcode.php?q="+str,true);
xmlhttp.send();
}
</script>
<form class="form-horizontal" role="form" id="page" name="page" action="page_submit.php" method="POST" enctype="multipart/form-data">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<div class="form-group">
<label for="inputName" class="col-lg-6">Zipcode and House number</label>
<div class="col-lg-6">
<input type="text" class="control-label" autocomplete="off" id="zipcode" name="zipcode" autocomplete="off" maxlength="6" onkeyup='findZipcode(this.value)'> <input type="text" class="control-label" id="housenumber" name="housenumber" autocomplete="off">
</div>
</div>
</table>
<div id='txtHint' class='postcode'>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<div class="form-group">
<label for="inputName" class="col-lg-6">Streetname</label>
<div class="col-lg-6">
<input type="text" class="form-control" autocomplete="off" id="street" name="street">
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-lg-6">Place</label>
<div class="col-lg-6">
<input type="text" class="form-control" autocomplete="off" id="place" name="place">
</div>
</div>
</table>
</div>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#page').bootstrapValidator({
message: 'This value is not valid',
excluded: ':disabled',
feedbackIcons: {
valid: 'glyphicon',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
zipcode: {
validators: {
notEmpty: {
message: '<font color="#a94442">Please enter a valid zipcode</font>'
}
}
},
street: {
validators: {
notEmpty: {
message: '<font color="#a94442">Please enter a valid steetname</font>'
}
}
},
housenumber: {
validators: {
notEmpty: {
message: '<font color="#a94442">Please enter a valid housenumber</font>'
}
}
},
place: {
validators: {
notEmpty: {
message: '<font color="#a94442">Please enter a valid place</font>'
}
}
}
}
})
.on('success.form.bv', function(e) {
// Reset the message element when the form is valid
$('#errors').html('');
})
.on('error.field.bv', function(e, data) {
// data.bv --> The BootstrapValidator instance
// data.field --> The field name
// data.element --> The field element
// Get the messages of field
var messages = data.bv.getMessages(data.element);
// Remove the field messages if they're already available
$('#errors').find('li[data-field="' + data.field + '"]').remove();
// Loop over the messages
for (var i in messages) {
// Create new 'li' element to show the message
$('<li/>')
.attr('data-field', data.field)
.wrapInner(
$('<a/>')
.attr('href', 'javascript: void(0);')
.html(messages[i])
.on('click', function(e) {
// Focus on the invalid field
data.element.focus();
})
)
.appendTo('#errors');
}
// Hide the default message
// $field.data('bv.messages') returns the default element containing the messages
data.element
.data('bv.messages')
.find('.help-block[data-bv-for="' + data.field + '"]')
.hide();
})
.on('success.field.bv', function(e, data) {
// Remove the field messages
$('#errors').find('li[data-field="' + data.field + '"]').remove();
});
});
</script>
And my zipcode.php
<?php
// SQL login etc
$result = $mysqli->query("SELECT * FROM postcode WHERE zipcode = '".$q."'");
$result_total = $result->num_rows;
$result = mysql_query("SELECT * FROM postcode WHERE zipcode = '".$q."'");
$row = mysql_fetch_array($result);
if ( $result_total >= 1 ) {
echo '<table border="0" cellspacing="0" cellpadding="0" width="100%">
<div class="form-group">
<label for="inputName" class="col-lg-6">Straatnaam</label>
<div class="col-lg-6">
<input type="text" class="form-control" id="street" name="street" autocomplete="off" value="' . $row["street"] . '">
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-lg-6">Plaatsnaam</label>
<div class="col-lg-6">
<input type="text" class="form-control" id="place" name="place" autocomplete="off" value="' . $row["city"] . '">
</div>
</div>
</table>';
}
if ( $result_total <= 0 ) {
echo '<table border="0" cellspacing="0" cellpadding="0" width="100%">
<div class="form-group">
<label for="inputName" class="col-lg-6">Straatnaam</label>
<div class="col-lg-6">
<input type="text" class="form-control" id="street" name="street" autocomplete="off">
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-lg-6">Plaatsnaam</label>
<div class="col-lg-6">
<input type="text" class="form-control" id="place" name="place"autocomplete="off">
</div>
</div>
</table>';
}
?>
Thank you so much in advance! Best regards
Marco
