javascript - jQuery 中连接到单选按钮的特定输入验证

Question

我编写此代码是为了对注册表中的 class="req" 输入进行实时检查，除了这部分之外，它都有效。

如果用户选择私有(private)，输入 id="pIVA" 的类将保留 class="noreq"；相反，如果用户选择Corporate，类会在class="req"中更改，并且所有后续控件现在都被激活(仅当该字段为: 11数字，否则提交按钮将被禁用并显示错误)。以这种方式它可以工作，问题是如果用户返回到私有(private):之前的错误(如果有的话)被手动删除并且类正确更改为class =“noreq” 并且，应该发生的是，如果用户清理输入或插入任何字母而不是数字，则不应显示错误。相反，问题在于该控件仍然处于事件状态，就好像该类是class="req"。

有人可以解释一下错误在哪里吗？

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">

Answer 1

您需要删除选择“公司”时添加到输入框中的事件处理程序。因此，当选择 Private 单选按钮时，事件处理程序仍然绑定(bind)到输入框，因此它的行为方式也是如此。您需要删除 $('.err').hide(); 行之前的 'on' 事件处理程序，以确保在 noreq 类时删除输入框的事件处理程序已应用。

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