Question

我编写此代码以使用我的注册表单class="req"对输入进行实时检查，除此部分外，所有内容均有效。

如果用户选择私人，则input id="pIVA"的班级仍为class="noreq";如果用户选择 Corporate ，则相反，class="req"中的类更改，所有后续控件现在都已激活（仅当字段为11位时才接受该字段，否则提交按钮为禁用并显示错误）。以这种方式工作，问题是如果用户返回私人：手动删除先前的错误（如果有的话）并且类正确地更改为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

在选择“公司”时，您需要删除添加到输入框的事件处理程序。因此，当选择“专用”单选按钮时，事件处理程序仍然绑定到输入框，因此它的行为方式如此。您需要在$('.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;
            }
        });

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

1 个答案: