Jquery Validation in Visualforce Page

Question

I need to validate the Account.Unit__c field using some jquery dialog box.But I am having difficulty in getting visual force component Id in jquery.

Update I followed Keith C recommendation and made changes accordingly but I am getting unit value as undefined in alert statement.Someone please look into my code.

<apex:page standardController="Account">
<apex:form>
<apex:pageBlock title="Account Edit" mode="Edit">
    <apex:pageBlockButtons id="theButtons">
        <apex:commandButton value="Save" onclick="return validate()"/>
    </apex:pageBlockButtons>
    <apex:pageBlockSection title="Information">
        <apex:inputField value="{!Account.Name}" id="Unit"/>
    </apex:pageBlockSection>
 </apex:pageBlock>
 <apex:actionFunction action="{!save}" name="saveJavaScriptFunction"/>
</apex:form>

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>
 function validate(){ 
var j$ = jQuery.noConflict();
var unit = j$("input[id$='Unit']").val();  
alert(unit);
if (unit == '') {  
    j$('<div></div>').dialog({
        resizable: false,
        height:140,
        modal: true,
        open: function() {
            var markup = 'No Unit Selected. Do you want to add one?';
            j$(this).html(markup);
        },
        title: "Confirmation",
        buttons: {
            "Yes": function() {
                j$(this).dialog("close");
                // Do nothing so user can add
            },
            "No": function() {
                j$(this).dialog("close");
                // Invoke save
                saveJavaScriptFunction();
            }
        }
    });
    return false; 
} else {
    return true;
 }
}
 </script>
  </apex:page>

Answer 1

I don't think your problem is with the ID matching. The page below (a cut down version of yours without the controller extension and a few changes) displays the dialog when the unit field is empty.

The return values of the dialog button clicks are unconnected to the original "Save" button click so any action you want performing has to be done in JavaScript code. The code below has a saveJavaScriptFunction function defined via an apex:actionFunction and that invokes the controller save method when "No" is clicked.

<apex:page standardController="Account">
<apex:form>
    <apex:pageBlock title="Account Edit" mode="Edit">
        <apex:pageBlockButtons id="theButtons">
            <apex:commandButton value="Save" onclick="return validate()"/>
        </apex:pageBlockButtons>
        <apex:pageBlockSection title="Information">
            <apex:inputField value="{!Account.Name}" id="Unit"/>
        </apex:pageBlockSection>
   </apex:pageBlock>
   <apex:actionFunction action="{!save}" name="saveJavaScriptFunction"/>
</apex:form>

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>
function validate(){ 
    var j$ = jQuery.noConflict();
    var unit = j$("input[id$='Unit']").val();  
    if (unit == '') {  
        j$('<div></div>').dialog({
            resizable: false,
            height:140,
            modal: true,
            open: function() {
                var markup = 'No Unit Selected. Do you want to add one?';
                j$(this).html(markup);
            },
            title: "Confirmation",
            buttons: {
                "Yes": function() {
                    j$(this).dialog("close");
                    // Do nothing so user can add
                },
                "No": function() {
                    j$(this).dialog("close");
                    // Invoke save
                    saveJavaScriptFunction();
                }
            }
        });
        return false; 
    } else {
        return true;
    }
}
</script>
</apex:page>