목록 상자에서 GAS 클라이언트 처리기 유효성 검사

Question

나는 GAS에서 간단한 UI 웹 양식을 코딩하고 있습니다. 여러 텍스트 상자와 목록 상자가 있습니다. 나는 클라이언트 핸들러를 추가하여 흐림 효과에 대한 입력란의 유효성을 검사했으며 모두 제대로 작동합니다. 그러나 목록 상자에서 클라이언트 처리기를 사용하려고하면 작동하지 않습니다. 예를 들어, 목록 상자의 첫 번째 항목은 빈 문자열이며 항목을 선택했는지 확인하려고합니다. 내가 사용하는 유효성 검사 옵션이 무엇이든, 그것은 발사됩니다. 유효성 검사를 시도했습니다. 아마 스크립트가 목록의 인덱스 값을 선택했을 수도 있으므로 옵션과 범위를 시도했습니다. 또한 이동하지 않아도됩니다. 스크립트가 null 값으로 작동하고있는 것으로 추측합니다.이 값은 모든 유효성 검사를 단락시킵니다. 어떤 팁? 위젯이 목록 상자 일 때이 조건은 조건에 관계없이 항상 발생합니다.

var required_field = app.createClientHandler() 
    .validateNotLength(widget, min, max) 
    .forTargets(lblInfo) 
    .setStyleAttribute('color','red') 
    .setText('Please correct errors in red NOW.') 
    .forTargets(lbl) 
    .setStyleAttribute('color','red') 
    .forTargets(widget) 
    .setStyleAttribute('background', '#ffe7e7'); 
widget.addBlurHandler(required_field); 

Answer 1

나는이 문제에 관심이있어서 몇 가지 테스트를 실시하고 해결 방법이 흥미 롭다. 코드는 조금 길지만 짧고 명확하게 만드는 방법을 찾지 못했습니다 .-)

이 버전은 효과적이며, '투명하게'만드는 방법과 몇 가지 방법이 있습니다. 처리기 유효성 검사가 listBoxes에서 작동하지 않음을 보여줍니다.

당신이 ;-)

편집을 어떻게 생각하는지 말해 : 나는 빠른 테스트에 대한 version online을 넣었습니다. EDIT 2

function showtest() { 
    var doc = SpreadsheetApp.getActiveSpreadsheet(); 
    var app = UiApp.createApplication().setTitle('ListBox Clienthandler test'); 
    var panel = app.createVerticalPanel(); 
    var lb = app.createListBox(false).setId('myId').setName('myLbName').setWidth(350); 
    var former = app.createTextBox().setName('former value').setId('former').setWidth(350); 
    var textbox = app.createTextBox().setName('text').setId('valtext').setWidth(350)//.setVisible(false);// set it visible to test how it works, invisible to use it 'transparently' 
    var label = app.createHTML("<BR><BR>Use this textBox as a button, click on it to update its value,<BR>the Client handler doesn't fire when selected color = white<BR>(if you set the upper textBox invisible then it works as if the<BR>listBox had the handler)<BR><BR>")  
    // add items to ListBox 
    lb.setVisibleItemCount(7); 
    lb.addItem('white'); 
    lb.addItem('pink'); 
    lb.addItem('orange'); 
    lb.addItem('green'); 
    lb.addItem('yellow'); 
    lb.addItem('red'); 
    lb.addItem('cyan'); 
// 
    panel.add(textbox); 
    panel.add(lb); 
    panel.add(label); 
    panel.add(former); 
    var handler = app.createServerClickHandler('click').addCallbackElement(panel); 
    lb.addClickHandler(handler); 
    app.add(panel); 
    doc.show(app); 
} 
// 
function click(e) { 
    var app = UiApp.getActiveApplication(); 
    var value = e.parameter.myLbName 
     if(value==''){value='white'} 
    var textboxvalue = e.parameter.text 
     if(textboxvalue==''){textboxvalue='none'} 
    var text=app.getElementById('valtext') 
     text.setText(value) 
    var lb=app.getElementById('myId') 
    var former=app.getElementById('former') 
// var handlerval = app.createClientHandler().validateNotMatches(lb, 'white') // this line puts handler on listBox and doesn't work 
    var handlerval = app.createClientHandler().validateNotMatches(text, 'white') // this line puts handler on TextBox and works as expected 
    .forEventSource().setText("Click here for Former Value = "+textboxvalue+"/present value = "+value) 
    .forTargets(lb).setStyleAttribute("background", value) 
     former.addClickHandler(handlerval); 
    return app; 
} 

: 여기

는 시뮬레이션 또 다른 가능성이다 (거의 정확하게) 당신이 필요로하는 기능 : (online version)

 function showtest() { 
     var doc = SpreadsheetApp.getActiveSpreadsheet(); 
     var app = UiApp.createApplication().setTitle('ListBox Clienthandler test'); 
     var panel = app.createVerticalPanel(); 
     var lb = app.createListBox(false).setId('lb').setName('lb').setWidth(350); 
     var label = app.createHTML("<BR>You forgot to choose a value in the list").setVisible(false).setId('label'); 
     lb.setVisibleItemCount(7); 
     lb.addItem(''); 
     lb.addItem('pink'); 
     lb.addItem('orange'); 
     lb.addItem('green'); 
     lb.addItem('yellow'); 
     lb.addItem('red'); 
     lb.addItem('cyan'); 
     var othertextbox = app.createTextBox().setText('other question'); 
     var grid = app.createGrid(4,1) 
      grid.setWidget(0, 0, lb) 
      grid.setWidget(1, 0, label) 
      grid.setWidget(3, 0, othertextbox) 
     panel.add(grid) 
     var handler = app.createServerBlurHandler('alert').addCallbackElement(panel); 
     lb.addBlurHandler(handler); 
     app.add(panel); 
     doc.show(app); 
    } 
    // 
function alert(e) { 
    var app = UiApp.getActiveApplication(); 
    var lb = app.getElementById('lb') 
    var label = app.getElementById('label') 
    var value = e.parameter.lb 
     if(value==''){ 
    lb.setStyleAttribute("background", 'red'); 
     label.setVisible(true) 
      }else{ 
    lb.setStyleAttribute("background", 'white'); 
     label.setVisible(false) 
      } 
    return app; 

Answer 2

클라이언트 핸들러 목록 상자 작업니까. 하지만 반응이 1-2 초 지연 될 수있는 대부분의 경우에 적용 할 수있는 서버 핸들러 옵션이 있음을 잊지 마십시오.