2016-09-28 4 views
0

jquery 유효성 검사를 사용하고 있습니다. 어떤 규칙이 실패해도 양식을 제출하면 안되기 때문에 기능을 구현해야합니다. 작업이 유효하게 작동합니다.Jquery 유효성 검사 중 하나의 규칙이 실패하여 다른 규칙으로 건너 뛰지 않아야합니다.

문제는 여러 규칙이 실패하여 각 텍스트 상자에 오류 메시지가 표시되면 오류가 모든 규칙에 전파된다는 것입니다.

하나의 규칙이 실패 할 경우 해당 요소의 오류 메시지만으로 중지해야하는 기능을 구현하고 싶습니다.

<form id="myform"> 
<label for="firstName">FirstName</label> 
<input class="left" id="fname" name="fname" /> 
<br> 
<label for="lastName">LastName</label> 
<input class="left" id="lname" name="lname" /> 
<br> 
<label for="fromDate">fromDate</label> 
<input class="left" id="fromDate" name="fromDate" /> 
<br> 
<label for="endDate">endDate</label> 
<input class="left" id="endDate" name="endDate" /> 
<br> 
<input type="submit" value="Validate!"> 
</form> 

규칙 :

$("#myform").validate({ 
    rules: { 
    fname:"required", 
    lname:"required", 
    fromDate:"required", 
    endDate:"required" 
    } 
}); 

enter image description here

이 "이 필드는 필요하다"msg- 내 문제의 데모입니다가 나타납니다 첫 번째 텍스트 상자 즉, 한 번. 오류는 나머지 텍스트 상자로 전달되어서는 안됩니다. 어떤 몸은 내가 원하는 것을 이해하는 경우

응답하십시오 (이 내 데모 코드입니다.)

+0

여기서 룰이 있습니다. 여기에 당신이나 당신의 가짜 코드를 복사하십시오. – mayk

+0

@mayk 데모 코드를 찾아서 도움을 받으십시오. 덕분에 –

답변

2

당신은 당신은 단지 오류 목록에서 첫번째 발견 오류를 설정 사용자 지정 오류 처리기 showErrors를 사용할 수 있습니다. : 제 에러 배열을 정의 [], 내부에 배치되는 이유는 그래서

showErrors: function(errorMap, errorList) { 
    if (errorList.length) { 
     this.errorList = [errorList[0]]; 
    } 

    this.defaultShowErrors(); 
    } 

에러리스트는 배열 할 필요가있다.

그래서 총에 당신이 얻을 :

$("#myform").validate({ 
    rules: { 
    fname: "required", 
    lname: "required", 
    fromDate: "required", 
    endDate: "required" 
    }, 
    showErrors: function(errorMap, errorList) { 
    if (errorList.length) { 
     this.errorList = [errorList[0]]; 
    } 

    this.defaultShowErrors(); 
    } 
}); 

JsFiddle


지금, 당신은 첫 번째 오류에서 내부 유효성 검사 중지를 원하는 경우. 시각적으로 오류를 표시하는 것이 아니라 한 필드가 거짓 일 때 검사를 실제로 중지하는 것입니다. 내부 점검 기능 checkForm()을 겹쳐 쓸 수 있습니다.

나는 단순히 요소가 true 또는 false인지 확인합니다. false 하나 이상의 필드가 위증하다는 것을 알고 있습니다. 그래서 체크 루프 휴식 :

JsFiddle

validator.checkForm = function() { 
    this.prepareForm(); 
    for (var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++) { 
    if (!this.check(elements[i])) 
     return false; 
    } 
    return this.valid(); 
}; 
지금 내가 당신을 마음 싶어 나는이 플러그인의 창조자 아니다를, 그래서이 적절하게 작동하는지 나는 완전히 모른다. 나는 당신이하고있는 일에 대한 완전한 제어권을 갖기 위해 자신의 유효성 확인 코드를 작성하도록 제안 할 것이다.

+0

고마워! –

+0

난 그냥 내 진짜 코드에 대한 답변을 구현, 그게 내가 원하는 건 아니에요. 귀하는 다른 오류를 제거하고 있지만 내부적으로 모든 오류에 전파하고 있습니다. –

+0

@AmanNagarkoti 네, 플러그인은 내부적으로 이런 식으로 작동합니다. 모든 오류가 표시되지 않도록 코드를 덮어 쓰는 중입니다. 내부 코드를 편집하려고 시도하지만 지나치게 복잡해질 수 있습니다. – nkmol