Jquery form validation failing

[sunny124]

Hi guys,

I am trying to display validation error messages when form validation fails. Currently it does display the error messages but then disappears straight away. How can I stop the page from refreshing when validation fails?

I have return false in my code when validation fails but still having same problem.

Currently I have only done the validation for the full name only. The error msg is showed in:

<tr>
		      <td id='full_name_err_msg'>
		     </td>
		   </tr>

So if anyone can help me out, I would appreciate it.

Thank you
In my js file:

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()==""){//failed
				elem_err_msg.css('border', 'red solid 1px');
				elem_err_msg.html('This field cannot be empty');
				return false;
			}
			//passed
			return true
		}
	})(jQuery);

In my 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>
                  <tr>
		    <td>
			<input type='submit' name='submit' id= 'submit' value='Submit'/>
		   </td>
			<td>
			<input type='reset' name='reset' value='Reset'/>
			</td>
		  </tr>
	       </table>
	    </form>";
					
	}

[Airshow]

Sunny,

A pretty standard validation pattern is as follows:

<script>
$j = jQuery.noConflict();
$j(document).ready(function(){
  function validation(){
    var rtnVal = true;//assume true until any field validator indicates false.

    // fullname validation
    rtnVal = rtnVal && is_field_empty($j('#fullname'), $j('#full_name_err_msg'));

    // other validations here
    //rtnVal = rtnVal && .........

    return rtnVal;
  }
  function is_field_empty(elem, elem_err_msg){
    if(elem.val()==""){
      elem_err_msg.css('border', 'red solid 1px').html('This field cannot be empty');
      return false;
    }
    return true;
  }

<?php if(!is_admin()){ ?>
  $j('#sks_email_form').submit(validation);
<?php } ?>
};
</script>

Notes:
1. Everything necessary is established in the same scope - $(document).ready(.....) - with no need for globals.
2. is_field_empty returns true/false to validation , which must itself return true/false to determine whether the form is submitted or not.

Airshow

[sunny124]

Thank you very much Airshow. It works now. :)

Sunny124