Jquery validate required based on another field's input and target field's input

Question

How can I make an input field required IF another field is not filled out OR if the target field IS filled out?

I have two fields for height...inches and feet. I would like to make the fields required based on each other. I was able to get the Require to work with a function

"user[height][inches]":{
    required: function(element) {
       return (!$("input[name='user[height][feet]']").hasClass('valid'));
    },

I did the same for feet and that worked well. The next step I needed was a range validation but only if the field is required or if it is not required but is filled in anyway. I was able to get that to work with the Depends

range: {
   param: [1, 120],
   depends: function(element) {
   // if feet is not filled out then require inches range
   if (!$("input[name='user[height][feet]']").hasClass('valid')){
      return true;
   // else if feet is filled out and inches is not blank or 0 then require range
   } else if ( $("input[name='user[height][inches]']").val() != "" && $("input[name='user[height][inches]']").val() != "0" ) {
      return true;
   // else feet is filled out and inches is blank or 0 so do not require range
   }  else {
      return false;
   }

I can't seem to get the Number requirement to work with this though. It only works one the FIRST validation but when the user tries again with a non-number it accepts it.

        number: function(element){
            // if feet is not filled out then require number input
            if (!$("input[name='user[height][feet]']").hasClass('valid')){
              return true;
              // else if feet is filled out and inches is not blank
            } else if ( $("input[name='user[height][inches]']").val() != "" ) {
              return true;
              // else feet is filled out and inches is blank so do not require
            }  else {
              return false;
            }
        }

I also tried...

        number: {
            depends: function(event){
               // if feet is not filled out then require number input
               if (!$("input[name='user[height][feet]']").hasClass('valid')){
                 return true;
              // else if feet is filled out and inches is not blank
               } else if ( $("input[name='user[height][inches]']").val() != "" ) {
                 return true;
              // else feet is filled out and inches is blank so do not require
               }  else {
                 return false;
               }
             }
           }

My field forms are

<input type="number" name="user[height][inches]" placeholder="11"/> 
<input type="number" name="user[height][feet]" placeholder="4"/>

I noticed that if I debug during the validation that when I am calling $("input[name='user[height][inches]']").val() that it returns "" even if the input value is "string", I believe this is because it does not pass validation but I also think it ruins my logic.

Another problem might be that initially it is checking if the feet field hasClass "valid" and it returns false but then it seems like after initially being false, it is then set to validated once the the inches field is filled out and then ruins the validation logic on the 2nd attempt.

Here is my JFiddle but I had trouble duplicating since it is validating for a number correctly without even including that validation requirement... http://jsfiddle.net/sza51q6s/1/

I might have to reevaluate my logic entirely. How can I make the target field required only if the other field is NOT filled out OR if the current field IS filled out?

I've seen this before and the issue is how certain browsers handle the type="number" field when non-numbers are entered (the value ends up blank so plugin does see the entry and the field is treated as empty). Try type="text" and see if it makes a difference. — Sparky
– Sparky, Commented Dec 4, 2014 at 0:54
@Sparky thank you, I was 1 version behind and they have fixed the bug in the newest version. I also had to change some logic but that was on me. Thanks for the tip! — MicFin
– MicFin, Commented Dec 4, 2014 at 1:41

Rafael · Accepted Answer · 2014-12-04 01:19:53Z

2

Working Example

http://codepen.io/anon/pen/MYaLXv

<form>
  <input type="checkbox" id="check"/>
  <label for="check">Make text input required</label><br/>
  <input id="input" type="text"/>
  <button type="submit">Try to Submit </button>
</form>

jQuery

$("#check").on('change' function() {
  if ( this.checked ) {
    $("#input").attr('required', true);
  } else {  
    $("#input").attr('required', false);
  }
});

edited Dec 4, 2014 at 1:19

answered Dec 4, 2014 at 1:06

Rafael

7,79613 gold badges36 silver badges49 bronze badges

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

Comments

Sparky · Accepted Answer · 2014-12-04 02:54:46Z

0

I've seen this before and the issue is how certain browsers handle the type="number" field when non-numbers are entered (the value ends up blank so plugin does see the entry and the field is treated as empty). Try type="text" and see if it makes a difference.

Otherwise, make sure you have the latest version of jQuery Validate (1.13) as a bug related to the type="number" issue has recently been fixed.

answered Dec 4, 2014 at 2:54

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Comments

Jasim Juwel · Accepted Answer · 2017-11-15 10:57:07Z

0

Jquery One Field Validation Depend on another Field Input

   'document': {
                required: function(element){
                    return $("#document_title").val()!="";
                }
            }

answered Nov 15, 2017 at 10:57

Jasim Juwel

7661 gold badge9 silver badges19 bronze badges

Collectives™ on Stack Overflow

Jquery validate required based on another field's input and target field's input

3 Answers 3

Comments

Comments

Jquery One Field Validation Depend on another Field Input

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Jquery One Field Validation Depend on another Field Input

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related