Question posted in
You can find the official documentation here.

How to change input submit from disabled to enabled when email is validated on the backend with PHP? – Jquery ajax

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 ";
    }
  }
?>
Tags:

2

Answers


  1. 0

    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 />
    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search