Jquery stop button from post back

Question

I have some Jquery that is doing validation. The validation works currently on the fly because its in an anonymous function that just runs.

When the user clicks the save button and the validation has failed I want the page not to post back, and not to reload (so the validation messages stay up).

Currently the page is posting back even though I'm doing e.preventDefault() and I'm loosing the validation messages. Any idea on how I can prevent the page from posting back?

here is the code:

<script type="text/javascript">
    $(function () {

        $(".dateTimePickerField").kendoDateTimePicker({
            min: new Date(1950, 0, 1),
            max: new Date(2049, 11, 31),
            value: new Date(2000, 10, 1),
            interval: 15
        });

        var validator = $(".dateTimePickerField").kendoValidator({
            rules: {
                dateValidation: function (e) {
                    var currentDate = Date.parse($(e).val());
                    if (!currentDate) {
                        return false;
                    }
                    return true;
                }
            },
            messages: {
                //Define your custom validation massages
                required: "datetime required",
                dateValidation: "Invalid datetime"
            }
        }).data("kendoValidator");

        $('#bttnSaveGuru').click(function (e) {
            if (!validator.validate()) {
                e.preventDefault();
                e.stopPropagation();
            }
        });
    });
</script>



<button runat="server" id="bttnSaveGuru" class="saveButton" type="button" clientidmode="Static">Save</button>
<tr>
    <td runat="server" id="tdDate"></td>
    <td runat="server" id="tdDescription"></td>
    <td runat="server" id="tdLocation"></td>
    <td><input type="text" runat="server" id="txtDate" class="dateTimePickerField" style="width:180px;margin-right:55px;" required="required"/></td>
    <td><input type="text" runat="server" id="txtDateEnd" class="dateTimePickerField" style="width:180px;margin-right:55px;" required="required"/></td>
</tr>

A solution that has been suggested to me is to run the validation in the onclick property of the button, like this

 <button runat="server" id="bttnSaveGuru" class="saveButton" type="button" clientidmode="Static" onclick="if(!checkValidation()){return false;}">Save</button>

This does in fact prevent the page from posting back, but it requires inline code on the button and I would rather prevent the page from posting back in the anonymous function if I can.

Can you put a working jsFiddle together? And what is validator.validate()? It doesn't appear to be defined...which could be the reason e.preventDefault isn't stopping the page from reloading — joshboley, Jul 02 '14 at 14:20
Tried to get a simple jsfiddle together, but its not poping up with the alert. not sure wehter to put raw html output into the html section, or to put the html on my aspx page in that section. here is the link http://jsfiddle.net/S4e2L/4/ — mgmedick, Jul 02 '14 at 14:50
Right, the fiddle isn't working because kendoValidator and kendoDateTimePicker are undefined — joshboley, Jul 02 '14 at 14:56

score 2 · Answer 1 · answered Jul 02 '14 at 15:08

Well I spoke with some co-workers and came to the following conclusion.

Because this is a asp.net server side button its always going to get the doPostback in its onclick event. No matter what I add in an anonymous function to prevent postback it doesn't work.

Looks like the only way to prevent post back on a server side button like this is to return false from within the button OnClick or OnClientClick property itself. At least that's what I'm experiencing so that the solution I'm going to go with.

The anonymous javascript function code just appears to be appending to the onclick event, but its not preventing the dopostback that is automatically being generated in the onclick event.

<button runat="server" id="bttnSaveGuru" class="saveButton" type="button" clientidmode="Static" onclientclick="if(!checkValidation()){return false;}">Save</button>

score 0 · Answer 2 · answered Jul 02 '14 at 14:20

0

Did you check if you really enter the click handle ? If so, could you try

$('#bttnSaveGuru').click(function (e) {
  e.preventDefault();
  if (validator.validate()) {
    //manually trigger submit
  }
});

answered Jul 02 '14 at 14:20

Pierre Fraisse

970
1
11
21

Yea I'm entering it, I've tried alert(1); and it works. The button itself looks like this when I view source. – mgmedick Jul 02 '14 at 14:24
did you try to preventDefault as the first line of the handler so it correctly stops the default behaviour and if the form is correct then trigger send manually ? – Pierre Fraisse Jul 02 '14 at 14:26
As you can see it's getting an autowired __doPostBack because its a runat server button. Just can't find a way to stop it from posting back other than within the actual onclick property of the button. – mgmedick Jul 02 '14 at 14:26
My bad, didn't read carefully your answer... What framework is generating that onclick event ? Even better, could you write a jsfiddle that reproduce your issue ? – Pierre Fraisse Jul 02 '14 at 14:29
Yea this is not working either, did the prevent default as first line, and it still posts back. $('#bttnSaveGuru').click(function (e) { e.preventDefault(); }); – mgmedick Jul 02 '14 at 14:30
ASP.net is the framework, this particular page is just webforms. So there is the button and then in the back end code there is this handler method. "Private Sub bttnSaveGuru_ServerClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles bttnSaveGuru.ServerClick" – mgmedick Jul 02 '14 at 14:32
Here is an attempt at the JSfiddle, never really done one before so I don't think it actually works, but it at least shows the html I'm dealing with http://jsfiddle.net/S4e2L/. – mgmedick Jul 02 '14 at 14:44
1

Yeah your fiddle can't work since all this behaviour is caused by ASP.net. I'm no expert with this framework but I found this with a rapid check : http://stackoverflow.com/questions/7382849/validation-event-for-asp-net-client-side-validation It seems that some events can be used to intercept click action (onClientClick) or it could be done at the submit event level directly on the form. – Pierre Fraisse Jul 02 '14 at 14:49

score 0 · Answer 3 · answered Jul 02 '14 at 14:23

0

As javascript is async, the button action is activated while validation is running. Prevent default directly on click, validate and then if it's valid !

    $('#bttnSaveGuru').click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        if (!validator.validate()) {
            //send here
        }
    });

answered Jul 02 '14 at 14:23

Hornth

323
5
13

So I tried this and the postback is still getting in. I'm wondering if there isn't some unknown variable here, because everyone is saying its just as simple as you said. – mgmedick Jul 02 '14 at 14:43

Jquery stop button from post back

3 Answers3