jQuery 프로그래밍 방식으로 유효성 검사 강조 표시 제거

Question

양식에 두 개의 확인란 (cbDeclined &cbIsOOfFac), 두 개의 텍스트 필드 및 드롭 다운 (txtHeight, txtWeight, ddlDevice)이 있습니다.

두 확인란 중 하나가 선택되어 있으면 다른 컨트롤이 비활성화되고 다른 컨트롤은 적용되지 않습니다. 여기에 현재의 규칙은 다음과 같습니다

$('form').validate({ 
    highlight: function (element, errorClass) { 
     $(element).addClass("invalidElem"); 
    }, 
    unhighlight: function (element, errorClass) { 
     $(element).removeClass("invalidElem"); 
    }, 
    errorPlacement: function (error, element) { 
     var parent = element.parent(); 
     parent.append(error); 
    }, 
    errorElement: "div", 
    errorClass: "errorMsg" 
}); 

function HeightWeightCtrlsEnabled() { return !cbDeclined.is(':checked') && !cbIsOOfFac.is(':checked'); } 

txtHeight.rules("add", { required: function (element) { return HeightWeightCtrlsEnabled(); }, maxlength: 3, min: 1, digits: true }); 
txtWeight.rules("add", { required: function (element) { return HeightWeightCtrlsEnabled(); }, maxlength: 4, min: 1, digits: true }); 
ddlDevice.rules("add", { required: function (element) { return HeightWeightCtrlsEnabled(); } }); 

function UpdateTextBoxes() { 
    var disableCtrls = !HeightWeightCtrlsEnabled(); 

    txtHeight.prop('disabled', disableCtrls); 
    txtWeight.prop('disabled', disableCtrls); 
    ddlDevice.prop('disabled', disableCtrls); 

    if (disableCtrls) { 
     txtHeight.val(''); 
     txtWeight.val(''); 
     ddlDevice.val(''); 
    } 
} 

cbDeclined.click(function() { 

    if (cbDeclined.is(':checked')) 
     cbIsOOfFac.attr('checked', false); 

    UpdateTextBoxes(); 
}); 

cbIsOOfFac.click(function() { 

    if (cbIsOOfFac.is(':checked')) 
     cbDeclined.attr('checked', false); 

    UpdateTextBoxes(); 
}); 

문제는 경우에 온다 : 사용자가 txtWeight에 뭔가를 입력는 그들이 필요하기 때문에 강조하기 위해 모두 ddlDevice & txtHeight를 얻기 위해 제출 클릭 수, 다음 ... 사용자가 클릭하는 cbDeclined & cbIsOOfFac. 강조 표시가 사라지지 않습니다. 높이를 중심으로 강조 표시하고 멀리 떨어지게하는 방법을 알아 내려고 노력 중입니다.

제대로 작동하는 jsFiddler를 만들려고했지만 모든 것이 올바르게 보이지만 작동하려면 아무 것도 얻을 수 없습니다. 여기 링크입니다 (I 링크를 게시 할 수 없습니다, 그래서 나는 그것을 조금 확장)

jsfiddle 점 그물/scarleton/9hDZQ/12/

마지막/12 /를 제거하는 경우, 당신은 볼 것이다 나의 첫 번째 버전 그게 진짜에서 잘라 내기/붙여 넣기입니다.

---

제안 사항마다 $ ('form')을 (를) 추가하려고 시도했습니다. 여러 곳.

UpdateTextBoxes() 함수의 끝에 추가 할 때, 그들은 내가 원하는 것을 강조 표시하지 않았습니다.

라디오 버튼 중 하나의 click() 이벤트 다음에 추가하면 텍스트가 사라지지만 실제 컨트롤은 그대로 유지됩니다. 규칙의 필수 속성에있는 함수가 제대로 작동하지 않는 것 같습니다. 정말 흥미로운 점은 다음과 같습니다. 높이를 입력하고 클릭하면 무게와 장치가 강조 표시되고 오류 메시지가 아래에 표시됩니다. 라디오 버튼 중 하나를 클릭하면 텍스트가 사라지지만 강조는하지 않습니다. 하지만 ... 높이가 강조 표시되지 않고 그대로 유지됩니다.

Answer 1

근무 바이올린 : http://jsfiddle.net/9hDZQ/15/는 당신이 그 상자 중 하나를 검사 할 때 양식을 다시 확인하는 유효성 검사 플러그인을 알 수있는 코드가 없었다

(당신의 하이라이트 CSS 스타일을 부족하지만, 클래스가 추가/제대로 제거된다). 재 검증을 강제로 클릭 할 때마다 처리기의 하단에 $('form').valid(); 추가 나를 위해 작동합니다

cbDeclined.click(function() { 

     if (cbDeclined.is(':checked')) 
      cbIsOOfFac.attr('checked', false); 

     UpdateTextBoxes(); 
     $('form').valid(); 
    }); 

    cbIsOOfFac.click(function() { 

     if (cbIsOOfFac.is(':checked')) 
      cbDeclined.attr('checked', false); 

     UpdateTextBoxes(); 
     $('form').valid();    
    });