Forms

Topic: Forms

Copeland free asked 2 years ago

I have just started learning web programming. I subscribed to MDB so that I could get some experience with Bootstrap. I have a basic knowledge of JavaScript, JQuery and PHP. I am creating a website that involves a lot of forms and data validation. I have just completed the "your I know HTML, CSS and basic Javascript" tutorial on Bootstrap 5.

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 leawood4@outlook.com

Chris Copeland

Add comment

Michał Duszak staff answered 2 years ago

0 0 Best answer

<p>1) If your code is exactly the same as in documentation, for example:</p>

<pre class="prettyprint"><code><div class="form-outline">
  <input type="text" id="form12" class="form-control" />
  <label class="form-label" for="form12">Example label</label>
</div>
</code></pre>

<p>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:</p>

<p>In your <code><head></code> section. Make sure your path is correct in the <code>href</code> attribute!</p>

<p>If in doubt, here is a step by step guide covering installation <a href="https://mdbootstrap.com/docs/standard/pro/installation/" target="_blank">https://mdbootstrap.com/docs/standard/pro/installation/</a></p>

<p>2) If you say there is a starter script provided, I guess it's this one:</p>

<pre class="prettyprint"><code>// Example starter JavaScript for disabling form submissions if there are invalid fields
(() => {
  'use strict';

// Fetch all the forms we want to apply custom Bootstrap validation styles to
  const forms = document.querySelectorAll('.needs-validation');

// Loop over them and prevent submission
  Array.prototype.slice.call(forms).forEach((form) => {
    form.addEventListener('submit', (event) => {
      if (!form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add('was-validated');
    }, false);
  });
})();
</code></pre>

<p>In here the main validation script is in the <code>checkValidity();</code> method of Forms (you can read more on this method in the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement#methods" target="_blank" rel="nofollow">MDN Docs</a>).</p>

<p>If you wish to customize it a bit, you can get the value of your input upon submitting and put some <code>if</code> 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:
<a href="https://mdbootstrap.com/snippets/standard/m-duszak/3528264#js-tab-view" target="_blank">https://mdbootstrap.com/snippets/standard/m-duszak/3528264#js-tab-view</a></p>

Please insert min. 20 characters.

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" />

In your <head> section. Make sure your path is correct in the href attribute!

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:

// Example starter JavaScript for disabling form submissions if there are invalid fields
(() => {
  'use strict';

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  const forms = document.querySelectorAll('.needs-validation');

  // Loop over them and prevent submission
  Array.prototype.slice.call(forms).forEach((form) => {
    form.addEventListener('submit', (event) => {
      if (!form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add('was-validated');
    }, false);
  });
})();

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: https://mdbootstrap.com/snippets/standard/m-duszak/3528264#js-tab-view

Copeland free commented 2 years ago

Phillip,

Thank you for that. I redid the MDB starter as per the installation and it now works along with the validation script. I have also looked at the snippet and that should help me customise the validation script for my purpose. I have worked through your tutorial on form validation using validator.js and bootstrap-4 and that was very helpful. I assume validator.js is not available for bootstrap-5 as bootstrap-5 no longer uses JQuery.

I appreciate your prompt reply. One further question is how do I start a new project more easily than downloading MD5 to a directory of my choice. Sorry for the trivial questions.

Chris Copeland

Please insert min. 15 characters.

Michał Duszak staff commented 2 years ago

One of the easiest way to start a new MDB project is to use npm:

https://mdbootstrap.com/docs/standard/pro/installation/#section-npm

npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential

Remember to replace ACCESS_TOKEN with your access token. Here you can find information on how to get it: https://docs.gitlab.com/ee/user/profile/personal_access_tokens.html#create-a-personal-access-token

Please insert min. 15 characters.

Add comment