Why is the form data not validated by the front-end?

Question

I work on an application, I have to manage the frontend part with vue.js and the backend part with express.js and MySQL.

I need to handle requests in VueJS: Fetch API.

The page in question is the registration.

I want The form data will be validated by the front-end before being sent to the back-end.

Code :

<script>
export default {
  name: "FormSuscribe",

  data() {
    return {
      first_name: "",
      email: "",
      password_key: "",
    };
  },

  methods: {
    signup() {
      fetch("http://localhost:3000/api/auth/signup", {
        method: "POST",
        //--Header--//
        headers: {
          Authorization: "Bearer ",
          Accept: "application/json",
          "Content-Type": "application/json",
        },
        //---Body--//
        body: JSON.stringify({
          name: this.name,
          email: this.email,
          password: this.password,
        }),
      });
    },
  },
};
</script>

<template>
  <main>
    <section class="form my-4 mx-5">
      <div class="container">
        <div class="row">
          <div class="col-lg-5 g-0">
            <img
              src="@/assets/signup-image.jpg"
              class="img-fluid first-img"
              alt="Office"
            />
          </div>
          <div class="col-lg-7 px-5 pt-5">
         

            <form method="post" @submit="signup">
              <div class="form-row">
                <div class="col">
                  <input
                    id="first_name"
                    name="username"
                    placeholder="Nom"
                    class="my-3 p-2"
                    v-model="first_name"
                  />
                </div>
              </div>
              <div class="form-row">
                <div class="col">
                  <input
                    type="email"
                    id="email"
                    name="email"
                    class="form-group my-3 p-2"
                    placeholder="sarah@gmail.com"
                    v-model="email"
                  />
                </div>
              </div>

              <div class="form-row">
                <div class="col">
                  <input
                    type="password"
                    id="password"
                    name="password"
                    placeholder="**********"
                    class="my-3 p-2"
                    v-model="password_key"
                  />
                </div>
              </div>

              <div class="form-row">
                <div class="col-lg-4">
                  <button type="button" class="btn fw-bold">register</button>
                  <a href="">Forgot password</a>
                  <p>
                    You already have an account <a href="#">Connect</a>
                  </p>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>

    <div class="container text-center">
      <img
        src="@/assets/icon-left-font-black.webp"
        class="img-fluid col-lg-2 col-sm-2"
        alt="Brand "
      />
    </div>
  </main>
</template>

Unclear what you want to achieve. Can you please elaborate the problem statement. — Debug Diva, Mar 13 '22 at 15:08
@CreativeLearner Sorry, Yes I just re-read myself and changed the description. — , Mar 13 '22 at 15:35
What type of validation you want to achieve ? For Ex: required field validation or any other like pattern match ? — Debug Diva, Mar 13 '22 at 15:37
You have not added any validation at all, that's why is not validating. If you want built-in html5 validation, try adding a `required` attribute to the input fields you want to be validated — gugateider, Mar 13 '22 at 15:38
How do you want it validated? Are you trying to make sure that the credentials are correct and that the user can log in? I'd suggest putting some simple validation in the front-end just to make sure the `first_name`, `email`, and `password_key` are not empty strings and that the `email` is validated by some simple email regex comparison. [Here's some interesting reading on email & regex comparison](https://stackoverflow.com/questions/201323/how-can-i-validate-an-email-address-using-a-regular-expression) — Willey Ohana, Mar 13 '22 at 15:41
@CreativeLearner okay I see, In the signup function in the if condition I will introduce an API call and else for error.I will try to solve the problem. — , Mar 13 '22 at 16:18
@CreativeLearnerThe test with the console.log at b function, I also realized that the problem came from my html structure, the script could not interact with the form. — , Mar 13 '22 at 16:55
@Studentweb I added an answer. Hope that will work as per your requirement which is validating the fields before making an API call. — Debug Diva, Mar 13 '22 at 17:12

Debug Diva · Answer 1 · 2022-03-13T15:50:46.793

In signup() method before making an API call, you can check for the required fields. If there is no data in the fields don't make an API call.

For Ex :

signup() {
  if (this.first_name && this.email && this.password_key) {
    // Make an API call
  } else {
    // Show error messages for each field validity.
  }
}

You can also use HTML5 required attribute if you are only looking for the required field validation.

Demo :

new Vue({
  el: '#app',
  data: {
    first_name: '',
    email: '',
    password_key: ''
  },
  methods: {
    signup() {
        console.log('form submitted!');
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <form @submit="signup">
    First Name :<input type="text" v-model="first_name" required/><br>
    Email :<input type="text" v-model="email" required/><br>
    Password :<input type="password" v-model="password_key" required/><br>
    <button type="submit">Submit</button>
  </form>
</div>

score 0 · Answer 2 · answered Mar 14 '22 at 09:27

0

You can use vee-validate package to validate you data in front end part

here is an example :

https://codesandbox.io/s/y3504yr0l1?initialpath=%2F%23%2Fform&module=%2Fsrc%2Fcomponents%2FForm.vue

answered Mar 14 '22 at 09:27

Salma EL HAJRAOUI

166
1
1
9

Why is the form data not validated by the front-end?

2 Answers2