[JQUERY] jQuery Validator 및 Ajax를 사용하는 사용자 지정 규칙

jQuery Validator 및 Ajax를 사용하는 사용자 지정 규칙

해결법

1. ---

   1.AJAX 요청을 수행하고 있습니다. ERGO : 사용자 지정 유효성 검사기가 TRUE 또는 FALSE를 반환하면 유효성 검사가 이미 작동 중입니다.

   AJAX 요청을 수행하고 있습니다. ERGO : 사용자 지정 유효성 검사기가 TRUE 또는 FALSE를 반환하면 유효성 검사가 이미 작동 중입니다.

   비동기로 작업해야합니다. 이 게시물을 참조하십시오 : 비동기, Ajax 요청이 아닌 동기식을 수행하기 위해 jQuery를 어떻게 얻을 수 있습니까?

   뭔가 :

   function myValidator() {
      var isSuccess = false;
   
      $.ajax({ url: "", 
               data: {}, 
               async: false, 
               success: 
                   function(msg) { isSuccess = msg === "true" ? true : false }
             });
       return isSuccess;
   }
   

   경고:

2. ---

   2.이 문제를 어지럽게하는 누구든지, 2010 년에 존재하지 않았을 수있는 '원격'메서드를 확인합니다.

   이 문제를 어지럽게하는 누구든지, 2010 년에 존재하지 않았을 수있는 '원격'메서드를 확인합니다.

   https://jqueryvalidation.org/remote-method/

   $("#myform").validate({
     rules: {
       email: {
         required: true,
         email: true,
         remote: {
           url: "check-email.php",
           type: "post",
           data: {
             username: function() {
               return $("#username").val();
             }
           }
         }
       }
     }
   });
   

3. ---

   3.페이지의 요소의 값을 포함하는 JSONIFIED 문자열을 원격 요청으로 포함하는 JSONIFIED 문자열을 가져 오는 방법을 알아 내기 위해 영원히 데려갔습니다. 이것은 많은 시간의 조합 결과 많은 검색 결과를 시도한 결과입니다.

   페이지의 요소의 값을 포함하는 JSONIFIED 문자열을 원격 요청으로 포함하는 JSONIFIED 문자열을 가져 오는 방법을 알아 내기 위해 영원히 데려갔습니다. 이것은 많은 시간의 조합 결과 많은 검색 결과를 시도한 결과입니다.

   키 포인트:

   .aspx 페이지 :

   <input id="EmailAddress" required name="Email" type="email" placeholder="Email Address*" runat="server"/>
   

   뒤에있는 코드 :

   [WebMethod]
       public static object IsEmailAvailable(string address){...}
   

   응답 개체 포맷 :

   function isAvailable(data) {
       var response = JSON.parse(getJsonObject(data));
       return (response.isAvailable === "True") ? true : false;
   };
   
   //transform response string to a JavaScript Object()
   //http://encosia.com/never-worry-about-asp-net-ajaxs-d-again/ 
   function getJsonObject(data) {
       var msg = eval('(' + data + ')');
       if (msg.hasOwnProperty('d'))
           return msg.d;
       else
           return msg;
   };
   

