CODEWITHSUNDEEP
javascriptjqueryruby-on-railsruby-on-rails-4jquery-validate
MicFin
MicFin

Reputation: 2501

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

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?

Upvotes: 0

Views: 5692

Answers (3)

Jasim Juwel
Jasim Juwel

Reputation: 766

Jquery One Field Validation Depend on another Field Input

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

Upvotes: 0

Sparky
Sparky

Reputation: 98728

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.

Upvotes: 0

Rafael
Rafael

Reputation: 7746

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

Upvotes: 2

Related Questions