-1

Actually I have 2 questions about form submit using jQuery and Ajax.

Currenlty, I am validating a login form using jQuery/Ajax request. I want to disabled the login submit button after logged in successfully completed. So that I am using following .js code but it's not disabled the submit button.

Questions
a) what is the issue in my js code ? why it's not disable the login submit button after logged in successfully ?
b) Using jQuery/Ajax for login is safe for security ? If not what I need to to and Should I add server side validation too ?

Thanks a lot :)

.js code for login : 

// Login form
function login_form (element,event){
    e= $(element);
    event.preventDefault();
    var formData = new FormData(e.parents('form')[0]);  
    $.ajax({
      url: 'login_process',
      type: 'POST',
      xhr: function() {
        var myXhr = $.ajaxSettings.xhr();
        return myXhr;
      },
      beforeSend: function () {
        $('#login_bottom').val('Validating...');
        $("#login_bottom").attr("disabled", true);        
      },
      success: function (data) {                          
        $('.validation_msg').html(data);                      
        $('#login_bottom').val('LOGIN');
        $("#login_bottom").attr("disabled", false);    

        if(data == '<div class="alert alert-success"><strong>Successfully logged!.</strong></div>') {
             $('#login_form')[0].reset(); 
             $("#login_bottom").attr("disabled", true);                      
        }
      },

      data: formData,
      cache: false,
      contentType: false,
      processData: false
  }); 
}

Login Process php page : It's return following message after successfully logged :

if(login($email, $user_pwd) == true) {                    
    echo '<div class="alert alert-success">';        
    echo '<strong>Successfully logged!.</strong>';
    echo '</div>';                                  
}

Html form :

<div class="container bellow-nav">
    <div class="row">
        <div class="col-md-6 content-area">
            <h3>Login</h3>                     
            <hr/>                 
            <form role="form" method="post" id="login_form">                
                <div class="form-group">
                    <label for="email">Email addresse</label>                    
                    <input type="email" name="email" class="form-control" placeholder="Email address">
                </div>               
                <div class="form-group">
                    <label for="pwd">Password</label>                    
                    <input type="password" name="pwd" class="form-control" placeholder="Password">
                </div>                                
                <div class="form-group">
                    <input type="hidden" name="_token" value="<?php echo $form_token; ?>">
                    <input type="submit" name="submit" value="LOGIN" class="btn btn-booking" id="login_bottom" onclick="login_form(this,event);" >
                </div>
                <div class="form-group validation_msg">
                </div>
                <div class="fomr-group">
                    <label for=""><a href="forgot-password"><p>Forgot password?</p></a></label>&nbsp; | 
                    <label for=""><p>Don't have an account? <a href="signup">Join now</p></label>
                </div>                
            </form>
        </div>
    </div><!--main row-->
</div><!--main container end-->
Improve this question
7
  • 1
    if (data.trim() == '<div class="alert alert-success"><strong>Successfully logged!.</strong></div>') Commented Apr 13, 2016 at 4:42
  • An answer to your other question is, yes, you need server-side validation. The user can disable your client-side validation, so you need both. I look at client-side validation as part of the user experience rather than a true security feature because it can be easily circumvented. Commented Apr 13, 2016 at 4:48
  • 1
    There is no difference between a browser manually logging in and ajax logging you in, either way the process has to be secured client-side. Commented Apr 13, 2016 at 4:50
  • @Rasclatt I just disabled the javascript from chrome browser but it's still request to ajax call ! How can it possible ? Commented Apr 13, 2016 at 4:58
  • Did you reload the page with the js off? Commented Apr 13, 2016 at 5:02

3 Answers 3

Reset to default
0

One reason could be that the data may have some leading or trailing spaces.

You can extract only the text message from the data and use that for comparison

  if ($(data).text().trim() == 'Successfully logged!.') {
    $('#login_form')[0].reset();
    $("#login_bottom").prop("disabled", true);
  } else {
    $("#login_bottom").prop("disabled", false);
  }

For the second part, I assume the server side login is using a secured cookie to store the authentication information is so yes it is secured.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Great, it's working and is there is security for login using jQuery/Ajax ?
0

Use json response insted of HTML

Login Process php page : It's return following message after successfully logged :

if(login($email, $user_pwd) == true) {                    
    echo json_encode(['message'=>'Success'])
}


$.ajax({
      url: 'login_process',
      type: 'POST',
      dataType: 'JSON',    
      xhr: function() {
        var myXhr = $.ajaxSettings.xhr();
        return myXhr;
      },
      beforeSend: function () {
        $('#login_bottom').val('Validating...');
        $("#login_bottom").attr("disabled", true);        
      },
      success: function (data) {                          
        $('.validation_msg').html(data);                      
        $('#login_bottom').val('LOGIN');
        $("#login_bottom").attr("disabled", false);    

        if(data.message == 'Success') {
             $('#login_form')[0].reset(); 
             $("#login_bottom").attr("disabled", true);                      
        }
      },

      data: formData,
      cache: false,
      contentType: false,
      processData: false
  });
Improve this answer

Comments

0

First and for most, YOU MUST ADD SERVER SIDE VALIDATIONS. JavaScript can be disabled on the browser and your validations will be disabled when that happens. Javascript can also be edit on the browser and your validations will be useless js validations is only good for user friendly feeling and not for security.

All you have to do is set the disabled attribute to disabled value

$("#login_bottom").attr("disabled","disabled");

However I don't think you are going inside that if. you should console log something and make sure you are passing the if statement.

Improve this answer

1 Comment

How can I validate the form using both server side and client side( Ajax request) ? can you tell me a general idea ?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.