javascript to retain form on login failure

Question

Below is my javascript function to authenticate a user... I wanna retain the form on login failure with the username/password textbox being blank.

           function authenticate(form)
      {
          if (form.username.value == "Administrator" && form.password.value == "password")
          {
             window.open('OrderList.aspx')/*opens the target page while Id & password matches*/
         }
         else 
         {
             alert("Error Password or Username")
             $("#username").val("")
             $("#password").val("")
             form.????????????('Login.aspx')//so that it stays on the same page wihout reloading the page. 
I tried window.open, but it opens another instance of the form.
             /*displays error message*/
         }
     }

As an aside, it's considered a best practice to end your javascript lines with a `;` even though it isn't technically required. Doing so can avoid confusion in situations where code gets complicated, and helps a lot if you ever get into minification. — Jeffrey Blake, Apr 25 '13 at 13:30

score 3 · Accepted Answer · edited May 23 '17 at 12:22

I assume that you are firing this either onclick or onSubmit. To help with preventing the form submission, you will want to use onSubmit and have it return the results of this function. In the case of a validation failure, your javascript function needs to return false; to prevent the form from being submitted.

When validation passes, you can either return true; or do nothing (assuming that you want the form to continue being submitted...if you only want to issue the call to window.open(), then you should return false; in both cases.

For a more detailed explanation, see this answer to a similar question.

As to removing the values from the text fields, what you have currently (e.g. the below code) will work for that - the only reason you aren't seeing the impact from it currently is that the page is reloading due to the form being submitted.

$("#username").val("");
$("#password").val("");

should i keep the onclick on the button or not? and what about emptying the textboxes? — who-aditya-nawandar, Apr 25 '13 at 13:20
See my edit. It's probably best to move this to `onSubmit` (which can be done in the html the same way `onClick` is assigned, but best practices generally dictate that you assign it to handle the `submit` event for this form instead. The code you already have empties the textboxes. — Jeffrey Blake, Apr 25 '13 at 13:28

score 2 · Answer 2 · answered Apr 25 '13 at 13:11

Handle onSubmit with your function and just return false - nothing will happen.

  function authenticate(form)
      {
          if (form.username.value == "Administrator" && form.password.value == "password")
          {
             window.open('OrderList.aspx')/*opens the target page while Id & password matches*/
         }
         else 
         {
             alert("Error Password or Username")
             $("#username").val("")
             $("#password").val("")
            return false;
         }
     }

Jon Carter · Answer 3 · 2013-04-25T13:38:53.573

As Dmitry said, you can do something like this:

$(form).on(
    'submit',
    function(){
        if (passwordsMatchOrWhatever){
            //do whatever a successful submission should
        } else {
            //reset field values if you want to
            return false;
        }
    }
);

When the form is submitted, the 'submit' event is fired. The code above uses jQuery to attach a function to run when that happens. Returning false from that function cancels the whole submission.

javascript to retain form on login failure

3 Answers3