javascript - Form Validation on Twitter Bootstrap Modal -
i have working form validation checks fields before sending email trough contact form.
the form validation won't work inside twitter bootstrap modal. script checks in js if fields filled , correct. sends information php file processing , returns false or true in ajax js file confirms user if email send or not.
when tried plug in bootstrap modal ajax true wont return js file , displays "true" in browser window.
it needs send "true" js file "send button" changes in "messages succesfully send" when clicking send redirects email.php.
so how can "true" value passed on js file , keep modal open change send button successfull message?
the code following:
html
<div id="mymodal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> <img class="small-logo" src="http://www.website.nl/img/logo.jpg"> </div> <div class="modal-body"> <form class="popup-form" data-async data-target="#mymodal" id="contact_form" action="email.php" method="post"> <div class="forminput"> <p>aanhef</p> <input type="radio" name="aanhef" value="dhr" id="aanhef" required="required" /> <label for="dhr">dhr.</label> <input type="radio" name="aanhef" value="mvr" id="aanhef" required="required"/> <label for="mvr">mvr.</label> <div id="aanhef_error" class="error">kies uw aanhef</div> </div> <div class="forminput"> <p>achternaam</p> <input type='text' name='naam' id='naam' required="required"> <div id='naam_error' class='error'>vul een geldige naam in</div> </div> <div class="forminput"> <p>voornaam</p> <input type='text' name='voornaam' id='voornaam' required="required"> <div id='voornaam_error' class='error'>vul een geldige voornaam in</div> </div> <div class="forminput"> <p>telefoonnummer</p> <input type='text' name='telefoon' id='telefoon' required="required"> <div id='telefoon_error' class='error'>vul een geldig telefoon nummer in</div> </div> <div class="forminput"> <p>straatnaam</p> <input type='text' name='straatnaam' id='straatnaam' required="required"> <div id='straatnaam_error' class='error'>vul een geldige straatnaam in</div> </div> <div class="forminput"> <p>huisnummer</p> <input type='text' name='huisnummer' id='huisnummer' required="required"> <div id='huisnummer_error' class='error'>vul een geldig huisnummer in</div> </div> <div class="forminput"> <p>postcode</p> <input type='text' name='postcode' id='postcode' required="required"> <div id='postcode_error' class='error'>vul een geldige postcode in</div> </div> <div id='mail_success' class='success'>message send!</div> <div id='mail_fail' class='error'>sending email failed try emailing email@email.com</div> <div class="clear"></div> <div id='submit'> <input type='submit' id='send_message' value='verstuur'> </div> </form> </div> </div> </div> js
$(document).ready(function(){ $('#send_message').click(function(e){ //stop form submission & check validation e.preventdefault(); // variable declaration var error = false; var aanhef = $('input[name=aanhef]:checked').val(); var naam = $('#naam').val(); var voornaam = $('#voornaam').val(); var straatnaam = $('#straatnaam').val(); var huisnummer = $('#huisnummer').val(); var postcode = $('#postcode').val(); var telefoon = $('#telefoon').val(); // form field validation if (aanhef == undefined) { var error = true; $('#aanhef_error').fadein(500); } else { $('#aanhef_error').fadeout(500); } if(naam.length < 3){ var error = true; $('#naam_error').fadein(500); }else{ $('#naam_error').fadeout(500); } if(voornaam.length < 3){ var error = true; $('#voornaam_error').fadein(500); }else{ $('#voornaam_error').fadeout(500); } if(straatnaam.length < 6){ var error = true; $('#straatnaam_error').fadein(500); }else{ $('#straatnaam_error').fadeout(500); } if(huisnummer == ""){ var error = true; $('#huisnummer_error').fadein(500); }else{ $('#huisnummer_error').fadeout(500); } if(postcode.length < 5){ var error = true; $('#postcode_error').fadein(500); }else{ $('#postcode_error').fadeout(500); } if(telefoon.length < 8){ var error = true; $('#telefoon_error').fadein(500); }else{ $('#telefoon_error').fadeout(500); } // if there no validation error, next process mail function if(error == false){ // disable submit button after form processed 1st time successfully. $('#send_message').attr({'disabled' : 'true', 'value' : 'versturen...' }); /* post ajax function of jquery data submission of form form sends values email.php*/ $.post("email.php", $("#contact_form").serialize(),function(result){ //check result set email.php file. if(result == 'sent'){ //if email sent successfully, remove submit button $('#submit').remove(); //display success message $('#mail_success').fadein(500); }else{ //display error message $('#mail_fail').fadein(500); // enable submit button again $('#send_message').removeattr('disabled').attr('value', 'send message'); } }); } }); }); php
<?php $to = 'email@email.com' . ', '; // note comma $to .= 'email2@email.com'; $subject = ' subject of email'; $headers = 'mime-version: 1.0' . "\r\n"; $headers .= 'content-type: text/html; charset=iso-8859-1' . "\r\n"; $headers .= 'from: ' . $_request['naam'] . "<br>"; $headers .= 'reply-to: ' . $_request['email'] . "<br>"; $message .= 'aanhef: ' . $_request['aanhef'] . "<br>"; $message .= 'achternaam: ' . $_request['naam'] . "<br>"; $message .= 'voornaam: ' . $_request['voornaam'] . "<br>"; $message .= 'straatnaam: ' . $_request['straatnaam'] . "<br>"; $message .= 'huisnummer: ' . $_request['huisnummer'] . "<br>"; $message .= 'postcode: ' . $_request['postcode'] . "<br>"; $message .= 'telefoon: ' . $_request['telefoon'] . "<br>"; if (@mail($to, $subject, $message, $headers)) { // transfer value 'sent' ajax function showing success message. echo 'sent'; } else { // transfer value 'failed' ajax function showing error message. echo 'failed'; } ?>
Comments
Post a Comment