jQuery - Code to check if any of the fields are not empty, and then make all of them required

Question

I am a PHP developer and new to jQuery, I just wrote a few lines of code before and it was all from online sources. Anyways, I have these three inputs in html:

<input type="password" name="old-password" id="old-password">
<input type="password" name="new-password" id="new-password">
<input type="password" name="confirm-new-password" id="confirm-new-password">
<button type="submit" id="save" class="button button-primary">Save Changes</button>

I have a full page of settings and these three fields are for passwords, but I want to make them required only if the user enters any data into any of the inputs.

Example: A user types in old password input, all 3 inputs gets required real-time. Or a user types in confirm new password input, all 3 inputs gets required as well.

Thank you for the help.

Solution: The answers were all great and thank you everyone for the help. Another problem came up, is that if someone tries to backspace and remove the text on the form, it still stays required. I came up with a solution with the help of all the answers.

You have to add a .password class to all the wanted inputs, and then put this in script tags:

    $('.password').on('keyup keydown keypress change paste', function() {
        if ($(this).val() == '') {
            $('#old-password').removeAttr('required', '');
            $('#new-password').removeAttr('required', '');
            $('#confirm-new-password').removeAttr('required', '');
        } else {
            $('#old-password').attr('required', '');
            $('#new-password').attr('required', '');
            $('#confirm-new-password').attr('required', '');
        }
    });

Answer 1

Use .attr() on the oninput event.

ie something like this:

function makeRequired(){
    $("#old-password").attr("required","");
    $("#new-password").attr("required","");
    $("#confirm-new-password").attr("required",""); 
}

And then bind it to oninput either in your HTML or in JS.

Answer 2

Using your condition

if the user enters any data into any of the inputs.

You could write this event

$("body").on("input", "#confirm-new-password,#new-password,#old-password", function()
{
    $("#confirm-new-password").attr('required', 'required');
    $("#new-password").attr('required', 'required');
    $("#old-password").attr('required', 'required');
});

Answer 3

if ($("#old-password").val() != "" ||
    $("#new-password").val() != "" ||       
    $("#confirm-new-password").val() != "") {   
  $("#old-password").attr("required");
  $("#new-password").attr("required");
  $("#confirm-new-password").attr("required");
}

Answer 4

well, I extremly recommend to use a library like Jquery validate jqueryValidate

But, if you don't want to use, you can try this:

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <input type="password" name="old-password" id="old-password" class="passwordToCheck">
    <input type="password" name="new-password" id="new-password" class="passwordToCheck">
    <input type="password" name="confirm-new-password" id="confirm-new-password" class="passwordToCheck">
    <button type="submit" id="save" class="button button-primary">Save Changes</button>
    <script>
      $(".passwordToCheck").change(function(){
        passInput = $(this);
      if(passInput.val().trim() != ""){
        passInput.addClass("required");
      } else {
        passInput.removeClass("required");
      }
    });

    $("#save").click(function(e){
        e.preventDefault();
      if($(".required").length >0){
        alert("fill the fields!");
      } else {
        alert("OK");
        $(this).submit();
      }
    });
   </script>

adding a class to your password-type inputs, and working with required class ( you can change this easily by the required attr if you don't want to work with class required.

here is the fiddle:

jsfiddle