form validation messages disappear
Hi guys,
I'm learning jquery. I'm trying to display error messages when form validation fails.
Currently the error message does show but disappears straight away. I am doing this in wordpress, trying to create my own validation plugin.
It does show the error message 'This field cannot be empty' when I click submit but disappears straight away.
The below code is in the sks_email_form.php file
- function jquery_validation(){
- //echo 'Inside jquery_validation'; //works
- //echo plugins_url('/js/validation2.js', __FILE__); // correct
- if(!is_admin()){
- ?><script type="text/javascript" src="<?=plugins_url();?>/Sks_email_form_plugin/js/validation2.js"></script>
- <script type="text/javascript">
- var $j = jQuery.noConflict();
- $j(document).ready(function(){
- $j('#sks_email_form').submit(function(){
- validation();
- });
- });
- </script>
- <?}
- }
- function sks_email_form(){
- echo "<form name='sks_email_form' id='sks_email_form' method='post' action=''>
- <table class='email_table'>
- <tr>
- <td>
- Full name:
- </td>
- <td>
- <input type='text' name='fullname' id='fullname'/>
- </td>
- </tr>
- <tr>
- <td id='full_name_err_msg'>
- </td>
- </tr>
- <tr>
- <td>
- Email:
- </td>
- <td>
- <input type='text' name='email' id='email'/>
- </td>
- </tr>
- <tr>
- <td>
- Message:
- </td>
- <td>
- <textarea name='msg' id='msg' cols='35' rows='6'></textarea>
- </td>
- </tr>
- <td>
- <input type='submit' name='submit' id= 'submit' value='Submit'/>
- </td>
- <td>
- <input type='reset' name='reset' value='Reset'/>
- </td>
- </tr>
- </table>
- </form>";
-
- }
In javascript file I have the following:
- var $j = jQuery.noConflict();
-
- (function($j){
- validation = function(){
- var full_name = $j('#fullname');
- var full_name_err_msg = $j('#full_name_err_msg');
-
- //alert('full_name: '+full_name.val()); // works
- is_field_empty(full_name, full_name_err_msg);
- }
- function is_field_empty(elem, elem_err_msg){
- //alert('inside is_field_empty function'); // works
- if(elem.val()==""){
- elem_err_msg.css('border', 'red solid 1px');
- elem_err_msg.html('This field cannot be empty');
- }
- }
- })(jQuery);
Can anyone please tell me what I am doing wrong?
Thanks
Alucard007