[8.16] [Search][a11y] Add validation to extraction rules form (#202980) (#205191)

# Backport

This will backport the following commits from `main` to `8.16`:
- [[Search][a11y] Add validation to extraction rules form
(#202980)](https://github.com/elastic/kibana/pull/202980)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Navarone
Feekery","email":"13634519+navarone-feekery@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-12-27T11:22:19Z","message":"[Search][a11y]
Add validation to extraction rules form (#202980)\n\n## Closes:
https://github.com/elastic/kibana/issues/199154\r\n\r\nThis adds more
validations to the Crawler extraction rules form.\r\n\r\nThe original
issue of the error being at the top of the page is not\r\neasily
fixable, as it's a catch-all server error display. Ideally,
we\r\nshouldn't have server errors occurring at all, so it makes sense
to me\r\nto just add a front-end validation to the inputs in this
field.\r\n\r\nThese validations cover the following previously-missed
scenarios:\r\n\r\n1. When a user has not added any rules\r\n2. When rule
is for a specific URL and the URL pattern field is empty,\r\nor doesn't
begin with `/`\r\n3. When the value for \"Source\" is empty (covers both
HTML element and\r\nURL selectors)\r\n4. When \"Content\" is \"A fixed
value\" and the value field is
empty","sha":"9865da3844674e560e9f87c07ce65ad025afb12f","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Search","backport:prev-major"],"title":"[Search][a11y]
Add validation to extraction rules
form","number":202980,"url":"https://github.com/elastic/kibana/pull/202980","mergeCommit":{"message":"[Search][a11y]
Add validation to extraction rules form (#202980)\n\n## Closes:
https://github.com/elastic/kibana/issues/199154\r\n\r\nThis adds more
validations to the Crawler extraction rules form.\r\n\r\nThe original
issue of the error being at the top of the page is not\r\neasily
fixable, as it's a catch-all server error display. Ideally,
we\r\nshouldn't have server errors occurring at all, so it makes sense
to me\r\nto just add a front-end validation to the inputs in this
field.\r\n\r\nThese validations cover the following previously-missed
scenarios:\r\n\r\n1. When a user has not added any rules\r\n2. When rule
is for a specific URL and the URL pattern field is empty,\r\nor doesn't
begin with `/`\r\n3. When the value for \"Source\" is empty (covers both
HTML element and\r\nURL selectors)\r\n4. When \"Content\" is \"A fixed
value\" and the value field is
empty","sha":"9865da3844674e560e9f87c07ce65ad025afb12f"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/202980","number":202980,"mergeCommit":{"message":"[Search][a11y]
Add validation to extraction rules form (#202980)\n\n## Closes:
https://github.com/elastic/kibana/issues/199154\r\n\r\nThis adds more
validations to the Crawler extraction rules form.\r\n\r\nThe original
issue of the error being at the top of the page is not\r\neasily
fixable, as it's a catch-all server error display. Ideally,
we\r\nshouldn't have server errors occurring at all, so it makes sense
to me\r\nto just add a front-end validation to the inputs in this
field.\r\n\r\nThese validations cover the following previously-missed
scenarios:\r\n\r\n1. When a user has not added any rules\r\n2. When rule
is for a specific URL and the URL pattern field is empty,\r\nor doesn't
begin with `/`\r\n3. When the value for \"Source\" is empty (covers both
HTML element and\r\nURL selectors)\r\n4. When \"Content\" is \"A fixed
value\" and the value field is
empty","sha":"9865da3844674e560e9f87c07ce65ad025afb12f"}}]}] BACKPORT-->

Co-authored-by: Navarone Feekery <13634519+navarone-feekery@users.noreply.github.com>

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/crawler_domain_detail/extraction_rules/edit_extraction_rule.tsx

@@ -298,9 +298,34 @@ export const EditExtractionRule: React.FC<EditExtractionRuleProps> = ({
                   <Controller
                     control={control}
                     name={`url_filters.${index}.pattern`}
-                    render={({ field }) => (
+                    rules={{
+                      validate: (rule) => {
+                        if (!rule?.trim()) {
+                          return i18n.translate(
+                            'xpack.enterpriseSearch.content.indices.extractionRules.editContentField.fieldInput.requiredError',
+                            {
+                              defaultMessage: 'A value is required.',
+                            }
+                          );
+                        }
+
+                        if (rule[0] !== '/') {
+                          return i18n.translate(
+                            'xpack.enterpriseSearch.content.indices.extractionRules.editContentField.fieldInput.slashMissingError',
+                            {
+                              defaultMessage: 'Value must begin with a /.',
+                            }
+                          );
+                        }
+
+                        return true;
+                      },
+                    }}
+                    render={({ field, fieldState: { error, isTouched } }) => (
                       <>
                         <EuiFormRow
+                          isInvalid={!!error && isTouched}
+                          error={error?.message}
                           label={i18n.translate(
                             'xpack.enterpriseSearch.content.indices.extractionRules.editRule.url.urlFilter.',
                             {
@@ -311,6 +336,7 @@ export const EditExtractionRule: React.FC<EditExtractionRuleProps> = ({
                           <EuiFieldText
                             data-telemetry-id="entSearchContent-crawler-domainDetail-extractionRules-urlPattern"
                             fullWidth
+                            isInvalid={!!error && isTouched}
                             placeholder={i18n.translate(
                               'xpack.enterpriseSearch.content.indices.extractionRules.editRule.url.urlFilters.patternPlaceholder',
                               {
@@ -414,7 +440,7 @@ export const EditExtractionRule: React.FC<EditExtractionRuleProps> = ({
                 data-telemetry-id="entSearchContent-crawler-domainDetail-extractionRules-saveExtractionRule"
                 type="submit"
                 onClick={() => saveRule({ ...getValues() })}
-                disabled={!formState.isValid}
+                disabled={!formState.isValid || !rulesFields || rulesFields.length === 0}
               >
                 {i18n.translate(
                   'xpack.enterpriseSearch.content.indices.extractionRules.editRule.saveButtonLabel',

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/crawler_domain_detail/extraction_rules/edit_field_rule_flyout.tsx

@@ -227,28 +227,39 @@ export const EditFieldRuleFlyout: React.FC<EditFieldRuleFlyoutProps> = ({
                   {!!field.value && (
                     <>
                       <EuiSpacer />
-                      <EuiFormRow
-                        fullWidth
-                        label={
-                          field.value === FieldType.HTML
-                            ? i18n.translate(
-                                'xpack.enterpriseSearch.content.indices.extractionRules.editContentField.content.htmlLabel',
-                                {
-                                  defaultMessage: 'CSS selector or XPath expression',
-                                }
-                              )
-                            : i18n.translate(
-                                'xpack.enterpriseSearch.content.indices.extractionRules.editContentField.content.urlLabel',
-                                {
-                                  defaultMessage: 'URL pattern',
-                                }
-                              )
-                        }
-                      >
-                        <Controller
-                          control={control}
-                          name="selector"
-                          render={({ field: selectorField, fieldState: { error, isTouched } }) => (
+                      <Controller
+                        control={control}
+                        name="selector"
+                        rules={{
+                          validate: (rule) =>
+                            !!rule?.trim() ||
+                            i18n.translate(
+                              'xpack.enterpriseSearch.content.indices.extractionRules.editContentField.fieldInput.requiredError',
+                              {
+                                defaultMessage: 'A value is required.',
+                              }
+                            ),
+                        }}
+                        render={({ field: selectorField, fieldState: { error, isTouched } }) => (
+                          <EuiFormRow
+                            isInvalid={!!error && isTouched}
+                            error={error?.message}
+                            label={
+                              field.value === FieldType.HTML
+                                ? i18n.translate(
+                                    'xpack.enterpriseSearch.content.indices.extractionRules.editContentField.content.htmlLabel',
+                                    {
+                                      defaultMessage: 'CSS selector or XPath expression',
+                                    }
+                                  )
+                                : i18n.translate(
+                                    'xpack.enterpriseSearch.content.indices.extractionRules.editContentField.content.urlLabel',
+                                    {
+                                      defaultMessage: 'URL pattern',
+                                    }
+                                  )
+                            }
+                          >
                             <EuiFieldText
                               data-telemetry-id="entSearchContent-crawler-domainDetail-extractionRules-editContentRuleSelector"
                               isInvalid={!!error && isTouched}
@@ -273,9 +284,9 @@ export const EditFieldRuleFlyout: React.FC<EditFieldRuleFlyoutProps> = ({
                               onChange={selectorField.onChange}
                               value={selectorField.value ?? ''}
                             />
-                          )}
-                        />
-                      </EuiFormRow>
+                          </EuiFormRow>
+                        )}
+                      />
                       <EuiSpacer />
                       {field.value === FieldType.HTML ? (
                         <EuiLink
@@ -443,8 +454,23 @@ export const EditFieldRuleFlyout: React.FC<EditFieldRuleFlyoutProps> = ({
                         <Controller
                           control={control}
                           name="content_from.value"
-                          render={({ field: valueField }) => (
+                          rules={{
+                            validate: (rule) =>
+                              !!rule?.trim() ||
+                              i18n.translate(
+                                'xpack.enterpriseSearch.content.indices.extractionRules.editContentField.contentFixedValue.requiredError',
+                                {
+                                  defaultMessage: 'A value is required',
+                                }
+                              ),
+                          }}
+                          render={({
+                            field: valueField,
+                            fieldState: { error: fieldError, isTouched: fieldIsTouched },
+                          }) => (
                             <EuiFormRow
+                              isInvalid={!!fieldError && fieldIsTouched}
+                              error={fieldError?.message}
                               helpText={i18n.translate(
                                 'xpack.enterpriseSearch.content.indices.extractionRules.editContentField.fixedValue.helpText',
                                 {
@@ -461,6 +487,7 @@ export const EditFieldRuleFlyout: React.FC<EditFieldRuleFlyoutProps> = ({
                               <EuiFieldText
                                 data-telemetry-id="entSearchContent-crawler-domainDetail-extractionRules-editContentRuleFixedValue"
                                 fullWidth
+                                isInvalid={!!fieldError && fieldIsTouched}
                                 placeholder={i18n.translate(
                                   'xpack.enterpriseSearch.content.indices.extractionRules.editContentField.fixedValue.placeHolder',
                                   {