anevins Posted June 9, 2011 Share Posted June 9, 2011 I've made a form in php, but I want jquery to animate the error messages using slideDown. I'm trying to implement this with the first name but am having no luck. I don't want to redo the validation in javascript. Current code: $firstname = $_POST['first_name']; $lastname = $_POST['last_name']; $email = $_POST['email']; $reason = $_POST['reason']; if(isset($_POST['submit'])){ if (empty($firstname)){ echo ' <script> $("span.fn_error").slideDown("slow", function()); </script> '; echo '<span class="fn_error">Please enter your First name.<br /></span>'; } if (empty($lastname)){ echo '<span class="error">Please enter your Last name.<br /></span>'; } if (check_email_address($email)==false){ echo '<span class="error">Please enter a valid email address.<br /></span>'; } if (empty($reason)){ echo '<span class="error">Please enter your reason to contact me.<br /></span>'; } if (!empty($firstname) && !empty($lastname) && (check_email_address($email)) && !empty($reason)){ echo '<span class="correct">Thank you '. $firstname .' '. $lastname . ' for taking the time to contact me.<br />I will try to get back to you as soon as possible.</span>'; } } ?> <div id="form"> <form id="contact" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <table> <tr><td>First name:</td><td><input type="text" name="first_name" value="<?php echo $firstname; ?>"/></td></tr> <tr><td></td><td><?php echo $firstname_error; ?></td></tr> <tr><td>Last name: </td><td><input type="text" name="last_name" value="<?php echo $lastname; ?>"/></td></tr> <tr><td></td><td><?php echo $lastname_error; ?></td></tr> <tr><td>Email Address: </td><td><input type="text" name="email" value="<?php echo $email; ?>"/></td></tr> <tr><td></td><td><?php echo $email_error; ?></td></tr> <tr><td>Reason: </td><td><textarea rows="5" cols="16" name="reason" ><?php echo $reason; ?></textarea></td></tr> <tr><td></td><td><?php echo $reason_error; ?></td></tr> <tr><td> </td><td><input type="submit" name="submit" id="submit" value="submit" /></td></tr> </table> </form> </div> Any help is much appreciated, thanks. Link to comment https://forums.phpfreaks.com/topic/238918-form-validation-in-php-jquery-effects/ Share on other sites More sharing options...
Adam Posted June 10, 2011 Share Posted June 10, 2011 Where's your jQuery? Link to comment https://forums.phpfreaks.com/topic/238918-form-validation-in-php-jquery-effects/#findComment-1227838 Share on other sites More sharing options...
anevins Posted June 10, 2011 Author Share Posted June 10, 2011 ... if(isset($_POST['submit'])){ if (empty($firstname)){ echo ' <script> $("span.fn_error").slideDown("slow", function()); </script> '; ... Link to comment https://forums.phpfreaks.com/topic/238918-form-validation-in-php-jquery-effects/#findComment-1227846 Share on other sites More sharing options...
Adam Posted June 10, 2011 Share Posted June 10, 2011 Ah yes, missed that before. Well drop the empty call-back function for the second argument; that's not needed and will be generating an error for it's incorrect syntax. Also you may have trouble getting a span to work, as it's not a block-element, so try with a DIV. Finally, you need to set display:none on the CSS class to hide the errors by default - although personally I would hide it with jQuery instead, so that anyone with JS disabled will still see the messages. Link to comment https://forums.phpfreaks.com/topic/238918-form-validation-in-php-jquery-effects/#findComment-1227855 Share on other sites More sharing options...
anevins Posted June 10, 2011 Author Share Posted June 10, 2011 I can't get it working with what you say, sorry. So I now have jQuery hiding the span (I've made it an inline-block element now). <body> <script> $("span.fn_error").hide(); </script> ... Then I have the modified jQuery in the PHP validation: ... if(isset($_POST['submit'])){ if (empty($firstname)){ echo ' <script> $("span.fn_error").slideDown("slow").toggle(); </script> '; echo '<span class="fn_error">Please enter your First name.</span><br />'; } ... Link to comment https://forums.phpfreaks.com/topic/238918-form-validation-in-php-jquery-effects/#findComment-1227863 Share on other sites More sharing options...
anevins Posted June 10, 2011 Author Share Posted June 10, 2011 sorry wrong thread post Link to comment https://forums.phpfreaks.com/topic/238918-form-validation-in-php-jquery-effects/#findComment-1227903 Share on other sites More sharing options...
Adam Posted June 10, 2011 Share Posted June 10, 2011 Why have you added the toggle() on the end? This works for me: <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('span.fn_error').hide().slideDown('slow'); }); </script> <style type="text/css"> span.fn_error { display: inline-block; } </style> <span class="fn_error">This is an error</span> Link to comment https://forums.phpfreaks.com/topic/238918-form-validation-in-php-jquery-effects/#findComment-1227923 Share on other sites More sharing options...
anevins Posted June 10, 2011 Author Share Posted June 10, 2011 Thank you Adam. Link to comment https://forums.phpfreaks.com/topic/238918-form-validation-in-php-jquery-effects/#findComment-1227932 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.