• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Facing Error Blocked form submission to '' because the form's frame is sandboxed and the 'allow-form

Community Beginner ,
Mar 18, 2024 Mar 18, 2024

Copy link to clipboard

Copied

Hello,  I am a beginner and I am facing one issue when I used 

@adobe/react-spectrum form or formik.

Does anyone have any idea regarding this?

Thanks in advance.

Here is my code.


 

Formik form example
<form
        onSubmit={(e) => {
          e.preventDefault();
          handleSubmit();
        }}
        noValidate
      >
        <Grid
          areas={["content content", "footer footer"]}
          
          gap="size-100"
        >
          <View gridArea="content">
            <TextField
              label="Title"
              data-testid="title"
              name="title"
              value={values.title}
              onChange={handleChange}
              onBlur={handleBlur}
              isRequired
              // isInvalid={isValid}
              errorMessage={errors.title}
              UNSAFE_className="fullWidth"
            />
            <TextArea
              label="Description"
              name="text"
              value={values.text}
              onChange={handleChange}
              onBlur={handleBlur}
              isRequired
              minLength={10}
              errorMessage={errors.text}
              UNSAFE_className="fullWidth"
            />
          </View>
          <View gridArea="footer">
            <Button
              variant="accent"
              UNSAFE_className="fullWidth"
              style="fill"
              marginBottom={2}
              type="submit"
              onPress={(e: any) => {
                console.log(":rocket: ~ ManageVideo ~ e:", e);

                // e.preventDefault();
              }}
            >
              Generate AI Video
            </Button>
            <Text marginY={25}>
              {`You have ${0} video credits left in Oxolo`}
            </Text>
            <Button
              UNSAFE_className="fullWidth"
              variant="secondary"
              style="fill"
              onPress={() => {
                handleLogout();
              }}
            >
              Sign out
            </Button>
          </View>

          {/* <Flex direction="row" height="size-800" gap="size-100">
          <View backgroundColor="celery-600" width="size-800" />
          <View backgroundColor="blue-600" width="size-800" />
        </Flex> */}
        </Grid>
      </form>

Normal form

<Form validationBehavior="native" maxWidth="size-3000">
        <TextField label="Email" name="email" type="email" isRequired />
        <ButtonGroup>
          <Button type="submit" variant="primary">
            Submit
          </Button>
          <Button type="reset" variant="secondary">
            Reset
          </Button>
        </ButtonGroup>
      </Form>

 

TOPICS
Add-ons , Quick Actions

Views

119

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Apr 02, 2024 Apr 02, 2024

Copy link to clipboard

Copied

LATEST

Hey @Mitul3614972899t8! Could you please share more info around which APIs your add-on is using? E.g. Document API, Communication API, etc. 

 

Also apologies for the slow response. Here are some additional places where you can receive support from the Adobe Express add-ons team:

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines