Jump to content

bootstrapValidator + XMLHttpRequest();


ScreamerHS

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.