使用jQuery和Ajax的表单提交问题

Question

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-->

Answer 1

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.

Answer 2

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
  });

Answer 3

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.