4. ---

   4.여기 내 "오래된 학교"해킹이 있습니다 ...

   여기 내 "오래된 학교"해킹이 있습니다 ...

   "jquery.validate.js"라이브러리를 사용하여 "비동기식"유효성 검사를 사용할 수있는 유틸리티 함수 아래에 있습니다. 이 기능은 사용자 키 입력간에 지연을 생성합니다. "ValidFunc"는 "서버 사이드"/ "백엔드"(기본적으로 짐마자 이러한 방식으로 "ValidFunc"유효성 검사 기능은 사용자가 입력하는 동안 사용자가 "실시간"유효성 검사 ( "onkeyup": jqv 설정에서 true) "일정 기간 동안 입력을 중지 할 때만 호출됩니다.

   중요 : "jqvasyncvalid"기능을 사용하는 유효성 검사는 항상 비동기로 인한 다른 사람들과의 충돌을 피할 마지막 것입니다.

   {
       [...]
       "rules": {
           "field_name": {
               "required": true,
               "maxlength": 12,
               "minlength": 4,
   
               // NOTE: Validation involving the use of the "jqvAsyncValid" function. By Questor
               "my_custom_ajax_validation": true
   
           },
       [...]
   }
   

   답변의 코드 :

   // NOTE: Adds the custom validation "my_custom_ajax_validation". By Questor
   $.validator.addMethod("my_custom_ajax_validation", function (value, element) {
       return jqvAsyncValid(element, "my_custom_ajax_validation", myValidationFunc, this);
   }, "My error message!");
   
   // NOTE: My validation function. By Questor
   function myValidationFunc(domElement) {
       if (someFuncWithAjaxCall(domElement.value) == "ALL_RIGHT!") {
           return true;
       } else {
           return false;
       }
   }
   
   // NOTE: Global "json" variable that stores the "status" ("isValid") and cycle control
   // ("toCtrl") of asynchronously validated elements using the "jqvAsyncValid" function.
   // By Questor
   var jqvAsyncVState = {};
   
   // NOTE: A utility function that allows the use of asynchronous validations with
   // "jquery.validate.js". This function creates a delay between one user keystroke and
   // another otherwise the validation function "validFunc" will be called "all time"
   // which is not very performative in some circumstances and especially problematic
   // for functions that perform validations on the serverside/backend (ajax calls basically).
   // In this way the "validFunc" validation function is only called when the user stops
   // typing for a certain period of time, which also allows a "realtime" validation
   // as it occurs while the user is typing. By Questor
   // [Ref .: https://jqueryvalidation.org/ ]
   //. domElement - DOM element informed by jqv in the "addMethod" for the anonymous
   // function;
   //. asyncRuleNm - Validation name added via "addMethod";
   //. validFunc - Function that will do the validation. Must have the signature
   // "funcName(domElement)" returning "true" for valid and "false" for not;
   //. jQValidInst - Instance of the current jqv within "addMethod". It is usually
   // denoted by "this";
   //. toInMsecs - "Timeout" in "milliseconds". If not informed the default will be
   // 1500 milliseconds. Be careful not to use a very short timeout especially in
   // "ajax" calls so as not to overload the serverside/backend.
   // Eg.: `return jqvAsyncValid(element, "my_custom_ajax_validation", myValidationFunc, this);`.
   function jqvAsyncValid(domElement, asyncRuleNm, validFunc, jQValidInst, toInMsecs) {
       if (typeof toInMsecs === "undefined" || toInMsecs === "") {
           toInMsecs = 1500;
       }
       var domEKey = jQValidInst.currentForm.id + domElement.name;
   
       // NOTE: The validation messages need to be "displayed" and "hidden" manually
       // as they are displayed asynchronously. By Questor
       function errMsgHandler() {
           if (jqvAsyncVState[domEKey]["isValid"]) {
   
               // NOTE: If the current error message displayed on the element was that
               // set in the rule added via "addMethod" then it should be removed since
               // the element is valid. By Questor
               // [Ref.: https://stackoverflow.com/a/11652922/3223785 ,
               // https://stackoverflow.com/a/11952571/3223785 ]
               if (jQValidInst.errorMap[domElement.name] == $.validator.messages[asyncRuleNm]) {
                   var iMsgNow = {};
                   iMsgNow[domElement.name] = "";
                   jQValidInst.showErrors(iMsgNow);
               }
   
           } else {
               var iMsgNow = {};
   
               // NOTE: If the element is invalid, get the message set by "addMethod"
               // for current rule in "$.validator.messages" and show it. By Questor
               iMsgNow[domElement.name] = $.validator.messages[asyncRuleNm];
               jQValidInst.showErrors(iMsgNow);
   
           }
       }
       if (!jqvAsyncVState.hasOwnProperty(domEKey)) {
   
           // NOTE: Set the global json variable "jqvAsyncVState" the control attributes
           // for the element to be asynchronously validated if it has not already been
           // set. The key "domEKey" is formed by the "id" of the "form" that contains
           // the element and the element's "name". By Questor
           jqvAsyncVState[domEKey] = {
               "toCtrl": null,
               "isValid": undefined
           };
   
       }
       var useOnKeyup = true;
   
       // NOTE: The "onblur" event is required for "first validation" that only occurs
       // in a "blur" event - this is inherent to jqv - and for situations where the
       // user types very fast and triggers "tab" and the event "onkeyup" can not deal
       // with it. By Questor
       domElement.onblur = function (e) {
           jqvAsyncVState[domEKey]["isValid"] = validFunc(domElement);
           errMsgHandler();
           useOnKeyup = false;
       }
       if (useOnKeyup) {
   
           // NOTE: The strategy with the event "onkeyup" below was created to create
           // a "delay" between a "keystroke" and another one otherwise the validation
           // function "validFunc" will be called "all time" which is not very performative
           // in some circumstances and especially problematic for functions that perform
           // serverside/backend validations (ajax calls basically). In this way the
           // "validFunc" validation function is only called when the user stops typing
           // for a certain period of time ("toInMsecs"). By Questor
           domElement.onkeyup = function (e) {
   
               // NOTE: Clear the "toCtrl" if it has already been set. This will
               // prevent the previous task from executing if it has been less than
               // "toInMsecs". By Questor
               clearTimeout(jqvAsyncVState[domEKey]["toCtrl"]);
   
               // NOTE: Make a new "toCtrl" set to go off in "toInMsecs" ms. By Questor
               jqvAsyncVState[domEKey]["toCtrl"] = setTimeout(function () {
                   jqvAsyncVState[domEKey]["isValid"] = validFunc(domElement);
                   errMsgHandler();
               }, toInMsecs);
           };
       }
       return jqvAsyncVState[domEKey]["isValid"];
   }
   

from https://stackoverflow.com/questions/2628413/jquery-validator-and-a-custom-rule-that-uses-ajax by cc-by-sa and MIT license