title: How do I stay on the same page if it is an invalid input and proceed if it is a correct input?
body: <p>Basically, I am trying do my login form in a way that it says "Incorrect username or password" on the same page then proceed if it is correct. I have tried looking into other threads relating to this but I have not been able to understand what their code usually means. This is my code.</p>
  
  <pre><code>        &lt;div id="login"&gt;   
        &lt;h1&gt;Welcome Back!&lt;/h1&gt;
  
        &lt;form method="POST" action="http://localhost:3000/api/login" id="loginform"&gt;
  
          &lt;div class="field-wrap"&gt;
          &lt;label&gt;
            Username&lt;span class="req"&gt;*&lt;/span&gt;
          &lt;/label&gt;
          &lt;input type="userID" id="userID" name= "userID" required autocomplete="off"/&gt;
        &lt;/div&gt;
  
        &lt;div class="field-wrap"&gt;
          &lt;label&gt;
            Password&lt;span class="req"&gt;*&lt;/span&gt;
          &lt;/label&gt;
          &lt;input type="Password" id="Password" name="Password" required autocomplete="off"/&gt;
        &lt;/div&gt;
  
        &lt;button class="button button-block"&gt;&lt;input type="submit" id="submit" value="Log In"&lt;/button&gt;
  
        &lt;/form&gt;
  </code></pre>
  
  <p>As for my jquery code,</p>
  
  <pre><code>$(document).ready(function(){
      // Set form variable
      var form = $('#loginform');           
  
      form.submit(function(event){              
        var userid = $('#userID').val(); 
        var password = $('#Password').val(); 
  
        if ( $.trim(userid) != '' &amp;&amp; $.trim(password) != '') {
          // Process AJAX request
          $.post('http://localhost:3000/api/login',
                 {username: userid, Password: password }, function(data){
                  console.log(data);
  
          });
        }              
        // Prevent default form action
        event.preventDefault();
      });
  });
  </code></pre>
  
  <p>I want to be able to output "Incorrect username or password" if the data entered is wrong and remain on the same page and proceed if correct but due to <code>action="http://localhost:3000/api/login"</code> which will redirect to another page even if it is wrong however I also need this <code>action="..."</code> to call my api to execute the checking of id and password. Any help is appreciated and do link the thread if you think it might help in terms of my problem. Thanks!</p>
  
  <p>Some links I have looked over but don't understand: </p>
  
  <p><a href="https://stackoverflow.com/questions/5733808/submit-form-and-stay-on-same-page">Submit form and stay on same page?</a></p>
  
  <p><a href="https://stackoverflow.com/questions/15681084/jquery-submit-and-remain-in-same-page">jQuery : submit and remain in same page</a>
  <a href="https://stackoverflow.com/questions/42542300/how-to-stay-on-the-same-page-after-clicking-submit-button">how to stay on the same page after clicking submit button</a></p>