sending an email address with axios within Vue.Js component to a laravel backend is failing

Question

I am trying to make a vue component that checks if a given input is available or not in the database. The calls to the server i am doing with axios inside the vue component. for some reason, when i type the @ symbol in the email, it breaks.here is my code so far:

this is the backend.

class TestController extends Controller
{

    public function verifyName($name){

        if (request()->wantsJson()){

            $names=User::where('name', $name)->count();
            if ($names>0)
                return 1;
            if ($names==0)
                return 0;
        }
    }

    public function verifyEmail($email){

        if (request()->wantsJson()){
            $emails=User::where('email', $email)->count();
            if ($emails>0)
                return 1;
            if ($emails==0)
                return 0;
        }
    }


}

here is the vue script:

<script>
    export default {

        data(){
            return{
                name: '',
                email: '',
                nameTaken: false,
                emailTaken: false,
                nameAvailable:false,
                emailAvailable:false,
                nameIsTooShort:false

            }
        },
        methods:{
            verifyName(){
                axios.get('/verify/'+this.name)
                     .then((response) => {
                       if (response.data){
                           this.nameTaken=true;
                           this.nameAvailable=false
                       }
                       if(!response.data){
                           this.nameTaken = false;
                           this.nameAvailable=true
                       }
                    });
            },

            verifyEmail(){
                axios.get('/verify/'+this.email)
                    .then((response) => {
                        if (response.data){
                            this.emailTaken=true;
                            this.emailAvailable=false

                        }
                        if(!response.data){
                            this.emailTaken = false;
                            this.emailAvailable=true
                        }
                    });
            }

        }
    }
</script>

and here are my routes:

Route::get('/verify/{name}','TestController@verifyName');
Route::get('/verify/{email}','TestController@verifyEmail');

and here is a small gif to show it.

as requested, here is the html part where i show the message.

   <div class="field-body">
    <div class="field">
           <p class="control">
          <input class="input" id="email" type="email" name="email" value="{{ old('email') }}" v-model="email"  @change="verifyEmail">
         <div class="help is-danger" v-show="emailTaken" v-cloak>This e mail is taken</div>
        <div class="help is-success" v-show="emailAvailable" v-cloak>Great. this email is available</div>
     </p>
 </div>
 </div>

Thanks.

can you send that as **POST** because probably get will urlencode the **@** in the **GET** — BM2ilabs, Jan 06 '18 at 11:41
And you can check with form request rules is much better using Unique — BM2ilabs, Jan 06 '18 at 11:43

score 0 · Answer 1 · answered Jan 06 '18 at 12:24

Try using laravel's validator instead.

One way to go about it, in your "App\Http\Controllers\Auth\RegisterController"

use Illuminate\Support\Facades\Validator; 

protected function validator(array $data)
{
    return Validator::make($data, [
        'name'              => 'required|string|max:255|unique:users',
        'email'             => 'required|string|email|unique:users',
        'password'          => 'required|string|min:6|confirmed',
    ]);
}

Make note of the unique:xxxxx rule where xxxxx is your table. https://laravel.com/docs/5.5/validation

If the email or name is not unique the validator will return the error response. So you would use it at the beginning of your register function.

public function register(Request $request)
{
    $this->validator($request->all())->validate();

    // rest of registration routine here....
}

score 0 · Answer 2 · answered Jan 06 '18 at 20:53

0

I think its happens because of you are using "@" symbol in url string. This is reserved character. (Which characters make a URL invalid?) Solution: send email to verification on server in json body of post request.

answered Jan 06 '18 at 20:53

FoxPro

2,054
4
11
34

sending an email address with axios within Vue.Js component to a laravel backend is failing

2 Answers2