Prevent closing of modal Dialog

4 Apr 20229 minutes to read

You can prevent closing of modal dialog by setting the beforeClose event argument cancel value to true. In the following sample, the dialog is closed when you enter the username value with minimum 4 characters. Otherwise, it will not be closed.

CSHTML

<div id='container' style="height:400px;">
    <ejs-button id="targetButton" content="Open Dialog"></ejs-button>
    <ejs-dialog id="dialog" header="Sign In" beforeClose="validation" target="#container" width="300px">
        <e-content-template>
            <div class='wrap'>
                <div id='input-container'>
                    <div class='e-float-input'>
                        <input id='textvalue' type='text' required /><span class='e-float-line'></span>
                        <label class='e-float-text'>Username </label>
                    </div>
                </div><div class='form-group'>
                    <div class='e-float-input'>
                        <input id='textvalue2' type='Password' required />
                        <span class='e-float-line'></span>
                        <label class='e-float-text'>Password</label>
                    </div>
                </div>
            </div>
        </e-content-template>
        <e-dialog-buttons>
            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons" click="dlgButtonClick"></e-dialog-dialogbutton>
        </e-dialog-buttons>
    </ejs-dialog>
</div>

<script>
    // To get the all input fields and its container.

    let inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');

    // Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.

    for (let i = 0; i < inputElement.length; i++) {
        inputElement[i].addEventListener("focus", function () {
            let parentElement = this.parentNode;
            if (parentElement.classList.contains('e-input-in-wrap')) {
                parentElement.parentNode.classList.add('e-input-focus');
            } else {
                this.parentNode.classList.add('e-input-focus');
            }
        });
        inputElement[i].addEventListener("blur", function () {
            let parentElement = this.parentNode;
            if (parentElement.classList.contains('e-input-in-wrap')) {
                parentElement.parentNode.classList.remove('e-input-focus');
            } else {
                this.parentNode.classList.remove('e-input-focus');
            }
        });
    }

    // Add 'e-input-btn-ripple' class to the icon element for achive ripple effect when click on the icon.

    var inputIcon = document.querySelectorAll('.e-input-group-icon');
    for (let i = 0; i < inputIcon.length; i++) {
        inputIcon[i].addEventListener('mousedown', function () {
            this.classList.add('e-input-btn-ripple');
        });
        inputIcon[i].addEventListener('mouseup', function () {
            let element = this;
            setTimeout(function () {
                element.classList.remove('e-input-btn-ripple');
            }, 500);
        });
    }
    document.getElementById('targetButton').onclick = function () {
        var dialog = document.getElementById("dialog").ej2_instances[0];
        dialog.show();
        document.getElementById("textvalue").value = "";
        document.getElementById("textvalue2").value = "";
    };

    function dlgButtonClick() {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.hide();
    }

    function validation(args) {
        let text = document.getElementById('textvalue');
        let text1 = document.getElementById('textvalue2');
        if (text.value === "" && text1.value === "") {
            args.cancel = true;
            alert("Enter the username and password")
        } else if (text.value === "") {
            args.cancel = true;
            alert("Enter the username")
        } else if (text1.value === "") {
            args.cancel = true;
            alert("Enter the password")
        } else if (text.value.length < 4) {
            args.cancel = true;
            alert("Username must be minimum 4 characters")
        } else {
            args.cancel = false;
            document.getElementById("textvalue").value = "";
            document.getElementById("textvalue2").value = "";
        }
    }
</script>

Controller.cs

public class HomeController : Controller
{

    public class ButtonModel
    {
        public string content { get; set; }
        public bool isPrimary { get; set; }

    }
    public ActionResult Index()
    {
        ViewBag.DialogButtons = new ButtonModel() { isPrimary = true, content = "LOG IN" };
        return View();
    }
}