Search code examples
formsvuejs3

Why my submit form is not working in Vue3 with BalmUI

I'm trying to make a register page and my sybmit doesn't work. Does anyone know how to fix it? This is my code

<template>
  <div>
    <h1>Register</h1>
    <ui-form
      type="|"
      item-margin-bottom="16"
      action-align="center"
      v-on:submit.prevent="register()"
    >
      <template #default="{ actionClass }">
        <ui-form-field>
          <ui-textfield
            v-model="email"
            required
            helper-text-id="email-field-helper-text"
            input-type="email"
          >
            Email Address
          </ui-textfield>
          <ui-textfield-helper
            v-if="controls.helperText"
            id="email-field-helper-text"
            :visible="controls.isVisible"
          >
            Must be like [email protected]
          </ui-textfield-helper>
        </ui-form-field>
        <ui-form-field>
          <label>Password:</label>
          <ui-textfield
            v-model="password"
            input-type="password"
            required
            pattern=".{8,}"
            helper-text-id="pw-validation-msg"
            :attrs="{ autocomplete: 'current-password' }"
            >Choose password</ui-textfield
          >
          <ui-textfield-helper id="pw-validation-msg" visible validMsg>
            Must be at least 8 characters long
          </ui-textfield-helper>
        </ui-form-field>
        <ui-form-field :class="actionClass">
          <ui-button raised nativeType="submit" type="submit">Submit</ui-button>
          <ui-button outlined>Cancel</ui-button>
        </ui-form-field>
      </template>
    </ui-form>
    <div>
      {{ mesaj }}
    </div>
  </div>
</template>

I've also tried this instead of v-on:submit.prevent="register()" @submit.prevent="register()" or @submit.prevent.native Also, if I put @click=register() on my button it does register all the values, even if they are not valid enter image description here

Solution

  • I've figured it out using validators https://next-material.balmjs.com/#/data-input/validator This is the code:

    <template>
  <div>
    <h1>Register</h1>
    <ui-form type="|" item-margin-bottom="16" action-align="center">
      <template #default="{ actionClass }">
        <ui-form-field>
          <ui-textfield
            v-model="formData.email"
            required
            helper-text-id="email-field-helper-text"
            input-type="email"
          >
            Email address
          </ui-textfield>
          <ui-textfield-helper
            v-if="controls.helperText"
            id="email-field-helper-text"
            :visible="controls.isVisible"
          >
            Must be like [email protected]
          </ui-textfield-helper>
        </ui-form-field>
        <ui-form-field>
          <label>Password:</label>
          <ui-textfield
            v-model="formData.password"
            input-type="password"
            required
            pattern=".{8,}"
            helper-text-id="pw-validation-msg"
            :attrs="{ autocomplete: 'current-password' }"
            >Choose password</ui-textfield
          >
          <ui-textfield-helper id="pw-validation-msg" visible validMsg>
            Must be at least 8 characters long
          </ui-textfield-helper>
        </ui-form-field>
        <ui-alert v-if="message" state="error">{{ message }}</ui-alert>
        <ui-form-field :class="actionClass">
          <ui-button raised @click="register()">Submit</ui-button>
          <ui-button outlined>Cancel</ui-button>
        </ui-form-field>
      </template>
    </ui-form>
    <div>
      {{ mesaj }}
    </div>
  </div>
</template>

<script>
import utils from "../utils.js";
import { useValidator, helpers } from "balm-ui";

const validations = {
  email: {
    label: "Email",
    validator: "required, email",
    email: {
      validate(value) {
        return /^(([^<>()\]\\.,;:\s@"]+(\.[^<>()\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,24}))$/.test(value);
      },
      message: "Email address should be like [email protected]",
    },
  },
  password: {
    label: "Password",
    validator: "required, password, minRule",
    password: {
      validate(value) {
        return /^\w+$/.test(value);
      },
      message: "%s must be a letter, digit or underline",
    },
    minRule: {
      validate(value) {
        return value.trim().length >= 8;
      },
      message: "%s minLength >= 8",
    },
  },
};

export default {
  name: "Register",
  required: {
    validate(value) {
      return !helpers.isEmpty(value);
    },
    message: "%s is required",
  },
  data() {
    return {
      balmUI: useValidator(),
      validations,
      formData: {
        email: "",
        password: "",
      },
      mesaj: "",
      message: "",
      controls: {
        helperText: true,
        isVisible: true,
      },
    };
  },
  methods: {
    register() {
      let result = this.balmUI.validate(this.formData);
      let { valid, message } = result;
      this.message = message;
      console.log(`Vrei sa te inregistrezi cu email: ${this.formData.email}`);
      console.log(utils.url);

      if (valid) {
        let data = {
          email: this.formData.email,
          password: this.formData.password,
        };

        let requestParameters = utils.globalRequestParameters;
        requestParameters.method = "POST";
        requestParameters.body = JSON.stringify(data);

        fetch(utils.url + "user", requestParameters).then((res) => {
          res.text().then((res) => (this.mesaj = res));
        });
      }
    },
  },
};
</script>

<style></style>