2011-12-24 2 views
8

jquery 유효성 검사를 사용하려고합니다. 예를 들면 다음과 같습니다 : http://docs.jquery.com/Plugins/Validation 위대한 작품과 내 코드로 재현하고 싶습니다. 그러나 나는 어디에서 그것을 부를지 모르겠다.jquery 위치 확인

내가 가지고있는 것은 생성 된 html 테이블이며 어떤 행에 대해서도 "편집"버튼을 클릭하면 양식이 열립니다. 이 양식을 jquery로 검증하려고합니다. 나는 그것이 작동하고 있다고 믿는다. 그러나 나는 폼에 숨어서 폼을 숨기므로 검증 작업을 볼 수 없다 ... 나는 생각한다.

나는 자바 스크립트와 양식을 생성하고 제출 버튼은 다음과 같습니다

var mysubmit = document.createElement("input"); 
mysubmit.type = "submit"; 
mysubmit.name = "Submit"; 
mysubmit.value = "Apply" 
mysubmit.onclick = function() { 
    //return formSubmitactivecameras(); 
js("#EditCameraForm").validate(); 
    this.form.submit(); 
}; 
myform.appendChild(mysubmit); 

이 거의 충분한 정보가 없다 그래서 나는이 바이올린의 모든 코드가 : http://jsfiddle.net/UtNaa/36/을. 그러나 편집 단추를 클릭하면 피들이 작동하지 않을 수 있습니다. 나는 검증을 원하는 양식을 엽니 다.

유효성 검사가 실제로 작동하는지 잘 모르겠습니다. 어쩌면 폼에있는 제출 버튼을 누르면 폼이 숨겨집니다. 다시 바이올린은 양식을 보여주기 위해 작동하지 않지만 내 사이트에서 저에게 효과적입니다. 바라건대 거기에있는 코드가 도움이되기를 바랍니다.

답변

7

은 기본적으로 당신이 먼저 모든 요소를 ​​추가하거나하여 각 요소에 대해 유효성 검사를 추가

myinput.className = "required"; // add this line 

를 추가하여 호출 할 필요가 제출 버튼의 onclick 핸들러를 수정 유효성 확인을 신청하기 전에

또는

당신이 때 폼 다음

$.validator.addMethod("alphanum", function(value, element) { 
    return this.optional(element) || /^[a-z0-9]+$/i.test(value); 
}, "This field must contain only letters and numbers."); 

js("#EditCameraForm").validate(); 
     rules: { 
      camera_name: { 
       required: true, 
       alphanum: true, 
       minlength: 50, 
       maxlength: 10 
      }, 
}; 

유효성을 검사 할 수 있습니다 전에이 예에서는 16,

js("#EditCameraForm").validate(); 
     rules: { 
      camera_name: { 
       required: true, 
       minlength: 50, 
       maxlength: 10 
      }, 
}; 

는 addMethod를 사용하여 50 문자의 최대 및 사용자 지정 유효성 검사를 추가 할 수 있습니다 (10)

의 분으로 입력을 요구한다 제출 버튼을 눌렀지만 제출자가 제출 한 제출자에게 제출하는 숨기기를하지 않을 때 제출합니다.

js("#EditCameraForm").validate(); 
    rules: { 
     camera_name: { 
      required: true, 
      minlength: 50, 
      maxlength: 10 
     } 
    }, 
    submitHandler: function() { 
     // do stuff once form is valid but before it is sent 
    } 
}; 

가 여기에 사용자 정의 메시지를 적용하는 방법의 예입니다, 이것은 당신이 jsFiddle에 "아니오 랩의 왼쪽 (머리에 프레임 워크를 변경해야 할 규칙

messages: { 
    email: { 
     required: 'Enter this!' 
    } 
} 

리터

+0

는, 그러나 여기에 사용하는 형식이 문서에서 떨어져 보인다 : HTTP ://docs.jquery.com/Plugins/Validation/rules. 내가 너의 길을 시험해 본다면 나는 minlength를 얻지 못하면 정의되지 않는다. 내가 문서를 따르는 경우 http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js에서 다른 오류가 발생합니다. 줄 15 : d는 정의되지 않았습니다. 그렇다면 옳은 길은 무엇입니까? – Tom

+0

어느 쪽이든 작동해야합니다. 나는 당신을 온몸으로 보여준 방식을 사용하고 있습니다. jquery와 유효성 검사의 어떤 버전을 사용하고 있습니까? – mcgrailm

+0

아, 주목해야 할 것은, 방금 예제를 복사했지만 규칙은 유효성 검사 메소드에 있어야합니다. 그것은 작동합니다. 마지막 질문 하나. minlength에 맞춤 텍스트를 추가하고 싶지만 적용되지 않습니다 :'messages : {minlength : "blah blah"}'? – Tom

4

문제는 양식이 양식 필드에 포함되어야하는 내용을 모르는 것입니다.

문서를 다시 체크 아웃하십시오. 클래스 이름과 사용자 지정 특성을 사용하여 유효성 검사기를 구성 할 수 있습니다. 또는 $ .rule() 함수를 사용하여 규칙을 양식에 추가 할 수 있습니다.

예를 들어 입력 필드에 '필수'클래스를 추가하여 카메라 필드 이름을 지정하십시오.또한

var myinput = document.createElement("input"); 
myinput.name="camera_name"; 
myinput.value=cameraname; 
myinput.id="CameraName"; 
myinput.className = "required"; // add this line 
myform.appendChild(myinput); 

,

//submit changes button 
var mysubmit = document.createElement("input"); 
mysubmit.type = "submit"; 
mysubmit.name = "Submit"; 
mysubmit.value = "Apply" 
mysubmit.onclick = function() { 
    //return formSubmitactivecameras(); 
    js("#EditCameraForm").validate() 
    //this.form.submit(); // This isn't needed, the form will be submitted when this function ends 
}; 
myform.appendChild(mysubmit); 
3

이후에 갈 것) "JavaScript가 작동하기 시작합니다. 다음은 변경된 바이올린입니다. http://jsfiddle.net/UtNaa/39/

그러나 HTML 코드의 요소가 누락되어 코드가 작동하지 않습니다. 아마도 코드의 다른 부분을 추가 한 후 작동하기 시작할 것입니다. 그렇지 않으면 디버깅하기가 더 쉬울 것입니다.

+1

바이올린 수정을위한 thx – Tom

3

유효성 검사가 아직 응답되지 않았으므로 확인하지 않았습니다. 하지만 실제로 코드에서 작은 정리를 사용할 수는 있습니다.

체크 아웃이 다시 작성 방법 : 버튼 이벤트와 http://jsfiddle.net/UtNaa/40/


고정 버그 : http://jsfiddle.net/UtNaa/42/

내가 규칙을 추가 할
+0

와우, 고마워. 이렇게하면 코드가 정말 간단 해집니다. – Tom