Modal closure without displaying the message


Topic: Modal closure without displaying the message

mravandoust pro premium priority asked 2 months ago

I created a login form inside the modal, but when I click on the login button, the modal closes without displaying an error or success message. I want the medal to be closed only if the login is successful, otherwise it will not be closed and will display an error message.


Dawid Wajszczuk staff commented 2 months ago

Hi. Without your code I can't see opportunity to help you. So please create a snippet showing your issue https://mdbootstrap.com/snippets/ .


mravandoust pro premium priority commented 2 months ago

https://mdbootstrap.com/snippets/standard/mravandoust/3228676


mravandoust pro premium priority answered 2 months ago

Modal closure without displaying the message


Dawid Wajszczuk staff answered 2 months ago

Hi,

Your problem is related to default behavior of 'submit' in the browsers. When you submit something, the page will reload. So you need to add e.preventDefault() to your login button in order to prevent this default behavior. Example: https://mdbootstrap.com/snippets/standard/d-wajszczuk/3230099#js-tab-view . You need to add validation to take place when the button is clicked or whenever you wish to make validation happen. You can use our validation which can be found here https://mdbootstrap.com/docs/standard/forms/validation/ or make your own. You can also trigger some behavior on certain events related to modal. More information can be found here https://mdbootstrap.com/docs/standard/components/modal/#api-section-events. You can manually close modal by using hide() method. More information in previous link under Methods section.

Keep coding,
Dawid


mravandoust pro premium priority commented 2 months ago

Thank you for your reply


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: Desktop
  • Browser: chrome
  • OS: 10
  • Provided sample code: No
  • Provided link: No
Tags