Проверка ввода текста и управление кнопкой с помощью JS в браузере

[x11]

Подскажите, как правильно сделать.

На форме есть несколько элементов ввода и кнопка. Некоторые элементы ввода обязательны для заполнения.

Как сделать проверку на стороне браузера? Т.к. чтобы кнопка была не активной, если хоть один из двух элементов ввода пустые.

Чтобы между браузером и сервером не было никаких ajax-сообщений во время проверки.

Чтобы было что-то вроде такого delphi-кода:

btnOK.Enabled := (edLogin.text <> '') and (edPass.text <> '')

 

Я так полагаю, что это будет в событии keypress. Но как в этом событии найти экземпляр кнопки и экземпляры двух элементов ввода?

К тому же не хочется писать разные процедуры для двух разных элементов ввода, т.е. хотелось бы, чтобы был один метод (функция), но присвоить ее обоим элементам ввода.

Под элементом ввода я подразумеваю uniEdit, просто в браузере это ведь другой тип.

Может есть уже что-то готовое, примеры?

Спасибо.

[zilav]

Унигуи на любой чих типа смены фокуса у контролов или каких-то нажатий пингует сервер, так что я бы сказал ответ никак, хотя возможно я ошибаюсь и Шерзод сейчас закинет классную идею. А вообще то что бы хочешь это скорее в сторону вебкора смотреть надо, там именно как ты хочешь, сервер дергается строго мануально.

[Sherzod]

Я попробую проанализировать.

[Sherzod]

Я вижу несколько способов.

Первый способ:

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniEdit1.JSInterface.JSConfig('allowBlank', [False]);
  UniEdit2.JSInterface.JSConfig('allowBlank', [False]);
  UniButton1.JSInterface.JSAddListener('click', 'function(){return '+ Self.WebForm.JSForm.JSName +'.isValid()}');
end;

Второй способ:

Использовать привязки (bind).

...

[x11]

14 hours ago, Sherzod said:

UniEdit1.JSInterface.JSConfig('allowBlank', [False]);

а к мобильной компоненте это можно применить?

[x11]

14 hours ago, Sherzod said:

Второй способ:

Использовать привязки (bind).

по этому вопросу не нашел никакой информации

[Sherzod]

2 hours ago, x11 said:

а к мобильной компоненте это можно применить?

UnimEdit1.JSInterface.JSConfig('required', [True]);

 

[x11]

Спасибо больше.

А еще подскажите пожалуйста, этот код:

UniButton1.JSInterface.JSAddListener('click', 'function(){return '+ Self.WebForm.JSForm.JSName +'.isValid()}');

для мобильной версии как будет выглядеть?

 

[Sherzod]

2 minutes ago, x11 said:

А еще подскажите пожалуйста, этот код:

UniButton1.JSInterface.JSAddListener('click', 'function(){return '+ Self.WebForm.JSForm.JSName +'.isValid()}');

для мобильной версии как будет выглядеть?

UnimButton5.JSInterface.JSAddListener('tap', 'function(){return '+ Self.WebForm.JSForm.JSName +'.isValid()}');

 

[x11]

 

On 1/8/2021 at 3:01 PM, Sherzod said:

UnimButton5.JSInterface.JSAddListener('tap', 'function(){return '+ Self.WebForm.JSForm.JSName +'.isValid()}');

 

Еще вопрос. А как быть с TitleButtons (TUniButtonItems)?

Возможно ли на кнопку в заголовке мобильной формы повесить такой слушатель (JSAddListener)?

 

[Sherzod]

2 hours ago, x11 said:

А как быть с TitleButtons (TUniButtonItems)?

Возможно ли на кнопку в заголовке мобильной формы повесить такой слушатель (JSAddListener)?

Еще раз уточните пожалуйста.

[x11]

Как повесить проверку не на обычную unimButtom, а на кнопку в заголовке мобильной формы?

допустим, я обозначил, что элемент ввода является обязательным для заполнения

UnimEdit1.JSInterface.JSConfig('required', [True]);

А как запретить пользователю нажимать кнопку в заголовке окна?

 

Ведь вот этот код я не смогу применить к TitleButtons (TUniButtonItems):

UnimButton5.JSInterface.JSAddListener('tap', 'function(){return '+ Self.WebForm.JSForm.JSName +'.isValid()}');

 

[Sherzod]

29 minutes ago, x11 said:

Ведь вот этот код я не смогу применить к TitleButtons (TUniButtonItems):

 

Один из возможных решений:

procedure TMainmForm.UnimFormReady(Sender: TObject);
var
  I: Byte;
begin
  for I := 0 to TitleButtons.Count-1 do
    JSInterface.JSCode(#1'.element.addBeforeListener("tap",function(){return '+Self.WebForm.JSForm.JSName+'.isValid()});', TitleButtons[I].JSMenuItem);
end;

 

[x11]

сейчас попробую

еще раз большое спасибо

[x11]

В общем, этот код не помог.

Но, учитывая тот факт, что у кнопок в заголовке формы нет свойства ModalResult и ModalResult нужно указывать в коде, то я обошелся вот таким кодом:
 

procedure TfmmRefEdit.UnimFormTitleButtonClick(Sender: TUnimTitleButton);
begin
    if Sender.Index = 0 then
  begin
    if Trim(edName.Text).IsEmpty then
    begin
      ShowMessage('ошибка');
      exit;// нельзя закрывать форму
    end;

    ModalResult := mrOk;
  end;

end;

 

[Sherzod]

2 hours ago, x11 said:

В общем, этот код не помог.

Но, учитывая тот факт, что у кнопок в заголовке формы нет свойства ModalResult и ModalResult нужно указывать в коде...

?

 

2 hours ago, x11 said:

то я обошелся вот таким кодом

OK

[x11]

1 minute ago, Sherzod said:

?

У обычной кнопки есть свойство ModalResult, которое может закрыть окно без дополнительного программного кода.

У кнопки TUniButtonItems нету такого свойства, поэтому в любом случае для TitleButton придется писать в коде:

ModalResult := mrOk;

 

Поэтому в данном случае можно перед (ModalResult := mrOk) сделать какую-нибудь дополнительную проверку.

[x11]

On 1/8/2021 at 3:01 PM, Sherzod said:

UnimButton5.JSInterface.JSAddListener('tap', 'function(){return '+ Self.WebForm.JSForm.JSName +'.isValid()}');

 

В этом тестовом проекте не работает, форма UnimForm1 закрывается без лишних вопросов.

Для воспроизведения нажмите кнопку open на главной форме, а в открывшейся форме нажмите Close и форма закроется, хотя поле edName пустое.

uniGUI_SetReq.rar

[Sherzod]

7 minutes ago, x11 said:

В этом тестовом проекте не работает, форма UnimForm1 закрывается без лишних вопросов.

Тогда попробуйте метод validate():

procedure AddCheckValidClick(uniButton: TUniCustomButton);
begin
  (UniButton as TUnimButton).JSInterface.JSAddListener('tap', 'function(){return '+ (UniButton.Owner as TUnimForm).WebForm.JSForm.JSName +'.validate()}')
end;

 

[x11]

1 minute ago, Sherzod said:

validate():

 

спасибо, этот метод работает