Copeland priority asked 11 months ago
1) From the tutorial and from the MDB website the basic form shows the label in line with the input box border and appears to use the class="form-outline". I cannot get this code snippet to work on my machine in either Chrome, Firefox or Edge. Also when I tried to research this class I cannot find any reference to it in the MDB or bootstrap documentation and further advice from StackOverflow etc would suggest a custom CSS script is needed. Can you provide some clarification here?
2) If a bootstrap form is used and the forms do look good custom JS validation is recommended and a starter script has been provided. Could someone point me to a further tutorial on this as I am unsure how to expand this script to get the results shown on your website? I can add an event listener but I am not sure how to get the validation to work.
My email address is email@example.com
1) If your code is exactly the same as in documentation, for example:
<div class="form-outline"> <input type="text" id="form12" class="form-control" /> <label class="form-label" for="form12">Example label</label> </div>
And it doesn't display proper styles, it means your imports don't work properly. Could you show me how you imported your CSS and JS? What approach did you choose to install MDB into your project? If you moved your MDB files into your project folder, you could link the stylesheet like this:
<link rel="stylesheet" href="css/mdb.min.css" />
<head> section. Make sure your path is correct in the
If in doubt, here is a step by step guide covering installation https://mdbootstrap.com/docs/standard/pro/installation/
2) If you say there is a starter script provided, I guess it's this one:
In here the main validation script is in the
checkValidity(); method of Forms (you can read more on this method in the MDN Docs).
If you wish to customize it a bit, you can get the value of your input upon submitting and put some
if statements to decide whether you wish to throw some errors, or approve the form.
But then the approach differs from the starter. See this snippet below which I prepared for you to show you how you can customize it a bit:
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.10.1
- Device: Desktop
- Browser: Chrome, Edge
- OS: Windows 11
- Provided sample code: No
- Provided link: No