Email formatting on a Bootstrap 5 form

Question

This is my 1st Bootstrap effort, so please bear with me. If this has already been addressed somewhere else, I haven't found it, and a polite pointer would be appreciated.

I am trying to create a Bootstrap 5 form that will run on a Raspberry Pi with no connection to the Internet. I have downloaded the Bootstrap-5.2.0-dist kit to my system and the CSS controls appear to be generally working as described.

I need to do some client side validation to ensure the form is filled out correctly when the Submit button is pressed, or preferably when another input control on the form is selected. As a starting point, I trying to figure out how to make the email address checking work and I seem to be missing something basic.

What do I have to add so that the email field will be evaluated as a properly formatted email address?

Here is my code...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Create</title>
    <link 
      href="/home/ko2f/eHaW/bootstrap-5.2.0-dist/css/bootstrap.min.css" 
      rel="stylesheet" 
    />
    <script src="/home/ko2f/eHaW/bootstrap-5.2.0-dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>

    <div class="container-fluid p-3 bg-primary text-white text-center">
      <h4>Emergency Message Service</h4>
      <h1>Create Message</h1>
    </div>

    <form>
      <div class="form-group mb-3 mt-3">
        <label for="text" class="control-label">From:</label>
        <input type="text" class="form-control" id="from" 
               placeholder="Enter your name" name="from" required />
      </div>
      <div class="form-group mb-3 mt-3">
        <label for="email" class="control-label">To:</label>
        <input type="email" class="form-control" id="email" 
               placeholder="Enter email address" name="email" required />
      </div>
      <div class="form-group mb-3 mt-3">
        <label for="msg" class="control-label">Message:</label>
        <input type="msg" class="form-control" rows="10" id="msg" 
               placeholder="Enter the message you want to send here..." name="msg" required />
      </div>
    </form>

    <div class="mx-auto" style="width:350px">
      <button type="button" class="btn btn-outline-success">Submit</button>
      <button type="button" class="btn btn-outline-danger">Cancel</button>
    </div>

  </body>
</html>

Thank you for considering my question... Bob Segrest

Does this answer your question? [Validate email address textbox using JavaScript](https://stackoverflow.com/questions/7635533/validate-email-address-textbox-using-javascript) You're ultimately going to need either Javascript on the front end (i.e. in the web page) or something on the back end (where your `
` sends to) to do the validation. Bootstrap and HTML alone won't be sufficient. — stdunbar, Jul 29 '22 at 01:12
I am/was under the impression that in Bootstrap 5, using type="email" in the Input line would force the validation. I have seen a couple of functional demos where this seemed to be the case... Is this wrong? — user3763748, Jul 29 '22 at 01:23
Take a look at the [Mozilla docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#validation). The `email` type (which is now standard HTML, not Bootstrap) can help significantly with validation. It ultimately has a regular expression under the covers and it may not handle all possible situations. If you're expecting ASCII characters and domains then it will likely be sufficient. — stdunbar, Jul 29 '22 at 01:27

score 0 · Answer 1 · answered Jul 29 '22 at 11:58

0

Thank you stdunbar!

The 2nd pointer you provided to the Mozilla docs and pointing out that I needed to look at HTML rather than Bootstrap itself, was very helpful.

Bob

answered Jul 29 '22 at 11:58

user3763748

31
5

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 01 '22 at 15:10

Email formatting on a Bootstrap 5 form

1 Answers1