First of all use HTML5 forms like in the following example
<form id="my-form" method="post" action=""> <label for="username">username</label> <input type="text" name="username" id="username" value="" placeholder="username" required> <label for"password">password</label> <input type="password" name="password" id="password" value="" placeholder="password" required> <button type="submit">send me</button> </form>
As you can see the input elements have now a required attribute. No user can submit the form now with empty input elements. So you don 't have to deal with javascript to validate the form. The label elements do have a for attribute, that fits to an id attribute to the belonging input elements.
Next you can set the javascript event listener on the form element.
<script> var form = document.getElementById('my-form'), password = document.getElementById('password'); form.addEventListener('submit', function(event) { event.preventDefault(); var data = new FormData(form); var xhr = new XMLHttpRequest(); xhr.open('POST', 'https://your.domain.tld/check-password.php'); xhr.onload = function() { if (xhr.status === 200) { // if the response is json encoded var response = JSON.parse(xhr.responseText); if (response.message == 'valid') { // redirect here } if (response.message == 'invalid') { password.setCustomValidity('your password is not correct'); } } } xhr.send(data); }); </script>
This small piece of javascript code sets an submit event listener on the form element. As soon as the form is submitted successfully an ajax request is fired, which is sending the form data 'username' and 'password' to the 'check-password.php' file.
In your php file you could access the data as shown below:
<?php $username = $_POST['username']; $password = $_POST['password']; ?>
As you can see you don 't need jQuery or any other javascript framework for doing it. Keep in mind, that the code examples are examples and untested.
