fix: JSONForm input field REGEX validation (#15316)

* fix: JSONForm input field REGEX validation

* fix cypress test

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/JSONFormWidget/JSONForm_FieldProperties_spec.js

@@ -64,6 +64,11 @@ describe("Text Field Property Control", () => {
     cy.testJsontext("errormessage", "Custom error message");
     cy.get(`${fieldPrefix}-name input`).click({ force: true });
     cy.get(".bp3-popover-content").contains("Custom error message");
+
+    // Reset the error message
+    cy.testJsontext("errormessage", "");
+    // Reset valid
+    cy.testJsontext("valid", "");
   });
 
   it("hides field when visible switched off", () => {
@@ -82,6 +87,19 @@ describe("Text Field Property Control", () => {
 
     cy.togglebarDisable(`.t--property-control-disabled input`);
   });
+
+  it("throws error when REGEX does not match the input value", () => {
+    cy.testJsontext("regex", "^\\d+$");
+    cy.get(`${fieldPrefix}-name input`)
+      .clear()
+      .type("abcd");
+    cy.get(".bp3-popover-content").contains("Invalid input");
+
+    cy.get(`${fieldPrefix}-name input`)
+      .clear()
+      .type("1234");
+    cy.get(".bp3-popover-content").should("not.exist");
+  });
 });
 
 describe("Checkbox Field Property Control", () => {

app/client/src/components/propertyControls/JSONFormComputeControl.tsx

@@ -181,6 +181,8 @@ class JSONFormComputeControl extends BaseControl<JSONFormComputeControlProps> {
     propertyValue: string,
     widgetName: string,
   ) => {
+    if (!isDynamicValue(propertyValue)) return propertyValue;
+
     const { prefixTemplate, suffixTemplate } = getBindingTemplate(widgetName);
 
     const value = propertyValue.substring(
@@ -193,6 +195,22 @@ class JSONFormComputeControl extends BaseControl<JSONFormComputeControlProps> {
 
   getComputedValue = (value: string) => {
     const { widgetName } = this.props.widgetProperties;
+
+    /**
+     * If the input value is not a binding then there is no need of adding binding template
+     * to the value as it would be of no use.
+     *
+     * Original motivation of doing this to allow REGEX to work. If the value is REGEX, eg - ^\d+$ and the
+     * binding template is added, the REGEX is processed by evaluation and the "\" is considered as a escape and
+     * is removed from the final value and the regex become ^d+$. In order to make it work inside a binding the "\"
+     * has to be escaped by doing ^\\d+$.
+     * As the user is unaware of this binding template being added under the hood, it is not obvious for the user
+     * to escape the "\".
+     * Thus now we only add the binding template around a value only if the original value has a binding as that could
+     * be an indication of the usage of formData/sourceData/fieldState in the value.
+     */
+    if (!isDynamicValue(value)) return value;
+
     const stringToEvaluate = stringToJS(value);
     const { prefixTemplate, suffixTemplate } = getBindingTemplate(widgetName);