Combining server and client side event handlers for xPage Form Submission

Question

I have been reviewing the postings online, as well as the postings by IBM and I'm still confused about how to get my form to submit.

I am using formvalidation.io validation and from CSJS, I get whether the validation is correct or not. Then, I want to submit if it is correct, and not submit if it isn't.

I've tried different variations but get the same result. If the validation is NOT correct, the form correctly continues to display and doesn't submit. However, if the validation IS correct, the form does not submit. I receive the error message XSP.executeOnServer is not a function and have tried various ways to resolve this without success. Here's my code:

<xp:button value="Join Our Team" id="button1">
   <xp:eventHandler event="onclick" submit="false">
      <xp:this.script><![CDATA[$(document).ready(function() {
         $(this).click(function(){
         $("form").data('formValidation').validate();
         var isValidForm = $("form").data('formValidation').isValid();
         if (isValidForm){
            XSP.executeOnServer('#{id:eventhandler1a}', '#{id:panel1}');
         }
         else {
            $("form").data('formValidation').validate();
            return false;
         }
     });
});]]></xp:this.script>

<xp:this.action><![CDATA[#{javascript:XSP.executeOnServer = function () {
// the event handler id to be executed is the first argument, and is required
    if (!arguments[0])
        return false;
    var functionName = arguments[0];

// OPTIONAL - The Client Side ID that is partially refreshed after executing the event handler
    var refreshId = (arguments[1]) ? arguments[1] : "@none";
    var form = (arguments[1]) ? XSP.findForm(arguments[1]) : dojo.query('form')[0];

// catch all in case dojo element has moved object outside of form...
    if (!form)
        form = dojo.query('form')[0];

// OPTIONAL - Options object containing onStart, onComplete and onError functions for the call to the
    // handler and subsequent partial refresh
    var options = (arguments[2]) ? arguments[2] : {};

// OPTIONAL - Value to submit in $$xspsubmitvalue. can be retrieved using context.getSubmittedValue()
    var submitValue = (arguments[3]) ? arguments[3] : '';

// Set the ID in $$xspsubmitid of the event handler to execute
    dojo.query('[name="$$xspsubmitid"]')[0].value = functionName;
    dojo.query('[name="$$xspsubmitvalue"]')[0].value = submitValue;
    this._partialRefresh("post", form, refreshId, options);
}   }]]></xp:this.action>
    </xp:eventHandler>
</xp:button>

<xp:panel id="panel1">
    <xp:eventHandler event="onClick" submit="true" id="eventhandler1a" refreshMode="complete">
    <xp:this.action>
        <xp:saveDocument></xp:saveDocument>
    </xp:this.action>
</xp:eventHandler>
    </xp:panel>

Answer 1

This is one of the spooky things that happens from time to time with Domino. Now my code works with a simple return true or return false. I had done this in the beginning and it was a real head scratcher why it wouldn't work. I've had these type of things happen from time to time with Domino and it's always scary when you don't know why they occur. But I'm happy that my clean, simple code works now.