bootstrapValidator + XMLHttpRequest();

[ScreamerHS]

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:

 

since you are attaching the form control on the fly, the validator doesn't know about the new element. You need to call the validator again to tell that you have added some new elements to validate.

 

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

[requinix]

Which "Bootstrap Validator" are you using?

[ScreamerHS]

I'm using BootstrapValidator (http://bootstrapvalidator.com) "The best jQuery plugin to validate form fields. Designed to use with Bootstrap 3"

v0.5.2-dev, built on 2014-09-10

[requinix]

You mean the one that doesn't exist anymore? The one that's been replaced with "FormValidation"? The one that doesn't seem to have any documentation preserved?

 

Fortunately archive.org has a copy from back in September 2014. You know, when the version you're using is from. Try calling revalidateField on "street" and "place" when they get (re?)added to the form.

[ScreamerHS]

Thank you requinix. Seems I can't get it to work at this point. Going to try more tomorrow, its a bit late now (01:35am here).

i'll keep you posted.

[ScreamerHS]

Quick reply before I go to work, This is what I want (now, Photoshopped)
When the textboxes are blank it should give a bootstrap validate error on the side. It only works when I press Submit without entering the zip code and house number..

 

[requinix]

Have you checked the rest of the documentation? There might be something in there that's relevant. Or you might have to make it force validation on a field (or whatever) manually onblur.

[ScreamerHS]

I tried a diffrent approach yesterday.

Instead of XMLHttpRequest(); (GET) I used this (POST)

<script>
$(document).ready(function(){
  $("#search-box").keyup(function(){
    $.ajax({
    type: "POST",
    url: "zipcode_check.php",
    data:'keyword='+$(this).val(),
    beforeSend: function(){
    },
    success: function(data){
      $("#suggesstion-box").show();
      $("#suggesstion-box").html(data);
    }
    });
  });
});

function selectZipcode(val) {
$("#test").hide();

}
</script>

It works exactly the same, with the exact same result.

I only used the clean code in another file and that works fine. Not the cross near the textbox, but its saying that the textbox is required, which is fine for now.

But when I added the code to the rest of the script it stops working again, it finds the streetname and place but when I empy the box it doesn't notify me of a required field.

 

I noticed when I remove this line it works fine

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>

Only now my bootstrap validator doesn't work whaaaaaaaaaaa

Any ideas? I tried different versions of the jquery but same problem. When the line has been removed it works, but my validator of the rest of the form not.