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

@Mike C, I searched for it but my case is different, I only want it when a user types something, not on page load, or on submit. I want the html5 required tags. — Mohamed Ebrahim
– Mohamed Ebrahim, Commented Mar 31, 2016 at 19:18
Then search for "oninput" or "onkeypress" in addition to form validation. — Mike Cluck
– Mike Cluck, Commented Mar 31, 2016 at 19:19
By required, I mean this <input type="password" name="old-password" id="old-password"> becomes <input type="password" name="old-password" id="old-password" required="yes">. — Mohamed Ebrahim
– Mohamed Ebrahim, Commented Mar 31, 2016 at 19:19
@DavidThomas: Because (as I understand it) they are not required, if the user leaves them all blank. Only if they want to change their password, they have to fill out all three fields. If they want to keep their existing password, they don't need to fill them out at all. — C3roe
– C3roe, Commented Mar 31, 2016 at 19:22

Luka Jacobowitz · Accepted Answer · 2016-03-31 19:37:57Z

1

Use .attr() on the oninput event.

i.e. 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.

edited Mar 31, 2016 at 19:37

answered Mar 31, 2016 at 19:22

Luka Jacobowitz

23.7k5 gold badges41 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mohamed Ebrahim Over a year ago

For some reason, this is not working. Let me know if I'm doing this correctly. I have linked to jquery, and to my .js file which only has the code above in the head of the html. Then, I add oninput="makeRequired()" on the fields. However, it's not working.

Luka Jacobowitz Over a year ago

It seems, jQuery needs a second arguement, even though the required-attribute doesn't actually need one. Check my edit!

Luka Jacobowitz Over a year ago

You used oninsert instead of oninput. Here I updated your fiddle: jsfiddle.net/aw1qszx3/1

Mohamed Ebrahim Over a year ago

Haven't had enough sleep! Thanks, your code works perfectly!!

Luis Deras · Accepted Answer · 2016-03-31 19:25:02Z

0

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

answered Mar 31, 2016 at 19:25

Luis Deras

1,2782 gold badges21 silver badges50 bronze badges

Comments

Daniel Artola · Accepted Answer · 2016-03-31 19:43:10Z

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

rphv · Accepted Answer · 2016-03-31 22:04:04Z

0

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

edited Mar 31, 2016 at 22:04

rphv

5,5373 gold badges32 silver badges48 bronze badges

answered Mar 31, 2016 at 19:31

Kyle

537 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related