I am looking to implement user authentication using firebase, however, the sign-in page is currently allowing invalid inputs

<script>
      function save_user()
      {
     const uid = document.getElementById('user_id');
            const userpwd = document.getElementById('user_pwd');
            const btnregister=document.getElementById('btn-action');
            //btnregister.addEventListener('click', e=>
            //{
            const email=uid.value;
            const pass=userpwd.value;
            firebase.auth().signInWithEmailAndPassword(email, pass).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    console.log(error.Message);

});
firebase.auth().onAuthStateChanged(function(user) {
  if(user) {
    window.location='userpage.html'; 
  }
});
            }
    </script>
<link href="page2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="bg">
  <img src="images/5.jpg" alt="">
</div>
<div class="loginbox">
<img src="images/logo.jpg" class="user"/>
<form action="" method="post">
<p>Email</p>
<input type="text" name="" placeholder="Enter Email" id="user_id"/>
<p>Password</p>
<input type="password" name="" placeholder="......" id="user_pwd"/>
</br>
</br>
</br>
<input type="button" name="" value="Sign In" id="btn-action" onclick="save_user();">
<a href="#">Forgot Password</a>
<a href="Register.html">Register</a>
</form>
</div>
</body>
</html>

Need help with Firebase authentication on the sign-in page? Want to display an error message when a user is not found in Firebase authentication.

Answer №1

To ensure that email addresses are entered in the correct format, you can make use of HTML5 input regex like so:

<form action="" method="post>
<input id="emailInput" type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/">
<input type="submit">
</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a bokeh plot and save it as an HTML file without displaying it

Currently, I am utilizing Bokeh to generate HTML code that contains figures by employing the show method. However, this method automatically opens the default browser with the HTML displayed in it. My goal now is to save the HTML code without displaying i ...

Sortable lists that are linked together, containing items that cannot be moved

I have been trying to implement two connected sortable lists with disabled items using this sortable list plugin, but for some reason, I am unable to get it to work. Is there anyone who can provide assistance with this issue? <section> <h1&g ...

Elevate your website with Bootstrap 4's compact floating icon menu

I've been searching online, but I can't seem to find exactly what I need. My goal is to create a compact Sidebar menu that stays on the left side and is centered. The only solution I came across was this: `https://codepen.io/kemsly/pen/mJxwJg` ...

Struggling to link variables and functions to an angularJS controller

When using the $scope object to bind functions and variables, and making changes accordingly in HTML, the code works fine. But when using a different object, it doesn't work as expected. Here is an example of a working code snippet: ...

Utilizing form selectors in non-traditional elements

Trying to optimize my website by avoiding nested forms, I have multiple forms loaded via AJAX. Instead of nesting them, I plan to use select and checkbox selectors along with jQuery actions outside the form element. Here's what I have in mind: <di ...

What is the process for creating a sub-menu for a dropdown menu item in Bootstrap 5?

https://i.sstatic.net/o4FLn.pngthis is my code which i have created this navigation bar with bootstrap and all of its drop downs but i want to add another drop down to the services drop down section inside of webdevelopment but it can't any easy solut ...

Is there a method to make changes to files on a deployed Angular application without the need to rebuild?

After deploying my Angular application on a production environment using the command npm run build --prod --base -href, I now need to make changes to some static HTML and TypeScript files. However, since the app is already bundled and deployed, I'm un ...

Create a single CSS style rather than using multiple CSS styles

I currently have multiple CSS styles applied: form#reply_form-c1r1.odgovor div#cmtforms-c1r1 input{color:red} form#reply_form-c2r1.odgovor div#cmtforms-c2r1 input{color:red} form#reply_form-c3r1.odgovor div#cmtforms-c3r1 input{color:red} form#reply_form-c4 ...

Can one determine whether an SCSS element is devoid of content?

Can SCSS be used to determine if an element is empty? For instance, I'm interested in assigning a variable based on whether the class has content or not. <div class="defaultClass"> <!-- This div is empty --> </div> Is there a w ...

How to Manage Empty Lines in HTML Documents within WordPress

Just recently, I launched my brand new website. Everything seems to be functioning properly except for one issue that I discovered in the HTML source code. There are 15 blank lines before "<!doctype html>", which is causing some problems with SEO and ...

JavaScript Scrolling Functionality Not Functioning as Expected

I have implemented a scroll function on my website $('#lisr').scroll( function() { if($(this).scrollTop() + $(this).innerHeight()>= $(this)[0].scrollHeight) { //Perform some action here } } However, I am encountering an ...

How can I modify the border color of a Material Ui TextField component?

I've been struggling to figure out how to customize the color of the TextField border. I want to change it from the default grey to black. Below is a simplified version of my UpdatePage.js file: const useStyles = makeStyles(() => ({ updatePage ...

How can I create a custom AppBar transition using Material-UI?

Is there a way to incorporate transitions into the AppBar element within Material-UI? I have tried adjusting the class properties, but unfortunately, I'm not seeing any animation. Can anyone pinpoint what the issue might be? To see the code in action ...

Tips for waiting on image loading in canvas

My challenge involves interacting with the image loaded on a canvas. However, I am uncertain about how to handle waiting for the image to load before starting interactions with it in canvas tests. Using driver.sleep() is not a reliable solution. Here is ...

The mysterious case of the missing CSS file in Node.js

I recently set up a new Node.js Express Project. However, I am facing an issue with the index.ejs file showing the error: Undefined CSS file ('/stylesheets/style.css'). Here is the content of the index.ejs file: <!DOCTYPE html> <html& ...

Adjust the position of an element based on changes in window size using jQuery

Wondering if this question is unique, as I've spent quite some time searching for a solution to this issue without any luck. Perhaps my search criteria aren't correct. I have a navigation bar that becomes fixed when it reaches the top of the vie ...

Create a dynamic layout with two navigational sub-menu blocks positioned side by side

When I hover over a navigation menu item, it brings up 6 sub menu items. I want these sub-items to appear in two blocks of 3 that are adjacent to each other. I tried using display: flex on the parent element .menu-item-1, but it doesn't seem to be wo ...

"Firebase function fails to return Typescript class variable, resulting in 'undefined'

Being someone with a background in python/golang, I am now delving into ionic2. There seems to be an issue that I can't quite figure out due to my current level of knowledge in this stack. Perhaps I just need a way to reference the outer scope of this ...

Is there a way to specifically target the parent input div using event delegation with jQuery?

I'm having trouble inserting values into the input fields for Item Name and Description. See the HTML code below. <div class="input_fields_wrap"> <div class="input_fields_subwrap"><!-- this div is repeatable(dynamic form)--> ...

Is there a way to embed HTML code within a JavaScript variable?

Embedding HTML code within Java Flow can be quite interesting For instance: Check out this JSFiddle link And here's how you can incorporate it into your script: widget.value += ""; Generating a Pro Roseic Facebook POP-UP Box through Widg ...