CODEWITHSUNDEEP
jquery
Coach T13
Coach T13

Reputation: 1

Selecting Fields based on label via for attribute

Trying to make sure all "Required" fields are filled in using jQuery (to enable the submit button which is disabled on page load). The required fields are identified via a Required css class ON THE LABEL.

What I need to do is be able to check the length (has a value been entered) when the required fields have 1) something entered or 2) the user leaves the field.

An example of what I'm working with (which is not under my control):

<label for='txtField1' class='Required'>Field 1</label>
<input type='text' id='txtField1'/>

I'm able to check for 'empty required' fields using this code:

var reqEmpty=0;
jQuery('.Required').each(function(){
    var elem=jQuery(this).attr('for');
    if(jQuery('#'+elem).val().length===0){
        console.log('empty');
        reqEmpty++;
    }
});
console.log(reqEmpty); //count of emtpy required fields

Unfortunately, I cannot add the class to the input field - some of the controls in this application add/remove/reset css classes and the Required class gets wiped out when applied to the input itself.

What I am looking for is how can I 'watch' these fields and run the required check listed above. I'm thinking the .blur() function, but I can't .blur() on the .Required elements, I need to .blur() on the element that is 'connected' to the .Required via the 'for' attribute.

jQuery('.Required').attr('for').blur(function(){
/*
this doesn't work, but demonstrates what I'm trying to do.

*/
});

TIA

Upvotes: 0

Views: 42

Answers (2)

Hakan Kose
Hakan Kose

Reputation: 1656

As far as I can understand you disable your button and after everything is fine enable your "submit" button. To get this you need to check the ".Required" inputs on every blur (i also added keyup you can leave that away)

$("input").on("keyup blur", checkFields)
$(".submit").prop('disabled', true);


function checkFields() {
	// Check for current selected input 
    if($(this).val().length === 0){
    	$(this).addClass("error")
    } else {
    	$(this).removeClass("error")
    }
    
    var error;
    // On every blur or keyup check all input fields after the .Required label
    $(".Required").each(function() {
        let inputField = $(this).next();
        if (inputField.val().length === 0) {
            error = true;
        }
    })
    // On error submit button handler
    if (!error) {
        $(".submit").prop('disabled', false);
    } else {
    	$(".submit").prop('disabled', true);
    }
}
.error {
    border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for='txtField1' class='Required'>Field 1</label>
<input type='text' id='txtField1' />
<label for='txtField1' class='Required'>Field 2</label>
<input type='text' id='txtField2' />
<label for='txtField1' class='Required'>Field 3</label>
<input type='text' id='txtField3' />
<label for='txtField1' class='notrequired'>Not Required Field</label>
<input type='text' id='txtField4' />

<button class="submit">
    Submit
</button>

Upvotes: 1

Erik Philips
Erik Philips

Reputation: 54638

The following is pretty generic and should get you started. It may not work with some types of inputs (you'll have to add additional code maybe). The variables are verbose so it's clear what each step is doing.

$(document).ready(() => {
  $(".js-submit").on('click', (e) => {
    var $this = $(e.currentTarget);
    var $form = $this.closest('form');
    $form.find("label:not([for='']).required").each((i,e) => {
      var $label = $(e);
      var idSelector = "#" + $label.prop("for");
      if (idSelector.length > 1) {
        var $input = $(idSelector);
        if ($input.val().length === 0) {
          $input.addClass('error');
        }
        else {
          $input.removeClass('error');
        }
      }
    });
  });
  
  $("input, textarea, select").on('blur', (e) => {
    var $this = $(e.currentTarget);
    if ($this.val().length === 0) {
      var id = $this.prop('id');
      var labelSelector = "label.required[for='" + id + "']";
      if ($(labelSelector).length === 1) {
        $this.addClass('error');
      }
    }
    else {
      $this.removeClass('error');
    }
  });
});
.error {
  outline: 1px solid red;
}
div {
  margin: 5px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div>
    <label for="test" class="required">required</label>
    <input type="text" id="test" />
  </div>
  <div>
    <label class="required">required but no for</label>
    <input type="text" id="test2" />
  </div>
  <div>
    <label for="test3" class="">not required</label>
    <input type="text" id="test3" />
  </div>
  <div>
    <label for="test4" class="required">required</label>
    <input type="text" id="test4" />
  </div>
  
  <div>
    <input type="button" value="Save" class="js-submit" />
  </div>
</form>

Upvotes: 1

Related Questions