Булевы операторы и ClientHandler

Question

Можно ли использовать обработчики кликов для определения того, являются ли два текстовых поля пустыми или оба содержат значение, но не одно или другое?

В настоящее время я использую обработчик сервера для проверки этого условия, но для скорости я предпочитаю использовать клиентские манипуляторы.

if ((textbox1 == '' && textbox2 == '') || (textbox1 != '' && textbox2 != '')) 
    //do something 
else 
    //display error 'both boxes must either be empty or contain a value 

Приветствия Dave

Некоторые примеры кода:

function genObsReport() { 
var myapp = UiApp.createApplication().setTitle('Report'); 
var dateFrom = myapp.createDateBox().setId("dateFrom"); 
var dateTo = myapp.createDateBox().setId("dateTo"); 

var mygrid = myapp.createGrid(2, 2); 
mygrid.setWidget(0, 0, myapp.createLabel('Date from')); 
mygrid.setWidget(0, 1, dateFrom); 
mygrid.setWidget(1, 0, myapp.createLabel('Date to')); 
mygrid.setWidget(1, 1, dateTo); 

var errors = myapp.createLabel('Error').setId('errors').setVisible(false); 
var mybutton = myapp.createButton('Create Report'); 

var mypanel = myapp.createVerticalPanel();  
mypanel.add(mygrid); 
mypanel.add(mybutton); 

mypanel.add(errors); 
myapp.add(mypanel); 

var handler = myapp.createServerHandler("change"); 
handler.addCallbackElement(mygrid); 
mybutton.addClickHandler(handler); 

var spreadsheet = SpreadsheetApp.getActiveSpreadsheet(); 
spreadsheet.show(myapp); 
} 

function change(eventInfo) { 
var app = UiApp.getActiveApplication();  
var dateFrom = eventInfo.parameter.dateFrom; 
var dateTo = eventInfo.parameter.dateTo; 

// check the dates 
if ((dateFrom == '' && dateTo == '') || (dateFrom != '' && dateTo != '')) { 
    //do something 
} else { 
    //show errors 
    app.getElementById('errors').setVisible(true); 
    app.getElementById('dateFrom').setStyleAttributes({background: "red", color: "black"}); 
    app.getElementById('dateTo').setStyleAttributes({background: "red", color: "black"}); 
} 
} 

Answer 1

Да - это возможно - хотя то, что я придумал, конечно, cludgy. Вот моя логика:

С учетом texbox добавьте двух обработчиков клиентов, которые проверяют длину - один проверяет длину 0 на другую для 1 или более. Измените значение в скрытом текстовом поле на 0 или одно в зависимости от того, что произойдет. Повторите это с другим скрытым текстовым полем для второго текстового поля. создайте два новых валидатора для включения или выключения вашей кнопки на основе суммы двух скрытых текстовых полей. Хотя он должен работать, поскольку в документации указано, что обработчики выполняются в том порядке, в котором они добавлены, для дополнительной безопасности я добавил еще один обработчик на самой кнопке. Я добавил более приятный код HERE, который добавляет некоторые дополнительные ярлыки и форматирование, чтобы сделать его более очевидным, но код становился немного длиннее для этого, поэтому почти в минимальном объеме вам нужно. Here is the final working product в действии

function doGet() { 
    var app = UiApp.createApplication(); 


    var button = app.createButton('Click Me'); 
    app.add(button); 

    var tb1=app.createTextBox().setId('tb1').setName('tb1'); 
    var tb2=app.createTextBox().setId('tb2').setName('tb2'); 
    //Hide these two - but i left them visible so you can see the script in action. 
    var tbValidatorForTb1=app.createTextBox().setId('tb3').setName('tb3'); 
    var tbValidatorForTb2=app.createTextBox().setId('tb4').setName('tb4'); 
    var label = app.createLabel('The button was clicked.') 
       .setId('statusLabel') 
       .setVisible(false); 
    app.add(label); 
    app.add(tb1); 
    app.add(tb2); 

    app.add(tbValidatorForTb1); 
    app.add(tbValidatorForTb2); 
    //Set your validators for your first textbox 
    var clientHandler1=app.createClientHandler().validateLength(tb1, 1, 200).forTargets(tbValidatorForTb1).setText('1'); 
    var clientHandler2=app.createClientHandler().validateLength(tb1,0, 0).forTargets(tbValidatorForTb1).setText('0'); 

    //Set your validators for your second textbox 
    var clientHandler3=app.createClientHandler().validateLength(tb2, 1, 200).forTargets(tbValidatorForTb2).setText('1'); 
    var clientHandler4=app.createClientHandler().validateLength(tb2, 0, 0).forTargets(tbValidatorForTb2).setText('0'); 
    tb1.addKeyUpHandler(clientHandler1); 
    tb1.addKeyUpHandler(clientHandler2); 
    tb2.addKeyUpHandler(clientHandler3); 
    tb2.addKeyUpHandler(clientHandler4); 
    tb2.addKeyUpHandler(clientHandler1); 
    tb2.addKeyUpHandler(clientHandler2); 
    tb1.addKeyUpHandler(clientHandler3); 
    tb1.addKeyUpHandler(clientHandler4); 



    //Now create some client handlers to do the actual enable/disable of the button 


    var finalDisableValidator=app.createClientHandler().validateSum([tbValidatorForTb1,tbValidatorForTb2], 1).forTargets(button).setEnabled(false); 
    var finalEnableValidator=app.createClientHandler().validateNotSum([tbValidatorForTb1,tbValidatorForTb2], 1).forTargets(button).setEnabled(true); 

    tb1.addKeyUpHandler(finalDisableValidator); 
    tb1.addKeyUpHandler(finalEnableValidator); 
    tb2.addKeyUpHandler(finalDisableValidator); 
    tb2.addKeyUpHandler(finalEnableValidator); 

    //tb4.addChangeHandler(finalEnableValidator) 
    var handler = app.createServerHandler('myClickHandler').validateNotSum([tbValidatorForTb1,tbValidatorForTb2], 1); 
    handler.addCallbackElement(label); 
    button.addClickHandler(handler); 

    return app; 
} 

