WebHTMLForm with TWEBEidt set to required


I need to ensure my contact form has all the fields filled in.
I have set to required and moved the responsiveGridPanel that contains the TWEdits into a TWebHTMLForm as per the docs.

When true, the content of the TWebEdit
being empty will cause a validation popup
when used on a TWebHTMLForm.

It is not working as is. What do I have to change to ensure the required is used on a button click ?

Do you see the 'required' attribute on the HTML input element? Is the button on the TWebHTMLForm?

I have required enabled on all the TWebEdits and the above structure.

WebHTMLForm - WebResponsiveGridPanel2 - TwebEdits

I asked if you see 'required' attribute on the HTML INPUT element in the DOM

Yes I see the required on the input type="test"
The button is on the WebResponsiveGridPanel which is on the TWebHTMLForm.

I moved the button directly on the TWebHTMLForm but the same issue.

For the button from where the validation is supposed to happen, do you set WebButton.ButtonType = 'submit'?

I have changed it to submit ( no drop down so typed lowercase ).

Still no popup.

procedure TForm7.webButtonSubmitClick(Sender: TObject);
requestType,firstName,surname,street,town,state,zip,mobile,email,experience, urlData : string;

      requestType := WebComboBoxrequestType.Text;
      firstName := webEditFirstName.Text;
      surname := webEditSurname.Text;
      street := webEditStreet.Text;
      town := webEditTown.Text;
      state := webEditState.Text;
      zip := webEditZip.Text;
      mobile := webEditMobile.Text;
      email  := webEditEmail.Text;
      experience := webMemoExperience.Text;
      urlData :=  ''+requestType+ '&firstName='+ firstName+ '&surname='+ surname+ '&street='+ street+ '&town='+ town+ '&state='+ state+ '&zip='+ zip+ '&mobile='+ mobile+ '&email='+ email+ '&experience='+ encodeURIComponent(experience);
      WebHttpRequestSendJobEnquiry.URL := urlData;
procedure TForm7.WebHttpRequestSendJobEnquiryRequestResponse(Sender: TObject;
  ARequest: TJSXMLHttpRequestRecord; AResponse: string);
      ShowMessage('Retrieved items:' +AResponse);

Running Locally:
If I fill all the edit fields and click the button the request is sent ( data populated in the database ) but no RequestResponse and the edits are all cleared.
If I leave some fields empty and click the button the request is sent ( data populated in the database ) I get RequestResponse and the edits are all not cleared.
Running on server TMS Web Project the required is working ( ie the error message pops up to fill the field) but the post itself fails.

  1. Browser based validation will NOT prevent that the code in the submit button click event is executed.
  2. The validation hint is shown here. Sample project attached.
    Project1.zip (5.3 KB)