Question : jQuery/JavaScript validation controls

Hi,

I have a form on a sharepoint site and want some fields to be required fields (datetime picker etc.).
To make some other fields visible/hidden and also add a red * after required field titles I use (example) :

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
//Strategic Priority
$('nobr:contains("Strategic Priority")').closest('tr').show();
$('nobr:contains("Strategic Priority")').html("Strategic Priority <span class=\"validate\"> *</span>");

//Performance Measure
$('nobr:contains("Performance Measure")').closest('tr').hide();

//Start Date   
$('nobr:contains("Start Date")').closest('tr').show();
$('nobr:contains("Start Date")').html("Start Date <span class=\"validate\"> *</span>");

What is the best way to validate required field elements when the user hits a submit button?

The HTML looks something like :

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
<td class="ms-formbody" valign="top" width="400px">
		<!-- FieldName="Target Date"
			 FieldInternalName="DueDate"
			 FieldType="SPFieldDateTime"
		  -->
			<span dir="none">
		<script language="javascript">g_strDateTimeControlIDs["SPDueDate"] = "ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl04_ctl00_ctl00_DateTimeField_DateTimeFieldDate";</script>

				<table><tbody><tr>
				<td class="ms-dtinput">
				<label for="ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl04_ctl00_ctl00_DateTimeField_DateTimeFieldDate" style="display: none;">Target Date Date</label>
				<input name="ctl00$m$g_c6ae303a_6013_4adb_8057_63a214bcfd24$ctl00$ctl04$ctl10$ctl00$ctl00$ctl04$ctl00$ctl00$DateTimeField$DateTimeFieldDate" maxlength="45" id="ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl04_ctl00_ctl00_DateTimeField_DateTimeFieldDate" title="Target Date" class="ms-input" autopostback="0" type="text"></td>

Generated HTML for button

1:
2:
3:
4:
5:
<td class="ms-toolbar" nowrap="true">
	
		<table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td width="100%" align="right" nowrap="nowrap">
			<input name="ctl00$m$g_c6ae303a_6013_4adb_8057_63a214bcfd24$ctl00$toolBarTbl$RightRptControls$ctl00$ctl00$diidIOSaveItem" value="OK" onclick='if (!PreSaveItem()) return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$m$g_c6ae303a_6013_4adb_8057_63a214bcfd24$ctl00$toolBarTbl$RightRptControls$ctl00$ctl00$diidIOSaveItem", "", true, "", "", false, true))' id="ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem" accesskey="O" class="ms-ButtonHeightWidth" target="_self" type="button">
		</td>

I cannot use ID or name to get the element and check whether it's empty or not.

THanks in advance.

Answer : jQuery/JavaScript validation controls

Here's a pretty simple mock-up of what (I think) you are trying to achieve. The meat is the .after() and .next() functions of jquery. $.after() allows you to insert something directions after a selected DOM element (in this case, your Start Date input). $.next() will allow you to select the inserted <span> and remove it if validation passes.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:



<html>
      <head>
            <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

			<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
            <style type="text/css">
                  * { font-family: Verdana; font-size: .97em; }


            </style>


      </head>

      <body>

			<input type="text" id="txt" Title="Start Date" />
			<button id="sub" type="submit" onclick="return validateForm()">Submit</button>
            <script>

				function validateForm() {
					var obj = $("input[title=Start Date]")
					if(!$(obj).val()) {
						$(obj).after("<span class='error'>Needed</span>");
						return false;
					} else {
						$(obj).next("span").remove();
						return true;
					}
				}

            </script>

      </body>
</html>