I have created a search form with form-inline class. When I add is-invalid or is-valid classes to input, input width changed. How to fix width of input control.
<div class="container">
<div class="row mt-2">
<div class="col-sm-6 text-left">
<!-- Other tags... -->
</div>
<div class="col-sm-6 text-right">
<form class="form-inline float-sm-right">
<select class="form-control mr-1">
<option>First Name</option>
<option>Last Name</option>
<option>Phone</option>
<option>Email</option>
</select>
<input class="form-control mr-sm-1" type="text">
<button class="btn btn-dark my-2 my-sm-0" type="submit">
Search
</button>
</form>
</div>
</div>
</div>
You can see a demo on this link
sorry, in this case, the text in the field will not be displayed correctly. You must correct fields without the is-invalid and is-valid classes
.form-inline input:not(.is-invalid),
.form-inline input:not(.is-valid) {
padding-right: calc(1.5em + 0.75rem);
}
.was-validated .form-control:invalid, .form-control.is-invalid,
.was-validated .form-control:valid, .form-control.is-valid {
padding-right: 0.75rem;
}
Related
I properly define everything in my back end file. When I try to use
the back end variables in Thymeleaf by using selection variable
expression it is not working. It show errors in every field:
cannot resolve field name
register.html
<!doctype html "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:replace="/fragments/head"></head>
<body>
<nav th:replace="/fragments/nav :: nav-front"></nav>
<div class="container-fluid mt-5">
<div class="row">
<div th:replace="/fragments/categories"></div>
<div class="col"></div>
<div class="col-6">
<h3 class="display-4">Register</h3>
<form method="post" th:object="${user}" th:action="#{/register}" >
<div th:if="${#fields.hasErrors('*')}" class="alert alert-danger">
There are errors
</div>
<div class="form-group">
<label for>Username:</label>
<input type="text" class="form-control" th:field="*{username}" placeholder="Username">
<span class="error" th:if="${#fields.hasErrors('username')}" th:errors="*{username}"></span>
</div>
<div class="form-group">
<label for>Password:</label>
<input type="password" class="form-control" th:field="*{password}">
<span class="error" th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></span>
</div>
<div class="form-group">
<label for>Confirm Password:</label>
<input type="password" class="form-control" th:field="*{confirmPassword}">
<span class="error" th:if="${passwordMatchProblem}">Passwords do not match</span>
</div>
<div class="form-group">
<label for>E-mail:</label>
<input type="email" class="form-control" th:field="*{email}" placeholder="E-mail" required>
<span class="error" th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></span>
</div>
<div class="form-group">
<label for>Phone number:</label>
<input type="text" class="form-control" th:field="*{phoneNumber}" placeholder="Phone number">
<span class="error" th:if="${#fields.hasErrors('phoneNumber')}" th:errors="*{phoneNumber}"></span>
</div>
<button class="btn btn-danger mb-5">Register</button>
</form>
</div>
<div class="col"></div>
</div>
</div>
<div th:replace="/fragments/footer"></div>
</body>
</html>
I get errors everywhere I use the selection expression field.
Are you adding "user" to your model in your controller?
You need to add it to your model so Thymeleaf can access it.
addAttribute method can be used like so: model.addAttribute("user", myUser);
I am a beginner, and I want to show the value data into the input field related to the key but I am very confused that how can I show the value data into the input field so please if you have an idea please help me thanks.
Database table
Setting table https://ibb.co/jGFX4t2
I want to show a value data in this field, please see https://ibb.co/Mh08c9b
Settings Model
class Settings extends Model
{
protected $table="setting";
protected $fillable =['id','key','value'];
}
Controller
public function setting()
{
$setting=Settings::all();
return view('admin.setting.setting',compact('setting'));
}
HTML view
<form method="post" action="{{route('update.setting')}}" enctype="multipart/form-data" >
#csrf
<div class="card-box">
<div class="panel panel-heading">
<h3>Update Settings</h3>
</div>
<div class="col-lg-5">
<div class="mt-3">
<input type="file" name="logo_image" class="dropify" />
</div>
</div>
<div class="row">
<div class="col-lg-5 mt-3">
<div class="group-form">
<label>Contact Number*</label>
<input type="text" name="contact_number" value="{{ }}" class="form-control" >
</div>
</div>
<div class="col-lg-5 mt-3">
<div class="group-form">
<label>Contact Email *</label>
<input type="email" name="email" value="{{ }}" class="form-control" >
</div>
</div>
<div class="col-lg-10 mt-3">
<div class="group-form">
<label>Location *</label>
<input type="text" name="location" value="{{ }}" class="form-control" >
</div>
</div>
<div class="col-lg-5 mt-3">
<h3> Social Links:</h3>
<div class="group-form">
<label>Facebook *</label>
<input type="text" name="facebook" value="{{ }}" class="form-control" >
</div>
</div>
<div class="col-lg-5 mt-5">
<div class="group-form">
<label>Twitter *</label>
<input type="text" name="twitter" value="{{}}" class="form-control" >
</div>
</div>
<div class="col-lg-6 mt-3">
<div class="group-form">
<label>Linkedin *</label>
<input type="text" name="linkedin" value="{{}}" class="form-control" >
</div>
</div>
<div class="col-lg-7 mt-3">
<div class="group-form ">
<button type="submit" id="btnsubmit" class="btn btn-danger waves-effect waves-light col-lg-2">Save</button>
</div>
</div>
</div>
</div> <!-- end card-box -->
</form>
please use this code.
{{ $setting->Where('key', 'Contact_Email')->first()->value }}
How about something like:
{{ $setting->firstWhere('key', 'Contact_Number')->value; }}
{{ $setting->firstWhere('key', 'Contact_Email')->value; }}
{{ $setting->firstWhere('key', 'Location')->value; }}
etc
When you use Eloquent Model::all(), it returns a collection to the blade view.
Therefore you can use firstWhere to find the key value.
I'm trying to upload a file with Laravel but it does not work
I will send the field with the meta name view
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1success">
<form method="post" name="type" action="songs">
{{ csrf_field() }}
<div class="form-group">
<div class="row">
<label class="col-md-3 control-label" for="Name">نام موزیک</label>
<div class="col-md-7">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-music">
</i>
</div>
<input id="Name" name="title" type="text"
placeholder="نام موزیک" class="form-control input-md">
</div>
</div>
</div>
<br>
<div class="row">
<label class="col-md-3 control-label" for="Name (Full name)">دسته
بندی</label>
<div class="col-md-7">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-list">
</i>
</div>
<select id="Name" name="category" type="دسته بندی"
placeholder="دسته بندی" class="form-control input-md">
<option>fun</option>
<option>love</option>
<option>birth</option>
<option>wedding</option>
</select>
</div>
</div>
</div>
<br>
<div class="row">
<label class="col-md-3 control-label" for="Name (Full name)">توضیحات</label>
<div class="col-md-7">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-file-text-o">
</i>
</div>
<textarea id="Name" name="text" placeholder="توضیحات"
class="form-control input-md"></textarea>
</div>
</div>
</div>
<br>
<div class="row">
<label class="col-md-3 control-label" for="Name (Full name)">انتخاب
فایل</label>
<div class="col-md-7">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-folder-o">
</i>
</div>
<input id="meta" name="meta" type="file" placeholder="انتخاب فایل"
class="form-control input-md">
</div>
</div>
</div>
<br>
<div class="row" style="text-align: center">
<div class="col-md-10 " style="text-align: center">
<button id="Name" name="submit" type="submit" placeholder="انتخاب فایل"
class="form-control input-md" style="text-align: center">اضافه
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Controller
public function create(Request $req, $type) {
$this->authorize('is_admin');
$req->file('meta')->store('app');
// $path = Storage::putFile('app', $req->file('meta'))
}
error
Symfony \ Component \ Debug \ Exception \ FatalThrowableError (E_ERROR)
Call to a member function store() on null
Here is an image of the error
Does anybody know what i should do about this?
Add enctype="multipart/form-data" to your <form> tag in your blade:
<form method="post" name="type" action="songs" enctype="multipart/form-data">
Based on your blade file you can see that the file meta being uploaded is not required, so in your controller, you need to check if the file was sent before calling the store method on it. Check this:
public function create(Request $req, $type) {
$this->authorize('is_admin');
$file = $req->file('meta') ? $req->file('meta')->store('app') : null;
}
I have a problem with FormValidation to validate a form in multi-tab (Bootstrap theme).When I click on submit button in #tab-1, formValidation work correctly. but when I change to #tab-2 or #tab-3, field validation in #tab-1 don't work and submit form without validation.
<form id="newstext" method="post" class="form-horizontal"
data-fv-framework="bootstrap"
data-fv-message="This value is not valid"
data-fv-icon-valid="glyphicon glyphicon-ok"
data-fv-icon-invalid="glyphicon glyphicon-remove"
data-fv-icon-validating="glyphicon glyphicon-refresh">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><i class="green ace-icon fa fa-home bigger-120"></i>tab-1</li>
<li><i class="red ace-icon fa fa-folder bigger-120"></i>tab-2</li>
<li><i class="blue ace-icon fa fa-exchange bigger-120"></i>tab-3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-1">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">title *</label>
<input id="title" name="title" type="text" placeholder="" class="form-control"
data-fv-notempty="true"
data-fv-notempty-message="The title is required" />
</div>
<div class="form-group">
<label class="control-label">abstract </label>
<input id="abst" name="abst" type="text" placeholder="" class="form-control">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-2">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">name</label>
<input id="namee" name="namee" type="text" placeholder="" class="form-control">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-3">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">show</label>
<input name="show_callme" value="1" id="show_callme" type="checkbox">Ok
<input name="show_callme" value="1" id="shows" type="checkbox">Bold
</div>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-success">submit</button>
</div>
</div>
Please see my code in Codepen
This example might be helpful: formvalidation.io/examples/bootstrap-tab
JQuery FormValidation Has solved the problem Validation
That by replacing the jquery, validation between tabs work
You can add "ignore" in validate function, this worked fine with me
$("#form").validate({
...
rules: {...},
messages: {...},
ignore: "",
...
});
I have a form as follows
<form class="form-inline" id="inviteForm" action="http://localhost:8000/team/sendInvitation" method="post">
<div class="modal fade" id="sendInvite" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Send an invite</h4>
</div>
<div class="modal-body">
<form class="form-vertical">
<!-- Inviteename Form Input -->
<div class="form-group">
<label for="inviteename">Name :</label> <input class="form-control" required="required" name="inviteename" type="text" id="inviteename"> </div>
<!-- Email Form Input -->
<div class="form-group">
<label for="email">Email :</label> <input class="form-control" required="required" name="email" type="email" id="email"> </div>
<!-- Invitemessage Form Input -->
<div class="form-group">
<label for="invitemessage">Message :</label> <textarea class="form-control" required="required" name="invitemessage" cols="50" rows="10" id="invitemessage"></textarea> </div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="uk-button" data-dismiss="modal">Close</button>
<i class="uk-icon-send"></i> Send Email
</div>
</div>
</div>
</form>
and my route is as follows
Route::post('sendInvitation',['uses'=>'TeamsController#sendInvitation','as'=>'invitation.send']);
and the UI code is as follows
<form class="form-inline" id="inviteForm" action="{{URL::route('invitation.send')}}" method="post">
#include('admin.teams.partials.sendinvite')
</form>
and the controller code is as follows :
public function sendInvitation()
{
dd(Input::all());
}
I am expecting to see the input values dumped on the screen , but right now nothing is happening.
The include file has the UI for modal dialog.
My question is why is the form not being posted. I am pretty sure I am missing something which is very silly, but if you can point it out for me, it would be praiseworthy.
Thanks
The problem is the nested form structure.
http://www.w3.org/TR/xhtml1/#prohibitions
Remove <form class="form-vertical"> and replace with a normal <div> or <span>.