A specific input validation in jQuery connected to radio buttons

Question

I wrote this code to perform live checks on the inputs with class="req" of my registration form, and it all works except for this part.

If the user selects Private the class of the input id="pIVA" remains class="noreq"; at the opposite if the user selects Corporate, the class changes in class="req" and all the subsequent controls are now activated (the field is accepted only if it's: 11 digits, otherwise the submit button is disabled and an error is displayed). In this way it works, the problem is if the user goes back to to Private: the previous error (if there's any) is manually removed and the class correctly changes to class="noreq" and, what it should happen, is that if the user clean the input or inserts any letter instead of digits no error should be displayed. The problem, instead, is that the control is still active, as if the class would be class="req".

Can someone explain me where is the error?

function reqChk() {
	function addErr(errMsg, inputID) {
		$('#subButton').prop('disabled', true);
		$('#err' + inputID).fadeIn(500).html(errMsg);
		$('#err' + inputID).css('background-color', '#E3BFC0');
		$('#' + inputID).css('background-color', '#E3BFC0');
	}
	function removeErr(inputID) {
		$('#subButton').prop('disabled', false);
		$('#err' + inputID).fadeOut(500);
		$('#' + inputID).css('background-color', 'inherit');
	}
	function oneRegex (regex, inputValue, errMsg, inputID) {
		if (!regex.test(inputValue)) {
			addErr(errMsg, inputID);
		}
		else {
			removeErr(inputID);
		}
	}

	/* CHKS .req ONLY */
	$('.err').hide();
	$('.req').on('input', function() {
		var inputID = $(this).attr('id');
		var inputValue = $(this).val();
		var valueLenght = $(this).val().length;
		
		switch (inputID) {
			case "pIVA": 
			    oneRegex(/^[0-9]{11}$/, inputValue, 'Invalid partita IVA', inputID);
			    break;
        }
     });
}


function subjectType() {
	/* SUBJECT TYPE */
	$('.subjectTypeRadio').on('click', function() {
		var $subjectType = $(this).val(); //1->PF | 2->PG
			console.log($subjectType);
		
		if ($subjectType == 2) {
			$('#pIVA').removeClass('noreq').addClass('req');
			$('#resInfoTitle').html('Sede legale');
		}
		else {
			$('#pIVA').removeClass('req').addClass('noreq');
			
          function removeErr(inputID) {
				$('#subButton').prop('disabled', false);
				$('#err' + inputID).fadeOut(500);
				$('#' + inputID).css('background-color', 'inherit');
			}
			removeErr('pIVA');
			$('#resInfoTitle').html('Residenza/domicilio');
		}
        reqChk(); //callback the function which controls * the .req fields
	});
}

input {
            display:block;}
        label {
            display:inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
		$(document).ready(function(){
			reqChk();
			subjectType();
		});
</script>

<label for="private">Private</label>
  <input type="radio" class="subjectTypeRadio" id="private" name="subjectType" value="1">
<label for="corporate">Corporate</label>
  <input type="radio" class="subjectTypeRadio" id="corporate" name="subjectType" value="2">


<label id="pIVALabel"><span id="pIVASpan" class="labelSpan">Partita IVA</span></label>
  <input type="text" id="pIVA" name="pIVA" class="noreq" placeholder="Partita IVA" maxlength="11">
    <div id="errpIVA" class="err"></div>

<input type="submit" id="subButton" value="Registrati">

Nasir T · Accepted Answer · 2017-01-17 15:23:21Z

1

you need to remove the event handler that you add to the input box when Corporate is selected. So when the Private radio button is selected the event handler is still bound to the input box so it behaves that way. you need to remove the 'on' event handler right before the $('.err').hide(); line to make sure that the event handler of the input box is removed when the noreq class is applied.

        /* CHKS .req ONLY */
        $('.noreq').off('input'); // Make sure the on event handler is removed from noreq class input.
        $('.err').hide();
        $('.req').on('input', function () {
            var inputID = $(this).attr('id');
            var inputValue = $(this).val();
            var valueLenght = $(this).val().length;

            switch (inputID) {
                case "pIVA":
                    oneRegex(/^[0-9]{11}$/, inputValue, 'Invalid partita IVA', inputID);
                    break;
            }
        });

answered Jan 17, 2017 at 15:23

Nasir T

2,6631 gold badge12 silver badges17 bronze badges

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

1 Comment

Brigo Over a year ago

.off() is exactly the method I was searching for, mate! Many thanks

Collectives™ on Stack Overflow

A specific input validation in jQuery connected to radio buttons

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related