jQuery/JavaScript validation controls

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) :

//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 :

<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:

<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$开发者_Python百科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.

Edit:

I tried with if ($("input[title='Start Date']").val().length < 1) { alert("test"); }

and it doesn't give me a popup if the field has some data in it but if it's empty it does. Next step is to add some text after the field (instead of raising an alert) saying "Required Field". How do I insert this with jQuery/JavaScript after the element I validate?

How about something like this?

$("input[title='Start Date']").each(function() {
  var obj = $(this);
  if (obj.val().length < 1) {
    // Check if notified already, if not, add text
    if (!obj.data('notified')) {
      obj.after('Required Field');
      obj.data('notified', true);
    }
  }
});