MVC Unobtrusive Validation. How to display validation message with toastr message plugin

Question

I have simple Ajax form

@using (Ajax.BeginForm("SignUpForFree", null, new AjaxOptions()
    {
        InsertionMode = InsertionMode.Replace
    }, new { id = "signup-form" }))
    {
        @Html.LabelFor(m => m.Email)
        @Html.TextBoxFor(m => m.Email)
        <input type="submit" value="CREATE FREE ACCOUNT" onclick="customSubmit()"/>
    }

and JS which validate the form and if it's not valid - displays messages in message window:

<script type="text/javascript">
        function customSubmit() {
            var form = $("#signup-form");
            if (!ValidateForm(form))
                return;
            $.ajax({
                type: 'POST',
                url: "@Url.Action("SignUpForFree")",
                data: form.serialize()
            });
        }
    </script>
function ValidateForm(form) {
    $.validator.unobtrusive.parse(form);
    var validator = form.validate();
    if (!form.valid()) {
        //some code here to display error message
        return false;
    }
    return true;
}

But when I submit the form - I have 2 submit which happens one by one. How I can prevent 2nd submit or how I can override standard validation process?

Answer 1

I've found the answer for my question. This is the form

@using (Ajax.BeginForm("SignUpForFree", null, new AjaxOptions()
    {
        InsertionMode = InsertionMode.Replace
    }, new { id = "signup-form" }))
    {
        @Html.LabelFor(m => m.Email)
        @Html.TextBoxFor(m => m.Email)
        <input type="submit" value="CREATE FREE ACCOUNT"/>
    }

And this how to hook even when validation fails and add your-own handler for this as additional to exists one:

<script type="text/javascript">
        $(document).ready(function () {
            $('#signup-form').bind('invalid-form.validate', function (form, validator) {
                showErrorMessagesOnValidate(validator.errorList);
            });
        });
    </script>

And this is function which will show toastr.js messages with validation errors:

showErrorMessagesOnValidate = function(errors) {
    if (!errors)
        return;
    var toastrObj = {
        ToastMessages: []
    };
    errors.forEach(function(item) {
        var label = $(item.element.labels[0]).text();
        var msg = {
            Title: label,
            Message: item.message,
            Type: "Warning"
        };
        toastrObj.ToastMessages.push(msg);
    });
    displayMessages(toastrObj);
}
function displayMessages(toastrObj) {
    $.each(toastrObj.ToastMessages, function (idx, msg) {
        toastr[msg.Type.toLowerCase()](msg.Message, msg.Title, {});
    });
}

Thanks for article from CodeProject Modify jQuery validation settings using MVC unobtrusive validation