0

The Login button should only be enabled when the user enters a valid e-mail address into the Username field. Currently e-mail validation is handled through a PHP script. Any suggestions, alternatives or documentation to look into would be great.

index.html

<!DOCTYPE html>
<html>
<head>    
</head>

<body>
  <div id="login-input">
    <form action="login.php" method="post" class="ajax">
      <p>
        <input id="login-username" type="text" name="username" placeholder="Username">
      </p>
      <p>
        <input id ="login-password" type="password" name="password" placeholder="Password">
      </p>
      <p>
        <input id="login-submit-btn" type="submit" value="LOGIN" disabled>
      </p>
    </form>
  </div>
</body>
</html>

main.js

  $(document).ready(function() {    

  $('form.ajax').submit(function(event) {

    var data = {
      username: $('#login-username').val(),
      password: $('#login-password').val()
    };

    $.ajax({
      url: "login.php",
      type: "POST",
      data: data,
      success: function(data) {
        event.preventDefault();
        console.log(data);
      }
    });

    return false;
  });
});

login.php

  <?php

  $input_username = $_POST['username'];
  $input_password = $_POST['password'];

  if(isset($input_username, $input_password)) {
    if(filter_var($input_username, FILTER_VALIDATE_EMAIL)) {
      echo " email format is valid ";
    }
    else {
      echo " email format is invalid ";
    }
  }
?>
andres
  • 259
  • 2
  • 16
  • use js to [validate the emailaddress](https://www.w3resource.com/javascript/form/email-validation.php), then [change the disabled state of the button](https://stackoverflow.com/questions/4702000/toggle-input-disabled-attribute-using-jquery). – rx2347 Mar 06 '20 at 17:20
  • 1
    If you really need to validate in your backend, use ajax to send the email to the backend and then validate. If successfull, you can enable the field. – Felippe Duarte Mar 06 '20 at 17:32
  • 1
    Is your AJAX call already successful and you're receiving the "email format is valid" response? You'll be enabling the button from within the AJAX "success" callback, not directly from PHP. Enable it conditionally, based on the response from the PHP script, with something like `$('#login-submit-btn).prop('disabled',false);`. – showdev Mar 06 '20 at 17:32
  • If username is an email, why not change input type from text to email and set as required? Browser will handle it and you won't need anything else. Set the password required, minlenght and maxlenght attributes also. – Triby Mar 06 '20 at 18:10

2 Answers2

1

you could check the response in AJAX success handler and enable and disable the LOGIN button based on the response

Login.php 

      $input_username = $_POST['username'];
      $input_password = $_POST['password'];

      if(isset($input_username, $input_password)) {
        if(filter_var($input_username, FILTER_VALIDATE_EMAIL)) {
          echo "valid";
        }
        else {
          echo "invalid";
        }
      }
    ?>

main.js

$(document).ready(function() {
  // select form and handle event with ON method
  $('form.ajax').on('submit', function() {

    var obj = $(this),
    url = obj.attr('action'),
    type = obj.attr('method'),
    data = {};

    // find anything with the attribute of name
    obj.find('[name]').each(function(index, value) {
      var credential = $(this),
      name = credential.attr('name'),
      value = credential.val();

      data[name] = value;
    });

    $.ajax({
      url: url,
      type: type,
      data: data,
      success: function(response) {
        event.preventDefault();
        if(response==="valid"){
          document.getElementById("login-submit-btn").disabled =false; 
        }else{
         document.getElementById("login-submit-btn").disabled = true; 
        }
       },
       error: function (error) {
         console.log(error);
        }

    });

    return false;
  });
});

and one more thing , this is probably not necessary but there is no point in writing disabled="disabled" on the LOGIN button just disabled would do

<input id="login-submit-btn" type="submit" value="LOGIN" disabled />
Abdullah Abid
  • 1,661
  • 2
  • 5
  • 19
0

Means while you can use the type="email" it will then won't allow the user to click the button.

You should not go that far. hTml has a in-build function Only change type to Email

Eg

Dhruvadeep
  • 38
  • 7