I am trying to reuse laravel's default authentication components in livewire component. But when the login form is submitting I am getting a console error
wire-directives.js:86 Uncaught TypeError: Cannot read properties of
null (reading 'match')
The login form working perfectly fine when I am using the default login blade. But when I am reusing the login form in my livewire component, it is not working. Here is my code:
In my livewire component, I have this
<div>
<x-login-form/>
</div>
and the login form component is laravels default login form:
<form role="form" class="text-start" method="POST" action="{{ route('login') }}">
#csrf
<div class="input-group input-group-outline my-3">
<input type="email" id="email" class="form-control" name="email" :value="old('email')" required placeholder="email">
</div>
<div class="input-group input-group-outline mb-3">
<input type="password" class="form-control" id="password" type="password" name="password" required autocomplete="current-password" placeholder="password">
</div>
<div class="form-check form-switch d-flex align-items-center mb-3">
<input class="form-check-input" type="checkbox" id="remember_me" name="remember">
<label class="form-check-label mb-0 ms-2" for="rememberMe">Remember Me</label>
</div>
<div class="text-center">
<button type="submit" class="btn bg-gradient-primary w-100 my-4 mb-2">Sign In</button>
</div>
#if (Route::has('password.request'))
<p class="text-xs text-center">
Forgot your password?
</p>
#endif
</form>
Related
I'm trying to use Recaptcha v3 on my form but submitting the form only works when Recaptcha is removed.
When Recaptcha is enabled, I can click on the submit button but nothing happens. I don't even get an error message in the console even though I can see the protected by reCAPTCHA logo in the frontend on the bottom right.
I'm using Laravel 6.
My form template looks like this:
<div class="row mt-150">
<div class="col-12 text-center text-white">
<h1>Contact</h1>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-4 col-sm-12">
<form action="{{route('contact_form')}}" method="POST">
#csrf
<div class="form-group">
<label for="email" class="text-white">Email address</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="textarea" class="text-white">Message</label>
<textarea class="form-control" id="textarea" rows="3" name="message" required></textarea>
</div>
<input type="submit"
id="submitButton"
class="g-recaptcha btn btn-primary"
data-sitekey="MY-PUBLIC-KEY"
data-callback='onSubmit'
data-action='submit'
name="submit">
</form>
</div>
</div>
<script src="https://www.google.com/recaptcha/api.js"></script>
There is also an app.js included which contains the captcha callback function:
function onSubmit(token) {
document.getElementById("submitButton").submit();
}
window.onSubmit = onSubmit;
Can someone give me a hint what I'm doing wrong implementing recaptcha?
I tried to do it just like this:
Google reCaptcha v3
This will not work because you are trying to trigger submit() on a button. Give the form an id and then trigger submit() on the form
<form action="{{route('contact_form')}}" method="POST" id="contactForm">
#csrf
<div class="form-group">
<label for="email" class="text-white">Email address</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="textarea" class="text-white">Message</label>
<textarea class="form-control" id="textarea" rows="3" name="message" required></textarea>
</div>
<input type="submit"
id="submitButton"
class="g-recaptcha btn btn-primary"
data-sitekey="MY-PUBLIC-KEY"
data-callback='onSubmit'
data-action='submit'
name="submit">
</form>
Then in javascript get the form and trigger submit on it
function onSubmit(token) {
document.getElementById("contactForm").submit();
}
window.onSubmit = onSubmit;
I'm using blade templates and this is how my form looks:
<form action="{{ route("user-sessions.store") }}" method="POST">
#csrf
<div class="form-group">
<label for="e-mail">E-mail Address</label>
<input name="email_address" class="form-control" type="email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input name="password" class="form-control" type="password" />
</div>
<div class="form-group">
<input class="btn btn-primary" type="submit" />
</div>
</form>
Does back()->withInput() only work with {{ Form::open() }}? If so, the 7.x documentation doesn't say that it seems. I would think if you need a 3rd party library to get this to work, the documentation should say so. If that's not the issue, then what am I doing wrong?
I'm using Laravel 7.x.
if you use html collective, it automatically puts old values in form inputs. But when use pure html to create form inputs you have to use old method for input values. like this:
<form action="{{ route("user-sessions.store") }}" method="POST">
#csrf
<div class="form-group">
<label for="e-mail">E-mail Address</label>
<input name="email_address" class="form-control" type="email" value="{{old('email_address')}}"/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input name="password" class="form-control" type="password" value="{{old('password')}}"/>
</div>
<div class="form-group">
<input class="btn btn-primary" type="submit" />
</div>
</form>
I have a comment form in a page when I submit this form it's redirecting to the home page.
Routes
Route::get('/post/{slug}', 'API\PostController#show')->name('post.show');
Route::post('/post/{slug}', 'API\PostController#addComment')->name('post.comment');
Route::get('{path}',"HomeController#index")->where( 'path', '([A-z\d-\/_.]+)?' );
Blade
<form action="{{route('post.comment',$currentPost->slug)}}" method="POST">
<div class=" row blog-form">
{{csrf_field()}}
<div class="frm_grp col-md-6">
<input type="text" name="name" placeholder="Name"/>
</div>
<div class="frm_grp col-md-6">
<input type="text" name="email" placeholder="Email"/>
</div>
<div class="frm_grp col-md-12">
<input type="text" name="website" placeholder="Website"/>
</div>
<div class="frm_grp col-md-12">
<textarea name="message" placeholder="Message"></textarea>
</div>
<div class="frm_grp col-md-12">
<input type="submit" value="Post Comment"/>
</div>
</div>
</form>
I am working on a login for my website. I added my form below. I activated the login route with Auth::routes();. With php artisan route:list I can see my route as well. But the problem is that every time I try to login, the login page just refreshes. How can I find out what is going wrong, is there a way to get a response from my post request in order to get some debug info? Any help is welcome!
<div class="main-div">
<div class="panel">
<h2>Hello</h2>
</div>
<form id="Login" role="form" method="POST" action="/login">
<input type="hidden" name="_token" :value="csrf_token">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Email Address">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="forgot">
Forgot password?
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
Below is my form code
<div class="row">
<div class="form-group col-sm-12">
<input type="text" name="name" class="form-control" id="name" placeholder="Enter name ">
</div>
</div>
<div class="row">
<div class="form-group col-sm-12">
<input type="email" name="email" class="form-control" id="email" placeholder="Enter email ">
</div>
</div>
<div class="row">
<div class="form-group col-sm-12">
<input type="password" name="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="row">
<div class="form-group col-sm-12">
<input type="password" class="form-control" id="pwd" placeholder="Re-enter password">
</div>
<div class="row">
<div class="col-sm-6 ">
<input type="submit" class="btn btn-info" value="SIGNUP">
</div>
</div>
</form>
After submitting form it shows TokenMismatchException in VerifyCsrfToken.php line 53:
I am completely get frustrated due to this errror.
I also used token in the form and also tried to clear cache but still facing same problem
What will be the problem?
You need to include a hidden field in your Form with the csrf token.
In your form, include the below:
<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">