Jump to content

ScreamerHS

New Members
  • Posts

    7
  • Joined

  • Last visited

ScreamerHS's Achievements

Newbie

Newbie (1/5)

0

Reputation

  1. I'm using a Bootstrap multiselect (https://github.com/davidstutz/bootstrap-multiselect ) which I want to validate on a form (defaultForm) with a formvalidator (The best jQuery validation plugin to validate form fields, support Bootstrap, Foundation, Pure, SemanticUI, UIKit frameworks - FormValidation) . This example works fine. It revalidate on selecting a option from the multiselect. 'tags[]': { validators: { callback: { message: 'Select one or more options</font>', callback: function(value, validator, $field) { var options = validator.getFieldElements('tags[]').val(); return (options != null && options.length >= 1 && options.length <= 10); } } } }, But I want this to validate when another dropdown menu has selected "Yes". (it has two options as a answer - Yes and No). I also get this thing to work with the following code. 'tags[]': { validators: { callback: { message: 'Select one or more options</font>', callback: function(value, validator, $field) { var x = document.getElementById("data_important"); var i = x.selectedIndex; return (x.options[i].text == 'No') ? true : (x.options[i].text == ''); } } } }, So both options works fine, but I can't get them combine together, that the it's going to validate only when another dropdown (data_important) is chosen"Yes" and that it revalidates when selecting a option on the multiselect with name "tags[]". Is there a fix to combine them together, that both elements works?
  2. 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.
  3. 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..
  4. 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.
  5. 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
  6. 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
  7. I'm using the following script: http://jsfiddle.net/VzVy6/8/ It give a alert message that slide in/out when a required field is still empty on submit. The script works fine, and in this example its only one field. When the field is empty I see the fade in alert message, and when the field has been filled in I see a normal popup alert message: alert("Would be submitting form"); I can't get it to work to change this alert message to a page POST submit. I was looking online, and I see Ajax examples that I don't get to work. What I want is that when all fields are filled in, that the form POST submit to another page including the values in the textboxes ofcourse. Maybe its something really easy, but I have already a headache because tried to get it to work for more then 5 hours in a row. Thank you for your time.
×
×
  • 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.