[Vuejs]-Sending PHP post form and working with Vue.js only for "real-time" field validation

by

2👍

✅

The issue is you don’t give your input a name. So your if if(!empty($_POST['name'])) will never do anything.

If you add name="name" to your b-form-input it should work.

Snippet i used to test with locally that works.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>

  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
</head>

<body>
  <?php
  if (!empty($_POST['name'])) {
    echo "Form submitted";
  }
  ?>

  <form method="POST">
    <div id="app">
      <b-container>
        <b-form-group horizontal :label-cols="4" description="Let us know your name." label="Enter your name">
          <b-form-input name="name" id="input-live" v-model="name" :state="nameState" aria-describedby="input-live-help input-live-feedback" placeholder="Enter your name" trim>
          </b-form-input>
          <b-form-invalid-feedback id="input-live-feedback">
            Enter at least 3 letters (english only)
          </b-form-invalid-feedback>
        </b-form-group>
      </b-container>
    </div>
    <input type="submit">
  </form>

  <!-- Required scripts -->
  <script src="//unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <script>
    window.app = new Vue({
      el: '#app',
      computed: {
        nameState() {
          return this.name.length > 3 ? true : false;
        }
      },
      data() {
        return {
          name: ''
        }
      }
    });
  </script>
</body>

</html>

0👍

This should work as you expect. I created a jsfiddle with your code, but changed two things:

  1. You have defined data two times, in different forms, so I removed one of them
  2. I have placed the script tags above the vue script tag, as it caused errors. Have you checked your js console?
  3. I’ve put a return true in the nameState function

Now it just submits the form to https://google.com

I suspect that something goes wrong in your validation function, and after that it will not submit the form, because something blocked it.

Make sure you inspect your js console, as I believe something goes wrong in your validate call.

https://jsfiddle.net/1tz9wb7e/2/

Leave a comment