어떻게 하나의 인스턴스 만 가질 수 있도록 AUI-Form-Validator를 삭제할 수 있습니까?

저는 Alloy UI와 YUI3을 사용하며 선택 드롭 다운의 사용자 옵션 선택에 따라 서버에 대한 ajax 호출을 시작하는 양식을가집니다. . 서버는 AUI-Form-Validation 모듈에 보내는 새로운 유효성 검사 규칙을 반환합니다. 규칙은 바뀌고 있지만 양식에서 중복 규칙을 출력하고 있습니다. 즉, 양식 유효성 검사 인스턴스를 바꾸지 않고 이전 인스턴스에 추가하므로 broswer에 중복 오류 필드 문자열이 있습니다. 나는 모든 인스턴스를 파괴해야하지만 가장 최근의 상황은 이룰 수는 없다고 생각합니다. 이전 양식 유효성 검사를 삭제/갱신하여 DOM에 최신 항목 만 표시되도록하려면 어떻게합니까? 당신은 규칙을 추가하지 않습니다어떻게 하나의 인스턴스 만 가질 수 있도록 AUI-Form-Validator를 삭제할 수 있습니까?

<!DOCTYPE html> 
<html> 
<head> 
    <title>Form Validation</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="http://cdn.alloyui.com/2.5.0/aui-css/css/bootstrap.min.css" rel="stylesheet" /> 
</head> 
<body> 

    <div class="container-fluid"> 
     <div class="row-fluid"> 
      <div class="span12"> 

       <form id="myForm"> 

        <select id="card-type" name="card-type" class="select_card_type"> 
         <option value="7" selected="selected" label="Seven"></option> 
         <option value="2" label="Two"></option> 
         <option value="5" label="Five"></option> 
        </select> 

        <div class="control-group card_number"> 
         <label class="control-label" for="cardNumber">Card number</label> 
         <div class="controls"> 
          <input name="cardNumber" id="cardNumber" type="text" /> 
         </div> 
        </div> 

        <div class="control-group csc"> 
         <label class="control-label" for="picture">Card security code</label> 
         <div class="controls"> 
          <input name="csc" id="csc" type="text"> 
         </div> 
        </div> 

        <input class="btn btn-info" type="submit" value="Submit"> 

       </form> 
      </div><!--/span--> 
     </div><!--/row--> 

     <hr> 

     <footer> 
      <p>&copy; Company 2013</p> 
     </footer> 

    </div><!--/.fluid-container--> 

    <script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></script> 
    <script> 
     YUI().use('node', 'node-base', 'event', 'transition', 'aui-io-request', 'json-parse', 'aui-form-validator', function(Y) { 

      var rules; 
      function Validator(rules) { 
       this.rules = rules; 
       this.fieldStrings = { 
        cardNumber: { 
         required: 'Type your card number in this field.' 
        }, 
        csc: { 
         required: 'Please provide your csc.' 
        } 
       }; 

       this.val = new Y.FormValidator(
        { 
         boundingBox: '#myForm', 
         fieldStrings: this.fieldStrings, 
         validateOnInput: true, 
         rules: this.rules 
        } 
       ); 
      } 
      Y.one('.select_card_type').on('change', function(e) { 

       var len = Y.one('#card-type option:checked').get('value'); 

       Y.io.request('<%= selectProductTypeResource.toString() %>', { 
        method: 'post', 
        on: { 
         failure: function() { 
          rules = { 
           cardNumber: { 
            required: true, 
            digits: true, 
            minLength: len, 
            maxLength: len 
           }, 
           csc: { 
            required: true, 
            digits: true, 
            minLength: len, 
            maxLength: len 
           } 
          }; 
          if (typeof (validator) === 'object') { 
           validator.val.destroy(true); // not working 
          } 
          validator = new Validator(rules); 
         } 
        } 
       }); 
      }); 
     });</script> 
</body> 
</html>

출처

2014-06-06 Karma Kaos

답장 origineil 주셔서 감사합니다. 귀하가 언급 한 내용을 구현하여 올바르게 작동 시켰습니다. setAttrs를 사용하여 새 규칙을 재설정했으며 모두 예상대로 작동합니다. 여기에 내 전체 작업 코드 :

YUI().use('node', 'node-base', 'event', 'transition', 'aui-io-request', 'json-parse', 'aui-form-validator', function(Y) { 

    var validator = new Y.FormValidator(
    { 
    boundingBox: '#myForm', 
    validateOnInput: true 
    }); 

    Y.one('.select_card_type').on('change', function(e) { 
    var len = Y.one('#card-type option:checked').get('value'); 
    validator.resetAllFields(); 

    Y.io.request('<%= selectProductTypeResource.toString() %>', { 
        method: 'post', 
        on: { 
         failure: function() { 
          var rules = { 
           cardNumber: { 
            required: true, 
            digits: true, 
            minLength: len, 
            maxLength: len 
           }, 
           csc: { 
            required: true, 
            digits: true, 
            minLength: len, 
            maxLength: len 
           } 
          }; 
          validator.setAttrs({rules: rules}); 
         } 
        } 
    }); 
    }); 
});

출처

2014-06-09 08:29:40

, 여러 검증을 바인딩 :

은 여기 내 (I 로컬 오전 테스트로 on.failure 사용하고 있습니다) 코드입니다. 규칙을 지울 수 있다고해도 오래된 유효성 검사기는 여전히 규칙에 위배되고 유효성이 확인됩니다.

"파괴"하지 않으려면 유효성 검사기를 한 번 만든 다음 이에 따라 규칙을 수정할 수 있습니다.

AlloyUI는 get/set 메서드를 사용하여 속성을 수정합니다.

규칙을 수정하려면 getter-var rules = validator.get('rules') -을 호출 한 다음 수정하십시오. validator.set('rules', {cardNumber: {required: true}})

내가 보여하도록 설정 an example fiddle이 :

호출, 세터을 새로운 규칙을 설정합니다. Create New Validator 및 Submit을 클릭하면 설명한 것과 동일한 동작이 나타납니다.

aui-form-validator source on github.

출처

2014-06-07 15:01:37 Origineil

답장 origineil 주셔서 감사합니다, 당신이 언급 한 것을 시도하고 작동했습니다. setAttrs를 사용하여 새 규칙을 재설정했으며 모두 예상대로 작동합니다. 많은 감사합니다. 여기 내 전체 작업 코드입니다 : –

어떻게 하나의 인스턴스 만 가질 수 있도록 AUI-Form-Validator를 삭제할 수 있습니까?

답변

관련 문제