[CLOSED] DirectEvents + MVC + client side validation: prevent direct event on invalid form

[jlosi]

Hey Guys.. I am struggling with trying to figure out how to prevent the direct event from firing if a form doesn't validate on the client side.
Consider a login form (username, password). I just want to make sure that the login button doesn't submit if both fields are empty.

Any suggestions? I'm sure I'm missing something simple.

To work around it for now, I just made a plugin for the form and dropped a click listener for that button to call a method which runs the validation and posts.. but then that requires me to handle the redirect to login page and all that junk which the Direct Event handled for me. I'd rather use the direct event if I can figure out how to stop the event on an invalid form.
[EDIT]
I've tried hooking into the Before handler on the direct event and returning false if not valid, but it still posts to the url.


Thanks.

[Daniil]

Hi,

I've tried hooking into the Before handler on the direct event and returning false if not valid, but it still posts to the url.

Returning false from a Before handler should stop DirectEvent firing.

Please demonstrate a sample how you are trying.

[jlosi]

I figured it out.

My button was set up like this:

  <ext:Button ID="LogOnButton" runat="server" Text="Logon" IDMode="Explicit"  >
            <DirectEvents>
               <Click Url="/Login/Authenticate" FormID="LoginForm"  Before="beforeActionHandler(el,type,action,extraParams,o)" />
           </DirectEvents>
  </ext:Button>

So when I stepped through, I noticed that this was the actual hook up JS for the before handler

before:function(el,type,action,extraParams,o){beforeActionHandler(el,type,action,extraParams,o)}

the 'beforeActionHandler' method was returning false, but the encapsulating function was NOT returning the value of the 'beforeActionHanlder'

before:function(el,type,action,extraParams,o){[NEED RETURN HERE]beforeActionHandler(el,type,action,extraParams,o)}

Without the return, this line

o.before.call(o.control || window, o.control, o.eventType, o.action, o.extraParams, o)

returns undefined in the resourcemanager.js (line 2716)

So I updated my signature in the markup for the direct event to be

 
<DirectEvents>
      <Click Url="/Login/Authenticate" FormID="LoginForm"  Before="return beforeActionHandler(el,type,action,extraParams,o)" />
</DirectEvents>

And that fixed the problem. HOWEVER, that is completely unexpected behavior. I would have though that the direct event code gen would have inserted the return before the handler call. Is that by design? or is that a bug?

[Daniil]

Well, you can set up a function name in Before. The following Before prevents a DirectEvent.

Example 1

<script type="text/javascript">
    var onBefore = function (el,type,action,extraParams,o) {
        return false;
    };
</script>

<DirectEvents>
    <Click OnEvent="TestDirectEventHandler" Before="onBefore" />
</DirectEvents>

Or you can set up some JavaScript code like this.

Example 2

<DirectEvents>
    <Click OnEvent="TestDirectEventHandler" Before="return false;" />
</DirectEvents>

Sure, we have to wrap that code in an additional function. And, obviously, we should not add "return", because where can be any JavaScript code and adding "return" just can cause a JavaScript syntax error.

In your case you can replace

<Click ... Before="return beforeActionHandler(el,type,action,extraParams,o)" />

with

<script type="text/javascript">
    var beforeActionHandler= function (el,type,action,extraParams,o) {
        return false;
    };
</script>

<Click ... Before="beforeActionHandler" />

Hope this helps.

[jlosi]

Thanks for explaining why you can't wrap it. I understand what the intention is now. I just wanted to make sure
1. there wasn't any fwk bug
2. I was doing it properly

Consider this closed.

Thanks!