Svelte - 表单提交和操作

Question

我正在尝试使用 svelte 和 yup 提交表单。 每当提交表单时，必须将信息发送到表单的操作部分（cgi-bin 文件夹上的 CGI）。出于调试目的，它现在已被 stackoverflow url 替换。

<script>
    import { createForm } from 'svelte-forms-lib';
    import * as yup from "yup";
    const phoneRegExp = /^(?:(?:\+|00)32[\s.-]{0,3}(?:\(0\)[\s.-]{0,3})?|0)((?:(?:[\s.-]?\d{2}){1})|(?:(?:[\s.-]?\d{3}){1}))((?:[\s.-]?\d{2}){3}|(?:[\s.-]?\d{3}){2})$/

    const { form, errors, state,touched,isValid,isSubmitting,isValidating, handleChange, handleSubmit } = createForm({
      initialValues: {
        name: '',
         email: '',
         phone: '',
         availability: ' ',
        vieprivee: false, 
      },
      validationSchema: yup.object().shape({
        name: yup
          .string()
          .required("Name is required")
          .min(3, "Name is too short"),
        email: yup
          .string()
          .email("Format is invalid")
          .when('phone',{
            is:(phone) => !phone || phone.length ===0,
            then: yup.string().email().required().default(''),
            otherwise:yup.string().default('')
          }),
        phone: yup
          .string()
          .when('email',{
            is:(email) => !email || email.length === 0,
            then: yup
            .string()
            .matches(phoneRegExp, "Format is invalid")
            .required()
            .default(''),
            otherwise: yup.string().default('')
          }),
        vieprivee: yup
          .bool()
          .required("Consent is required")
          .oneOf([true],"Consent is required"),
        availability: yup
          .mixed()
          .notRequired()
          .default(" "),
      },[['email','phone']]),
      validate: (values) => {
      alert(JSON.stringify(values));
      }

      onSubmit: values => {

        alert(JSON.stringify(values));
      }
    });
  </script>

  <style>
    .hide { position:absolute; top:-1px; left:-1px; width:1px; height:1px; }
  </style>
  <iframe name="hiddenFrame" class="hide"></iframe>


<form  action="http://stackoverflow.com"  target="hiddenFrame" id="formContact" on:submit={handleSubmit} class:valid={$isValid}>
  <!-- action="./cgi-bin/feedback_form.cgi" method="post"  -->
  <div id="veterinexpowin" />
  <label for="name">Name</label>
  <input
    id="name"
    name="name"
    on:keyup={handleChange}
    on:blur={handleChange}
    bind:value={$form.name} />
  {#if $errors.name && $touched.name}<small>{$errors.name}</small>{/if}

  <label for="phone">Phone</label>
  <input
    id="phone"
    name="phone"
    on:keyup={handleChange}
    on:blur={handleChange}
    bind:value={$form.phone} />
  {#if $errors.phone && $touched.phone}<small>{$errors.phone}</small>{/if}

  <label for="email">Email</label>
  <input
    id="email"
    name="email"
    on:keyup={handleChange}
    on:blur={handleChange}
    bind:value={$form.email} />
    {#if $errors.email && $touched.email}<small>{$errors.email}</small>{/if}

  
  <label for="availability">Comments / Availability</label>
  <textarea
    id="availability"
    name="availability"
    on:keyup={handleChange}
    on:blur={handleChange}
    bind:value={$form.availability} />
    {#if $errors.availability && $touched.availability}<small>{$errors.availability}</small>{/if}
    <br>
    
    <input 
      type="checkbox" 
      id="vieprivee" 
      name="vieprivee" 
      class="checkboxvieprivee"
      on:change={handleChange}
      on:blur={handleChange}
      bind:value={$form.vieprivee}/>
      <label for="vieprivee"><span class="spanvieprivee">I read and understand the  <a href="PolitiqueViePriveeByVets.pdf" target="_blank"> GDPR</a>  <br/>
        and I accept it.</span></label>
      {#if $errors.vieprivee}<small>{$errors.vieprivee}</small>{/if}
      
      <button 
        id="contactButton" 
        type="submit" 
        class="contactButton" 
        disabled={!$isValid}
        value="Submit">
        Send
      </button>
    
</form>

• 第一个字段是名称，是必需的。
• 第二个字段是电话，只有在第三个字段（邮件）没有填写时才需要。
• 第三个字段用于邮件。仅当第二个字段（电话）未填写时才需要。
• 第四个字段用于 cmets 或可用性。这不是强制性的。
• 最后一个字段是一个复选框。必须选中它才能提交表单。

我的错误是未触发该操作。 我不确定如何调试它。

感谢您的帮助

Answer 1

所以在玩弄了“on:submit”标签之后，我发现只将 handleSubmit 留在按钮中是有效的。并按预期调用我的 CGI。