<pre style="word-wrap: break-word;white-space: pre-wrap;">I am making a basic login webpage for class project. I want to check the password and confirm password should match. If they are not same then it should give an alert message. But here I don&#039;t get that error message. 


&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Login Here!!&lt;/title&gt;
        &lt;link rel=&quot;icon&quot; type=&quot;image/ico&quot; href=&quot;pics/down.jpg&quot; /&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot; integrity=&quot;sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u&quot; crossorigin=&quot;anonymous&quot;&gt;
        &lt;link href=&quot;https://fonts.googleapis.com/css?family=Roboto+Slab&quot; rel=&quot;stylesheet&quot;&gt;
      &lt;/head&gt;
    &lt;style&gt;
     form{
        border: 2px solid grey;
        border-radius: 5%;
        padding: 20px 50px;
        margin-top: 5%;
        background-color:#f9f6fa;
    }   
    #img{
        text-align: center;
    }
     input[type=&quot;submit&quot;]{
        margin-left: 35%;
        border-radius: 75%;
        padding: 2% 10% ;
     }
    &lt;/style&gt;
    &lt;body class=&quot;jumbotron container-fluid&quot;&gt;
         &lt;header style=&quot;text-align: center;&quot;&gt;&lt;h1 style=&quot;font-family:&#039;Roboto Slab&#039;, serif;&quot;&gt;Login Here!! &lt;/h1&gt;&lt;/header&gt;
         &lt;main class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-xs-4&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;col-xs-4&quot;&gt;
                &lt;form id=&quot;login&quot; action = &#039;&#039; target=&quot;_blank&quot;&gt;
                    &lt;div id=&quot;img&quot;&gt;
                        &lt;img src=&quot;pics/image.png&quot; width=&quot;100px&quot; height=&quot;100px&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;form-group&quot;&gt;
                        &lt;label for=&quot;name&quot;&gt;Username: &lt;/label&gt;
                        &lt;input type=&quot;text&quot; id=&quot;name&quot;  class=&quot;form-control&quot; name=&quot;name&quot; placeholder=&quot;Enter username here...&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;form-group&quot;&gt;
                        &lt;label for=&quot;paswd&quot;&gt;Password :&lt;/label&gt;
                        &lt;input type=&quot;password&quot; id=&quot;paswd&quot; name=&quot;paswd&quot; class= &quot;form-control&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;form-group&quot;&gt;
                        &lt;label for=&quot;repeat-paswd&quot;&gt;Confirm Password :&lt;/label&gt;
                        &lt;input type=&quot;password&quot; id=&quot;confrm_paswd&quot; name=&quot;confrm_paswd&quot; class= &quot;form-control&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;form-group&quot;&gt;
                        &lt;input type=&quot;checkbox&quot; name=&quot;rembr_me&quot; checked&gt;&amp;nbspRemember Me
                    &lt;/div&gt;
                    &lt;input type=&quot;submit&quot; value=&quot;Submit&quot; class=&quot;btn btn-primary&quot;&gt; 
                &lt;/form&gt;
            &lt;/div&gt;
            &lt;p id=&quot;thank_you&quot; hidden&gt;You are now signing in&lt;/p&gt;
         &lt;/main&gt;
         &lt;script&gt;
         let form = document.querySelector(&#039;#login&#039;);
         let uname = document.getElementById(&#039;name&#039;).value;
         let passwd = document.getElementById(&#039;paswd&#039;).value;
         let conf_passwd = document.getElementById(&#039;confrm_paswd&#039;).value;
         if(passwd != conf_passwd)
                 alert(&#039;Password does not match&#039;);
         form.onsubmit = function(){
            if(uname == &#039;&#039; &amp;&amp; (passwd == &#039;&#039; &amp;&amp; conf_passwd == &#039;&#039; )) 
                 alert(&#039;One or more fields are empty&#039;);
         }
         &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre>