How to make bootstrap 5 validation not visible immediately before the user types (oninput)?
Here is the program that I use, but the program immediately provides validation to the user even though the user has not provided input interaction:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<form action=" " class="was-validated">
<div class="userid">
<label for="uid" class="form-label"> User Name: </label>
<input type="text" class="form-control" id=" uid " placeholder="Enter user_name" name=" uid " required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the user name. </div>
</div>
<div class="emailid">
<label for="emid" class="form-label"> Email Id: </label>
<input type="email" class="form-control" id=" emid " placeholder="Enter email_id" name=" emid " required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the email id. </div>
</div>
<div class="numberid">
<label for="numid" class="form-label"> Mobile Number: </label>
<input type="number" class="form-control" id=" numid " placeholder="Enter Mobile Number" name="numid" required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the mobile number. </div>
</div>
<div class="txt">
<label for="txt" class="form-label"> Message: </label>
<textarea class="form-control" id="txt" placeholder="Enter message" name="txt" required></textarea>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the message. </div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="Checked" name="remembers" required>
<label class="form-check-label" for="Checked"> I agree on form validation.</label>
<div class="valid-feedback"> </div>
<div class="invalid-feedback"> </div>
</div>
<button type="submit" class="btn btn-info mt-2"> Submit </button>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
You shouldn't have .was-validated on the form in the markup. You add that in your validation script.
<form action=" " class="needs-validation">
Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form>. Otherwise, any required field without a value shows up as invalid on page load.
https://getbootstrap.com/docs/5.2/forms/validation/#how-it-works
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<form action=" " class="needs-validation">
<div class="userid">
<label for="uid" class="form-label"> User Name: </label>
<input type="text" class="form-control" id=" uid " placeholder="Enter user_name" name=" uid " required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the user name. </div>
</div>
<div class="emailid">
<label for="emid" class="form-label"> Email Id: </label>
<input type="email" class="form-control" id=" emid " placeholder="Enter email_id" name=" emid " required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the email id. </div>
</div>
<div class="numberid">
<label for="numid" class="form-label"> Mobile Number: </label>
<input type="number" class="form-control" id=" numid " placeholder="Enter Mobile Number" name="numid" required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the mobile number. </div>
</div>
<div class="txt">
<label for="txt" class="form-label"> Message: </label>
<textarea class="form-control" id="txt" placeholder="Enter message" name="txt" required></textarea>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the message. </div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="Checked" name="remembers" required>
<label class="form-check-label" for="Checked"> I agree on form validation.</label>
<div class="valid-feedback"> </div>
<div class="invalid-feedback"> </div>
</div>
<button type="submit" class="btn btn-info mt-2"> Submit </button>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
Related
I'm trying to change the size of inputs in a multiple-input row (Bootstrap 5). I can change the label size but not the two inputs next to it. I want one to be col-7 and the other col-1. But the two inputs stay the same in size (see screenshot).
Here is the code:
<div class="row">
<!-- left column -->
<div class="col-5">
<div class="input-group my-3">
<label class="col-4 col-form-label"><?php echo $label['client-name']; ?>: *</label>
<input type="text" class="form-control col-7" name="clientname" value="<?php echo (isset($clientname)? $clientname : ""); ?>" />
<input type="text" class="form-control col-1" name="clientID" value="<?php echo (isset($clientID)? $clientID : ""); ?>" />
</div>
you can use width for input text.use this code:
<div class="row">
<!-- left column -->
<div class="col-5">
<div class="input-group my-3">
<label class="col-form-label">
clientname:
</label>
<div class="d-flex">
<input type="text" class="form-control w-25" name="clientname"
value="" />
<input type="text" class="form-control " name="clientID"
value="" style="width: 10%;" />
</div>
</div>
</div>
You should put your label in a separated column giving it a width like I did here so that the label column always takes col-3 and the content column always takes col-9.
Then you can treat the content column as another row and split it in 7-2 (but the bootstrap canonic layout would expect 12 cols in total).
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-3">
<label class="col-4 col-form-label">Label</label>
</div>
<div class="col-9">
<div class="row input-group">
<div class="col-7">
<input
type="text"
class="form-control"
name="clientname" value="***" />
</div>
<div class="col-2">
<input
type="text"
class="form-control"
name="clientID"
value="***" />
</div>
</div>
</div>
</div>
I created a dropdown menu to log in instead of logging in at Login.cshtml but i can't seem to be able to use the model that contains the email password etc. I am not sure how to explain this but here is what i made so far:
I created the dropdown form and placed it in _LoginPartial.cshtml so it shows on the navbar
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Log-In
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="width: 300px" >
<!----------->
<div class="col-lg-12">
<div class="text-center">
<h3><b>Log In</b></h3></div>
<form id="ajax-login-form" method="post" role="form" autocomplete="off">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password" autocomplete="off">
</div>
<div class="form-group">
<div class="col-xs-5">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-danger" value="Log In">
</div>
</div>
<div class="col-xs-5" align="Center">
<input type="checkbox" tabindex="3" name="remember" id="remember">
<label for="remember"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a tabindex="5" class="forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>
</div>
and after this, i thought i can easily just insert #model loginmodel and i can start using that model but i'm met with so many errors. Any advice on how to do this? I am also open to other approaches too
Ckeditor ruby gem is adding a ">" at the end of my content entries every time a user edits the content.
Here is a video of it happening: https://drive.google.com/file/d/16sus8LGxHBZLFs_ts5_SJJSwLfisJzom/view?usp=sharing
Here is my update_row controller code for the text_component model. The textarea input is being saved in the content column.
def update_row
#text_component = TextComponent.find(params.fetch("id_to_modify"))
#text_component.tab_id = params.fetch("tab_id")
#text_component.content = params.fetch("content")
if #text_component.valid?
#text_component.save
redirect_to("/guides/"+params.fetch("guide_id"), :notice => "Text component updated successfully.")
else
#guide = Guide.find(params.fetch("guide_id"))
render("guide_templates/show.html.erb")
end
end
ANSWERED: here is the working form code in my edit_form view:
<form action="/update_text_component/<%= #text_component.id %>" method="post">
<!--input for guide_id -->
<div class="form-group">
<input type="hidden" id="guide_id" name="guide_id" class="form-control" value="<%= params.fetch("guide_id") %>">
</div>
<!-- input for tab_id -->
<div class="form-group">
<input type="hidden" id="tab_id" name="tab_id" class="form-control" value="<%= params.fetch("tab_id") %>">
</div>
<div class="form-group">
<label for="content">
Content
</label>
<textarea id="content" name="content" class="ckeditor" rows="10"><%= raw #text_component.content %></textarea>
</div>
<button class="btn btn-block btn-outline-secondary">
Update text component
</button>
</form>
<form action="/update_text_component/<%= #text_component.id %>" method="post">
<!--input for guide_id -->
<div class="form-group">
<input type="hidden" id="guide_id" name="guide_id" class="form-control" value="<%= params.fetch("guide_id") %>">
</div>
<!-- input for tab_id -->
<div class="form-group">
<input type="hidden" id="tab_id" name="tab_id" class="form-control" value="<%= params.fetch("tab_id") %>">
</div>
<div class="form-group">
<label for="content">
Content
</label>
<textarea id="content" name="content" class="ckeditor" rows="10"><%= raw #text_component.content %></textarea>
</div>
<button class="btn btn-block btn-outline-secondary">
Update text component
</button>
</form>
When I post the following form, it requests server. How can I stop it from posting to server and validate in client side using jquery validation?
Here is my code:
<form asp-controller="Gigs" asp-action="Create" method="post">
<div class="form-group">
<label asp-for="#Model.Venue"></label>
<input asp-for="#Model.Venue" class="form-control" />
<span asp-validation-for="#Model.Venue"></span>
</div>
<div class="form-group">
<label asp-for="#Model.Date"></label>
<input asp-for="#Model.Date" class="form-control" />
<span asp-validation-for="#Model.Date"></span>
</div>
<div class="form-group">
<label asp-for="#Model.Time"></label>
<input asp-for="#Model.Time" class="form-control" />
<span asp-validation-for="#Model.Time"></span>
</div>
<div class="form-group">
<label asp-for="#Model.Genre"></label>
<select asp-for="#Model.Genre" asp-items="#(new SelectList(Model.Genres, "Id", "Name"))" class="form-control"><option>Please Select One</option></select>
<span asp-validation-for="#Model.Genre"></span>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
I tried this but didn't work
<environment names="Development">
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
</environment>
I have this in an MVC view
<form id="fileupload" action="#Url.Action("Save")" method="POST" enctype="multipart/form-data">
<div class="container">
<div class="row">
<div class="form-group">
<label for="datepicker1">Invoice Date</label>
<div class='bfh-datepicker' id='datepickerDiv'>
<input type='text' id="datepicker1" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="InvoiceNumberTB">Invoice Number</label>
<input type="text" class="form-control" id="InvoiceNumberTB" />
</div>
<div class="form-group">
<label for="NetAmountTB">Net Amount</label>
<input type="text" id="NetAmountTB" class="form-control text-right" placeholder="0.00" />
</div>
<div class="form-group">
<label for="TaxAmountTB">Sales Tax</label>
<input type="text" id="TaxAmountTB" class="form-control text-right" placeholder="0.00" />
</div>
<div class="form-group">
<label for="InvoiceTotalTB">Invoice Total</label>
<input type="text" id="InvoiceTotalTB" class="form-control text-right" placeholder="0.00" />
</div>
<div class="form-group">
<label for="InvoiceDescriptionTB">Description</label>
<input type="text" id="InvoiceDescriptionTB" class="form-control" />
</div>
<div class="form-group">
<label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
<span class="btn btn-success fileinput-button">
<span>Add File...</span>
<input type="file" id="DocumentUploadTB" class="form-control" />
</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span> Save</button>
</div>
</div>
</div>
But the label for the file upload is not formatting as I would have hoped (at the top of the field as the others) but looks like this
Could someone point me in the correct direction?
Thanks
Wrap the content after the label in a form-control-static div and lose the form-control class on the input:
<div class="form-group">
<label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
<div class="form-control-static">
<span class="btn btn-success fileinput-button">
<span>Add File...</span>
<input type="file" id="DocumentUploadTB" />
</span>
</div>
</div>
You want your btn span to display as a block element. Try adding a display: block; style to it, or use a simple bootstrap utility class like .show:
<div class="form-group">
<label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
<span class="btn btn-success fileinput-button show">
<span>Add File...</span>
<input type="file" id="DocumentUploadTB" class="form-control" />
</span>
</div>
Example: http://codepen.io/kspearrin/pen/PqpgYq