How can I return to a form after $request->validate() errors with the input data values showing? - forms

I'm using this code below in a Laravel controller but on errors it doesn't keep the input data when it returns to the form.
public function store(Request $request)
{
$validatedData = $request->validate([
'name' => 'required',
'intro' => 'required|max:140|min:40',
]);
If the intro is too short it sends the user back to the form but with empty fields.
The blade looks like this
<form action="{{route('member.store')}}" id="form" role="form" data-toggle="validator" method="post">
<div class="form-group">
<input type="text" value="" class="form-control" id="name" name="name" placeholder="Name" required>
</div>
<div class="form-group">
<textarea class="form-control" id="intro" rows="2" name="intro" placeholder="A short 15-30 word intro" required></textarea>
</div>
</div>
</form>
Doesn't is come with a return to the form with the data input?

You should use old('input') in the value of the input.
For your code it should be like this:
<div class="form-group">
<input type="text" value="" class="form-control" id="name" name="name" placeholder="Name" value="{{ old('name') }}" required>
</div>
<div class="form-group">
<textarea class="form-control" id="intro" rows="2" name="intro" placeholder="A short 15-30 word intro" value="{{ old('intro') }}" required></textarea>
</div>

Related

using the form template in bootstrap for styling only

can I use only the layout of the form in bootstrap and have the input option frozen and the submit buttons behave like plain html button which redirects somewhere?
Why I want this?
So in the homepage I have resources which can be deleted pressing the delete button against them. On clicking the delete button the resource data is displayed like the layout of a form, of course I want typing inputs to be disabled, and a warning message on top, and YES and RESET option at the bottom. Since the form has a specific action assigned via GET method it will invariably perform that action irrespective of the choice selected. So if RESET is also selected the resource still gets deleted.
One option is to have the buttons as individual links with specific redirection properties but then I need to handcode the entire styling of the form.
Below is the code
#elseif($layout=='delete')
<div class="container-fluid mt-4">
<div class="row">
<section class="col md-7">
<div class="card mb-3">
<img src="https://cdn.pixabay.com/photo/2014/05/05/19/53/keyboard-338502_1280.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Are you sure you want to delete</h5>
<form action="{{url('/destroy/'.$student->id)}}" method="get">
#csrf
<div class="form-group">
<label>CNE</label>
<input value="{{ $student->cne }}" type="text" class="form-control" name="cne" placeholder="Enter CNE">
</div>
<div class="form-group">
<label>FirstName</label>
<input value="{{ $student->firstName }}" type="text" class="form-control" name="firstName" placeholder="Enter the first Name">
</div>
<div class="form-group">
<label>Last Name</label>
<input value="{{ $student->LastName }}" type="text" class="form-control" name="LastName" placeholder="Enter the Last Name">
</div>
<div class="form-group">
<label>Age</label>
<input value="{{ $student->age }}" type="text" class="form-control" name="age" placeholder="Enter Age">
</div>
<div class="form-group">
<label>Speciality</label>
<input value="{{ $student->Speciality }}" type="text" class="form-control" name="Speciality" placeholder="Enter the speciality">
</div>
<input type="submit" class="btn btn-info" value="yes">
<input type="submit" class="btn btn-warning" value="reset">
</form>
</div>
</div>
</section>
Firstly, if you want disable input, add readonly to your inputs :
<input value="{{ $student->cne }}" type="text" class="form-control" name="cne" placeholder="Enter CNE" readonly>
Second, now the type of your reset button = submit so when you click it, your form is submitted. Change your code :
<input type="reset" class="btn btn-warning" value="reset">

Laravel - Form back with Input

I'm doing a login form with laravel. What I want is to validate the POST values, and if it's OK, then redirect to dashborad. If not, redirect back with Input. This is my login form :
<form method="post" autocomplete="off">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group">
<label for="email">Adresse courriel:</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Mot de passe:</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<button type="submit" class="btn btn-aqua">Se connecter</button>
</form>
And this is my AuthController function :
public function postLogin(Request $request){
Log::info('Showing user profile for user: '.$request);
if (Auth::attempt(['email' => $request->email, 'password' => $request->password])) {
return redirect()->route('/admin/dashboard');
}
return redirect()->back()->withInput(Input::all());
}
When it's redirecting back, my input are note filled.
Laravel implements a old() function which brings back input data if the form submitted has errors:
<form method="post" autocomplete="off">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group">
<label for="email">Adresse courriel:</label>
<input type="email" class="form-control" id="email" name="email" required value="{{ old('email') }}">
</div>
<div class="form-group">
<label for="password">Mot de passe:</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<button type="submit" class="btn btn-aqua">Se connecter</button>
</form>
I strongly recommend to not bring back the password. I know this is annoying, but safer imo.
More info : https://laravel.com/docs/5.4/requests#old-input

Angular Form Validation error : form is undefined

I am trying to validate my data for a student object with Angular Form Validation, but when I want to use or print for example, the serialNumber of a student it gives me this error: Cannot read property 'serialNumber' of undefined.
Here is the code:
<div *ngIf="student">
<div class=container>
<h2>Student {{student.name}} details</h2>
<form name="studentForm" (ngSubmit)="save()">
<!--<div ng-class="{ 'has-error' : studentForm.serialNumber.$invalid && !studentForm.serialNumber.t">-->
<label>Serial number: {{student.serialNumber}} </label>
<input type="text" name="serialNumber" class="form-control" ng-model="student.serialNumber" required>
<div ng-messages="studentForm.serialNumber.$error">
{{studentForm.serialNumber}}
<p ng-message="required">Your name is required!</p>
</div>
<!--</div>-->
<div>
<label>Name: {{student.name}}</label>
<input ng-model="student.name" placeholder="name">
</div>
<div>
<label>Group number: {{student.groupNumber}}</label>
<input ng-model="student.groupNumber" placeholder="groupNumber">
</div>
<button (click)="goBack()">Back</button>
<button (click)="save()">Save</button>
</form>
</div>
</div>
The ng-messages and ng-model attribute directives do not exist in Angular 2+. I would recommend reading into Angular Forms, ReactiveForms, and Template Syntax.
If you would like to dual data-bind the input values, you can do so with the following syntax: [(ngModel)]="student.serialNumber". However, in Angular 2+, there are usually better ways of getting values other than explicitly data-binding.
Angular Form Validation template Driven Model
onSubmit(form : NgForm) {
console.log(form);
}
<form #form="ngForm" (ngSubmit)="onSubmit(form)"
[ngClass]="{'was-validated': form.invalid && (form.dirty || form.touched)}">
<div class="" ngModelGroup="User">
<h2 class="text-center">Registration page</h2>
<br />
<div class="form-group">
<input type="text" class="form-control" placeholder="First Name" name="firstname" required
ngModel #firstname="ngModel">
<span class="help-bpx" *ngIf="firstname.touched && !firstname.valid ">Please enter the
firstname</span>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Last Name" name="lastname" required ngModel
#lastname="ngModel">
<span class="help-bpx" *ngIf="lastname.touched && !lastname.valid ">Please enter the
lastname</span>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Email" name="email" email
required ngModel #email="ngModel">
<span class="help-bpx" *ngIf="email.touched && !email.valid ">Please enter the Email
Value</span>
</div>
<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile" required ngModel name="file" #file="ngModel">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</div>
<br />
<div class="align-center">
<button type="submit" class="btn btn-primary" [disabled]="!form.valid">Register</button>
</div>
</div>
</form>

why form not submit in laravel 5.4

i have a form for User Registration, it was working perfect before but now its not submit and doesn't get any error. i tried to show all my post data but its not post any data.. please help
<form role="form" id="reg-form" method="post" class="form-horizontal" action="{{ url('/create_user') }}">
{{ csrf_field() }}
<h2>Create Account</h2>
<div class="form-group">
<div class="col-sm-6" id="user-firstname">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required="required">
</div>
<div class="col-sm-6">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" id="displayName" name="displayName" placeholder="Choose your display name" required="required">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" class="form-control" id="email" name="email" placeholder="Your Email" required="required">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" class="form-control" id="password" name="password" placeholder="Password" required="required">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" class="form-control" id="confirm_password" name="confirm_password" onkeyup="checkPass(); return false;" placeholder="Confirm Password" required="required">
<span id="confirmMessage" class="confirmMessage"></span>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</form>
Route
Route::post('/create_user', 'Auth\RegisterController#createUser');
Method
public function createUser(Request $request)
{
dd($request->all());
}
I think you forgot to close some open tag above the form. It happened to me too.
Possible error is the "/"
<form role="form" id="reg-form" method="post" class="form-horizontal" action="{{ url('/create_user') }}">
so plz remove it like
<form role="form" id="reg-form" method="POST" class="form-horizontal" action="{{ url('create_user') }}"> {{-- '/' removed --}}
and also in
Route::post('create_user', 'Auth\RegisterController#createUser'); // '/' removed
It worked for me.
Replace {{ csrf_field }} with {!! csrf_field !!}}. It will work

Bootstrap submit button won't work

I have the below code where I'm trying to submit data from a form into my back-end. Whenever I press the button it doesn't do anything and it's supposed to route to the specified place. I have looked at several examples and still hasn't worked. Below is my form. Any suggestions?
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<h1>Sign Up</h1>
<form action ="/adduser" method="POST" id="adduser">
<fieldset class="form-group">
<label for="InputUsername"> Username </label>
<input type="text" class="form-control" name="username" id="InputUsername" placeholder="Enter username">
</fieldset>
<fieldset class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" name="email"id="exampleInputEmail1" placeholder="Enter email">
<small class="text-muted">We'll never share your email with anyone else.</small>
</fieldset>
<fieldset class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" name="password"id="exampleInputPassword1" placeholder="Password">
</fieldset>
<button class="btn btn-default" form="signup" type="submit">Sign up</button>
</form>
</div>
</dv>
</div>
Here is my route
#app.route('/adduser', methods=["POST"])
def adduser():
print(request.form, file=sys.stderr)
username = request.form['username']
password = request.form['password']
email = request.form['email']
models.User.create_user(email, password, username)
login_user(user)
return redirect_url('index.html')
Your button has a form attribute of signup but your form has an id of adduser, so the button does not belong to the form. Try changing these values to match.