양식 필드가 유효하지 않은 경우 클래스 추가

ajax 양식 제출에 jQuery 유효성 검사를 사용하고 텍스트 입력에 클래스 '오류'가 있으면 class를 errorContainer에 추가하고 싶습니다. 간단하지만 범위 문제라고 생각합니다.양식 필드가 유효하지 않은 경우 클래스 추가

if ($('#myInput').hasClass('error')) { 
    $('#errorContainer').addClass('foo'); 
}

나는 내 아무 소용이 ... 검증 호출 내부 검증 호출 외부에서 모든 핸들러를 제출, 제출 처리기 외부에서이 놓여있다. 누구든지이 간단한 작업을 성공으로 이뤘습니까?

출처

2012-12-07 Dirty Bird Design

$ ('입력 [유형 = 텍스트] ') 제네릭 선택기 .. 당신은 한번에 모든 textboxes를 확인하는 것 같아요. 만약 당신이 하나 이상의 페이지에서 첫 번째 텍스트 상자를 확인합니다 .. 좀 더 구체적으로보십시오 –

내가 할 수있어' 문제를 파악하는 것 같아서, 내가 한 것은 오류 컨테이너에 '오류'클래스를 추가하는 것입니다. 제출 처리기의 성공 함수에서 제거하십시오. –

이 작업을 수행 할 수 있습니다

if ($('input[type=text].error').length > 0) { 
    $('#errorContainer').addClass('foo'); 
}

선택기 $('input[type=text].error') 하나 개 일치하는 경우에도 배열과 같은 객체를 반환 할 것입니다. 그래서 배열 hasClass('error')면 이해가되지 않습니다.

당신이 정말로하고 싶은 것은 오류 클래스를 확인하려는 요소 주위에 컨테이너를 두는 것입니다. 양식과 같은 컨테이너가 이미있을 수 있습니다 (양식의 모든 입력 사항 인 경우). 자바 스크립트로

<form id="myForm"> 
    <input type="text" name="a" /> 
    <textarea name="b"></textarea> 
    <input type="submit" value="Submit" /> 
</form>

: 그럼 당신은 이런 식으로 뭔가를 할 수

$(':input.error', '#myForm').length > 0

는 예를 jsfiddle이다. :input selector을 사용하면 input보다 더 많은 입력 유형을 사용할 수 있으며 이는 원하는 것일 수 있습니다. 단지 jQuery 오브젝트에 포함 된 선택된 엘리먼트 그룹에서 제 요소에 작용한다 (예를 들면 등 .hasClass(), .val()로) 값을 리턴

출처

2012-12-07 16:32:38 Cymen

'$ ('input [type = text] .error')와 같은 선택자를 전달하는 jQuery 함수를 기술적으로 호출하면 실제 배열이 아닌 ** 배열과 같은 ** jQuery 객체를 반환합니다. 결과 객체 **는 ** .hasClass() 함수를 가지며, 일치하는 * first * 요소에만 작용합니다. –

간단합니다. 그것을 작동시키지 못한다면, jQuery 유효성 검사를 사용하여 Im을 확인하십시오. 유효성 검사 호출의 범위 안에 넣으시겠습니까? 외부가 작동하지 않습니다. –

먼저 유효성 검사를 실행할 수 있습니다. '$ ("# myForm"). validate();'와 같은 호출로 그렇게 할 수 있습니다. – Cymen

대부분 기능한다. 일반적으로 당신이 할 필요가했던 것과 이러한 경우

는 모든 요소을 반복 해, 각 테스트를 수행 할 .each() 기능을 사용합니다.

그러나 수업을 테스트 중이므로 Cymen의 대답에 설명 된대로 조건을 수정할 수 있습니다.

출처

2012-12-07 16:32:49

당신은 단지 toggleClass를 사용하고 조건에 전달할 수 있습니다

$('#errorContainer').toggleClass('foo',$('input[type=text].error').length > 0);

다른 클래스 foo는 제거 .. Foo 클래스를 추가 ... 클래스 오류가있는가 그래서 경우

출처

2012-12-07 16:33:04

양식 필드가 유효하지 않은 경우 클래스 추가

답변

관련 문제