Something wrong with jquery.validate plugin? or is it just my code??

[geekisthenewsexy]

hi all. i am currently working on form and i am using jquery.validation.js.. i have placed this form inside an iframe so it will be fetched when i click a tab. my problem is, i did a little editing, removed some unnecessary css code. it works fine in FF but when i tried it on IE 7, the validation messages (error messages) that supposed to show up in the form doesn't seem to show..little help please?

[trq]

We can't help without seeing relevant code.

[geekisthenewsexy]

thanks for the reply thorpe. okay,

 

this is the form on the main page w/c is fetched via iframe:

<form class="cmxform" id="signupForm" method="get" action="">


	<fieldset>
	<p>
		<label for="subj_id">ID: </label>
		<input type="text" id="subj_id" name="subj_id" size="10"/>
		<span id="msgbox" style="display:none">
		<?php include('subject_check.php');?>
		</span>
	</p>

	<p>
		<label for="code">Code: </label>
		<input id="code" name="code" size="10"/>
	</p>

	<p>
		<label for="desc">Description: </label>
		<input id="desc" name="desc" size="30"/>
	</p>

	<p>
		<label for="lect">Lecture: </label>
		<input id="lect" name="lect" size="15"/>
	</p>

	<p>
		<label for="lab">Lab: </label>
		<input id="lab" name="lab" size="15"/>
	</p>

	<p>
		<label for="units">Units: </label>
		<input id="units" name="units" size="15"/>
	</p>



	<p>
		<input type="submit" class="submit" value="Submit"/>
			<input type="Reset" name="reset" value="Reset fields"/>
	</p>
</fieldset>
</form>

 

this the jscript code on the main page:

<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});

$().ready(function() {
// validate the comment form when it is submitted

// validate signup form on keyup and submit
$("#signupForm").validate({
	rules: {
		subj_id: "required",
		code: "required",
		desc: {
			required: true				
		},
		lect: {
			required: true

		},
		lab: {
			required: true
		},
		units: {
			required: true,
			units: true
		}

	},
	messages: {
		subj_id: "Please provide the Subject ID",
		code: "Please provide the Subject Code",
		desc: {
			required: "Please enter a description",

		},
		lect: {
			required: "Please enter lecture",

		},
		lab: {
			required: "Please enter lab hours",

		},
		units: "Please enter number of units",

	}
});




});
</script>

 

please, i will show you the css codes>>

 

css (as you can see, i have removed core.css here because it conflicts with the style of my table w/c is included in the main page):

/**********************************

Use: Main Screen Import

***********************************/

@import "reset.css";
@import "cmxformTemplate.css";
@import "cmxform.css";

 

css for "reset.css":

/**********************************

Use: Reset Styles for all browsers

***********************************/

body, p, blockquote {
margin: 0;
padding: 0;
}

a img, iframe { border: none; }

/* Headers
------------------------------*/

h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-size: 100%;
}

/* Lists
------------------------------*/

ul, ol, dl, li, dt, dd {
margin: 0;
padding: 0;
}

/* Links
------------------------------*/

a, a:link {}
a:visited {}
a:hover {}
a:active {}

/* Forms
------------------------------*/

form, fieldset {
margin: 0;
padding: 0;
}

fieldset { border: 1px solid #000; }

legend {
padding: 0;
color: #000;
}

input, textarea, select {
margin: 0;
padding: 1px;
font-size: 100%;
font-family: inherit;
}

select { padding: 0; }

 

css for cmxFormTemplate:

/**********************************

Use: cmxform template

***********************************/
form.cmxform fieldset {
margin-bottom: 10px;
}

form.cmxform label {
display: inline-block;
line-height: 1.8;
vertical-align: top;
cursor: default;
margin-left:10px;
}

form.cmxform fieldset p {
list-style: none;
padding: 5px;
margin: 0;
}

form.cmxform fieldset fieldset {
border: none;
margin: 5px 0 0;
}

form.cmxform fieldset fieldset label {
display: block;
width: auto;
}

form.cmxform label { width: 100px; } /* Width of labels */
form.cmxform fieldset fieldset label { margin-left: 103px; } /* Width plus 3 (html space) */
form.cmxform label.error {
margin-left: 103px;
width: 220px;
}

form.cmxform .submit {
margin-left: 103px;
}

/*\*//*/ form.cmxform legend { display: inline-block; } /* IE Mac legend fix */

 

css for cmxform.css

/**********************************

Name: cmxform Styles

***********************************/
form.cmxform {
width: 370px;
font-size: 1.0em;
color: #333;
}

form.cmxform label {
color: #333;
}

form.cmxform fieldset{

border: 1px solid #C6D5E1;
background-color: #ECF2F6;
}


form.cmxform fieldset p, form.cmxform fieldset fieldset {
padding: 5px 5px 7px;

}

form.cmxform label.error, label.error {
/* remove the next line when you have trouble in IE6 with labels in list */
color: red;
font-style: italic;
}

input {	
border: 1px solid black; 
}

input.error { border: 1px dotted red; }
form.cmxform .gray * { color: gray; }