function myClickHandler(e) { 
    var app = UiApp.getActiveApplication(); 

    var label = app.getElementById('statusLabel'); 
    label.setVisible(true); 

    app.close(); 
    return app; 
} 

я пропустил dateBox - так ниже код, который работает для dateboxes. Пара примечаний

1. lengthchecks on dateboxes не работает должным образом, они вызывают ошибку по какой-либо причине. Я использовал регулярное выражение для символа '-'. вам может потребоваться изменить это, если вы создали свою дату по-другому.
2. вам нужно запускать события для недействительных дат для обработки пустых полей
3. и, наконец, вы должны использовать обработчик valuechange вместо, как это было правильно отмечено, что не имеет OnKeyUp

Ниже является кодом для этого

function doGet() { 
    var app = UiApp.createApplication(); 


    var button = app.createButton('Click Me'); 
    app.add(app.createLabel("This demonstrates using clienthandlers to require either neither or both fields to be populated before the button can be clicked")); 
    var validationWarning=app.createLabel("Please enter a value in both fields or neither field").setId('warningLabel').setStyleAttribute('color', "red").setVisible(false); 
    app.add(button); 
    app.add(validationWarning); 
    var panel = app.createVerticalPanel(); 


    // db1.addValueChangeHandler(handler); 

    var tb1=app.createDateBox().setId('tb1').setName('tb1'); 
    var tb2=app.createDateBox().setId('tb2').setName('tb2'); 
    //Hide these two - but i left them visible so you can see the script in action. 
    var tbValidatorForTb1=app.createTextBox().setId('tb3').setName('tb3').setEnabled(false); 
    var tbValidatorForTb2=app.createTextBox().setId('tb4').setName('tb4').setEnabled(false); 
    var label = app.createLabel('The button was clicked.') 
       .setId('statusLabel') 
       .setVisible(false); 


    panel.add(label); 

    var grid1=app.createGrid(2, 2); 
    grid1.setWidget(0, 0, app.createLabel("Field 1")); 
    grid1.setWidget(0, 1, app.createLabel("Field 2")); 
    grid1.setWidget(1, 0,tb1); 
    grid1.setWidget(1, 1,tb2); 
    panel.add(grid1); 

    var grid2=app.createGrid(2, 2); 
    grid2.setWidget(0, 0, app.createLabel("Validator 1")); 
    grid2.setWidget(0, 1, app.createLabel("Validator 2")); 
    grid2.setWidget(1, 0,tbValidatorForTb1); 
    grid2.setWidget(1, 1,tbValidatorForTb2); 
    panel.add(grid2); 

    app.add(panel); 
    //Set your validators for your first textbox 
// var dateHandler1=app.createClientHandler().validateInteger(tb1).forTargets(tbValidatorForTb1).setText('1'); 
// var dateHandler2=app.createClientHandler().validateInteger(tb1).forTargets(tbValidatorForTb2).setText('1'); 

    var clientHandler1=app.createClientHandler().validateMatches(tb1,'\-').forTargets(tbValidatorForTb1).setText('1'); 
    var clientHandler2=app.createClientHandler().validateNotMatches(tb1, '\-').forTargets(tbValidatorForTb1).setText('0'); 

    //Set your validators for your second textbox 
    var clientHandler3=app.createClientHandler().validateMatches(tb2,'\-').forTargets(tbValidatorForTb2).setText('1'); 
    var clientHandler4=app.createClientHandler().validateNotMatches(tb2,'\-').forTargets(tbValidatorForTb2).setText('0'); 
    //tb1.addValueChangeHandler(handler) 
    tb1.addValueChangeHandler(clientHandler1); 
    tb1.addValueChangeHandler(clientHandler2); 
    tb2.addValueChangeHandler(clientHandler3); 
    tb2.addValueChangeHandler(clientHandler4); 
tb2.addValueChangeHandler(clientHandler1); 
    tb2.addValueChangeHandler(clientHandler2); 
tb1.addValueChangeHandler(clientHandler3); 
tb1.addValueChangeHandler(clientHandler4); 

    //Now create some client handlers to do the actual enable/disable of the button 
    tb1.setFireEventsForInvalid(true); 
    tb2.setFireEventsForInvalid(true); 
    var finalDisableValidator=app.createClientHandler().validateSum([tbValidatorForTb1,tbValidatorForTb2], 1).forTargets(button).setEnabled(false).forTargets(validationWarning).setVisible(true); 
    var finalEnableValidator=app.createClientHandler().validateNotSum([tbValidatorForTb1,tbValidatorForTb2], 1).forTargets(button).setEnabled(true).forTargets(validationWarning).setVisible(false); 

    tb1.addValueChangeHandler(finalDisableValidator); 
    tb1.addValueChangeHandler(finalEnableValidator); 
    tb2.addValueChangeHandler(finalDisableValidator); 
    tb2.addValueChangeHandler(finalEnableValidator); 

    //tb4.addChangeHandler(finalEnableValidator) 
    var handler = app.createServerHandler('myClickHandler').validateNotSum([tbValidatorForTb1,tbValidatorForTb2], 1); 
    handler.addCallbackElement(label); 
    button.addClickHandler(handler); 

    return app; 
} 

function myClickHandler(e) { 
    var app = UiApp.getActiveApplication(); 

    var label = app.getElementById('statusLabel'); 
    label.setVisible(true); 

    app.close(); 
    return app; 
}