0

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.

        <div id="login">   
      <h1>Welcome Back!</h1>

      <form method="POST" action="http://localhost:3000/api/login" id="loginform">

        <div class="field-wrap">
        <label>
          Username<span class="req">*</span>
        </label>
        <input type="userID" id="userID" name= "userID" required autocomplete="off"/>
      </div>

      <div class="field-wrap">
        <label>
          Password<span class="req">*</span>
        </label>
        <input type="Password" id="Password" name="Password" required autocomplete="off"/>
      </div>

      <button class="button button-block"><input type="submit" id="submit" value="Log In"</button>

      </form>

As for my jquery 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) != '' && $.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();
    });
});

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 action="http://localhost:3000/api/login" which will redirect to another page even if it is wrong however I also need this action="..." 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!

Some links I have looked over but don't understand:

Submit form and stay on same page?

jQuery : submit and remain in same page how to stay on the same page after clicking submit button

Ong Kong Tat
  • 1,172
  • 2
  • 9
  • 22

2 Answers2

0

You can simply return false from the submit function if validation fails. Please check the fiddle here.Click here for fiddle. Please have a look at the HTML that I have written to invoke submit click action.

function submitMe() {
  console.log("Called submit");
  return false;
}
satyendra kumar
  • 719
  • 2
  • 10
  • 19
  • Hi, I have tried using the function `submitMe()` according to the way you told me but it does not seem to work. I used an if else for deciding whether to return true or false. Is that what you mean or is there no need for if else? – Ong Kong Tat Jun 11 '17 at 05:45
  • did you check my fiddle ? If your condition is failing return false to remain on the same page or return true to invoke the action attribute URL. – satyendra kumar Jun 11 '17 at 07:47
  • Post a fiddle of your code so that I can make changes and send you back with exactly what you want – satyendra kumar Jun 11 '17 at 07:51
  • I made another one with some changes to my javascript to give a clearer picture of what I am facing. https://jsfiddle.net/9g1qzzyu/3/. Basically, it is meant to validate as well as redirect to another page and if validation is successful, then it will return true but if not it will return false. At this moment, whatever I type in allows me to log in which should not be happening so please advise me as to what should I do. – Ong Kong Tat Jun 12 '17 at 02:42
  • I have updated your fiddle please check - https://jsfiddle.net/9g1qzzyu/7/ – satyendra kumar Jun 12 '17 at 09:12
  • all servers calls (http) are Async hence you need to do validation check within the callback function. – satyendra kumar Jun 12 '17 at 09:13
  • So does that mean that I cannot use my api to validate instead but I must do the logic in the callback function itself because I wanted to call the api and then output accordingly from the api to the html – Ong Kong Tat Jun 12 '17 at 09:20
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/146397/discussion-between-satyendra-kumar-and-ong-kong-tat). – satyendra kumar Jun 12 '17 at 09:21
0

Just add an onclick to the submit input that calls a JS function which validates the values. And if one of the values is invalid, the function just has to return false and the process is canceled.

Also, you have a typo there:

<button class="button button-block"><input type="submit" id="submit" value="Log In"</button>

should be

<button class="button button-block"><input type="submit" id="submit" value="Log In" /></button>
StuntHacks
  • 457
  • 3
  • 15