I have currently 2 input fields on the same line to be validated with vee-validate (I am using Vue.js).
The validation message is displayed at the end of the input-group, not inside it.
Here is the html code:
<div class="form-group row d-flex justify-content-center">
<div class="input-group input-group-lg col-md-3" >
<input v-validate="'required'" name="username" v-model="username" type="text" class="form-control" placeholder="Your Name" aria-label="Name">
<span v-show="errors.has('username')" class="help is-danger">{{ errors.first('username') }}</span>
</div>
<div class="input-group input-group-lg col-md-4" >
<input v-validate="'required|email'" name="email" v-model="email" type="text" :class="{'input': true, 'is-danger': errors.has('email') }" class="form-control" placeholder="Your Email Address" aria-label="Email">
<span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
</div>
</div>
What's wrong with my code?
Use Bootstrap .help-block class in your error text.
Related
I've created a form that I give the user the option to submit online or print and mail. I use a simple javascript print command and turn off all other elements for printing besides the form using the .d-print-none class. It's probably really simple problem, but when I print it it doesn't output the entire form. It fills one page and then a second blank page. Wondering if it would help to add one of the other d-print classes to the form element or maybe there's a way to the height of the form to fit one page. Is this a bug or am I missing something?
There's not much special about the code, but I've displayed the form below.
<div class="col-lg-7 col-sm-12 d-print-inline-flex h-100 w-100" id="donationForm">
<div class="card">
<div class="card-header"><h4 class="text-center">Donation Request Form</h4>
</div>
<div class="card-body">
<form name="donationRequest" id="donationRequest" novalidate>
<h5>Event Information</h5>
<div class="form-group">
<label for="orgName">Name of Organization: </label>
<input type="text" class="form-control" id="orgName" required placeholder="Name of Organization">
</div>
<div class="form-group">
<label for="taxID">501(c)(3) Tax ID Number: </label>
<input type="number" class="form-control" id="taxID" required placeholder="Tax ID Number">
</div>
<div class="form-group">
<label for="eventName">Event Name: </label>
<input type="text" class="form-control" id="eventName" required placeholder="Event Name">
</div>
<div class="form-group">
<label for="eventDate">Date of Event: </label>
<input type="date" class="form-control" id="eventDate" required placeholder="Event Date">
</div>
<div class="form-group">
<label for="eventLoc">Event Location: </label>
<input type="text" class="form-control" id="eventLoc" required placeholder="Event Location">
</div>
<hr>
<h5>Contact Information</h5>
<div class="form-group">
<label for="contact">Contact Name: </label>
<input type="text" class="form-control" id="contact" required placeholder="First & Last Name of Contact Person">
</div>
<div class="form-group">
<label for="address">Address: </label>
<input type="text" class="form-control" id="address" required placeholder="Address of Organization">
</div>
<div class="form-group">
<label for="city">City: </label>
<input type="text" class="form-control" id="City" required placeholder="City of Organization">
</div>
<div class="form-group">
<label for="state">State: </label>
<input type="text" class="form-control" id="State" required placeholder="State of Organization">
</div>
<div class="form-group">
<label for="zipcode">Zip Code: </label>
<input type="number" class="form-control" id="zipcode" required placeholder="Zip Code of Organization">
</div>
<div class="form-group">
<label for="phone">Phone: </label>
<input type="number" class="form-control" id="phone" required placeholder="123-456-7890">
</div>
<div class="form-group">
<label for="email">Email: </label>
<input type="email" class="form-control" id="email" required placeholder="email#provider.com">
</div>
<hr>
<h5>Type of Donation Request:</h5>
<div class="form-group">
<label class="form-check-inline"><input type="checkbox" value=""> Financial Contribution</label>
<label class="form-check-inline"><input type="checkbox" value=""> Auction/Drawing Item</label>
<label class="form-check-inline"><input type="checkbox" value=""> Other</label>
</div>
<div class="form-group">
<label for="description">Please briefly note how this event will benefit our community:</label>
<textarea class="form-control" rows="7" id="comment"></textarea>
</div>
<hr>
<div class="form-group">
<div class="row">
<div class="col-md-6"><button type="submit" class="btn btn-primary btn-block"><em class="fa fa-send"></em> Submit Request</button></div>
<div class="col-md-6"><button class="btn btn-primary btn-block"><em class="fa fa-print"></em> Print Form</button></div>
</div>
</div>
</form>
</div>
</div>
</div>
I was dealing with this issue a week ago, and I solve it using this:
<div id="printbody" class="d-none d-print-block"> /*load elements to print via js*/ </div>
<div class="d-block d-print-none"> /*all my html body with funtionalities*/ </div>
I use the event onbeforeprint to load the print element to Mozilla, Chrome, Safari, EI, Edge. Using something like this:
window.onbeforeprint = function () {
$("#printbody").html("")
$("#printbody").append($("#list1").html())
$("#printbody").append($("#msg1").html())
$("#printbody").append($("#things").html())
$("#printbody").append($("#foo").html())
$("#printbody").append($("#faa").html())
if (/MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) {
$("#printbody").append($("#flag").html())
$("#printbody").append('<div class="row w-100 overflow-hidden">'+$("#boo").html()+'</div>')
$("#printbody").append('<div class="col-12 col-sm-10 offset-sm-1 col-xl-4 offset-xl-4 pt-3 px-0">' + $("#vudlist").html() + '</div>')
$("#printbody").append('<div class="col-12 text-center mb-3" >'+$("#tmvus").html()+ '</div>')
$("#printbody").append($("#tmksla").html())
} else {
$("#printbody").append($("#foos").html())
}
$("#printbody").append('<div>' + $("#objs").html() + '</div>')
$("#printbody").append($("#lmsg").html())
}
Actually iOS doesn't trigger the event onbeforeprint so I did the same handle but using the event onclick="fillPrint()". Seen like this:
function fillPrint() {
$("#printbody").html("")
$("#printbody").append($("#list1").html())
$("#printbody").append($("#msg1").html())
$("#printbody").append($("#things").html())
$("#printbody").append($("#foo").html())
$("#printbody").append($("#faa").html())
if (/MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) {
$("#printbody").append($("#flag").html())
$("#printbody").append('<div class="row w-100 overflow-hidden">'+$("#boo").html()+'</div>')
$("#printbody").append('<div class="col-12 col-sm-10 offset-sm-1 col-xl-4 offset-xl-4 pt-3 px-0">' + $("#vudlist").html() + '</div>')
$("#printbody").append('<div class="col-12 text-center mb-3" >'+$("#tmvus").html()+ '</div>')
$("#printbody").append($("#tmksla").html())
} else {
$("#printbody").append($("#foos").html())
}
$("#printbody").append('<div>' + $("#objs").html() + '</div>')
$("#printbody").append($("#lmsg").html())
}
The issue generate when you try to print a large element with multiple sections (div) because of that I decided to bring it a higher level of element on the DOM.
I hope this can help someone.
Sorry if its a stupid question but I'm unable to figure this simple layout
This is my simply input field with a email field and if the users enters invalid email it shows error as seen below:
<div class="form-group">
<label for="txtEmail" class="col-sm-3 control-label">Email Address:</label>
<div class="col-sm-9">
<div class="input-group col-md-12 form-group has-feedback">
<span class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" id="txtEmail" class="form-control" placeholder="Enter Email Address" data-minlength="50" data-error="Please enter valid email address" required>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
And the result is displayed as:
I need something as shown below:
I am trying to create a form with bootstrap. Here is my source code:
<div class="container">
<form action="" method="post" id="payment-form" novalidate autocomplete="on">
<span class="payment-errors"></span>
<div class="form-group">
<label for="cc-number" class="control-label">Card number formatting <small class="text-muted">[<span class="cc-brand"></span>]</small></label>
<input id="cc-number" type="tel" class="input-lg form-control cc-number" autocomplete="cc-number" placeholder="•••• •••• •••• ••••" required class="col-md-2">
</div>
<div class="form-group">
<label for="cc-exp" class="control-label">Card expiry formatting</label>
<input id="cc-exp" type="tel" class="input-lg form-control cc-exp" autocomplete="cc-exp" placeholder="•• / ••" required class="col-md-2">
</div>
<div class="form-group">
<label for="cc-cvc" class="control-label">Card CVC formatting</label>
<input id="cc-cvc" type="tel" class="input-lg form-control cc-cvc" autocomplete="off" placeholder="•••" required class="col-md-2">
</div>
<button type="submit" class="btn btn-lg btn-primary">Submit</button>
<h2 class="validation"></h2>
</form>
</div>
I want to do size="30" for fields. But the fields are still too large and this size doesn't affect fields. What changes should I do?
Please use this class
col-md-3 or col-md-2. Please use width="30px", hope this will help you.
EDITED:
if div is your main tag then put the code like
<div class="form-group">
<label for="cc-number" class="control-label">Card number formatting <small class="text-muted">[<span class="cc-brand"></span>]</small></label>
<input id="cc-number" type="tel" class="input-lg form-control cc-number" autocomplete="cc-number" placeholder="•••• •••• •••• ••••" class="col-md-3">
</div>
or you can use width like
<div class="form-group">
<label for="cc-number" class="control-label">Card number formatting <small class="text-muted">[<span class="cc-brand"></span>]</small></label>
<input id="cc-number" type="tel" class="input-lg form-control cc-number" autocomplete="cc-number" placeholder="•••• •••• •••• ••••" style="width:30px !important">
</div>
Meaning of numbers in col-md-4 , col-xs-1 , col-lg-2 in bootstrap
please let me know if you have any confusion.\
Thank you
I have a simple form with error handling through jqBootstrapValidation. I set it up so that it is horizontal when the browser is wide enough. Here is how it looks: http://i.imgur.com/K0JKzb8.png
However, when I enter a bad email, the form is not aligned anymore.
http://i.imgur.com/4Fr2UTq.png
Here is the code I am using. I just can't get it to work.
<form class="form-inline">
<div class="form-group form-group-lg">
<div class="col-lg-6 text-center">
<label class="sr-only" for="name">Full Name</label>
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Full name" name="name" required data-validation-required-message="Please enter your full name." >
<p class="help-block text-danger"></p>
</div>
</div>
<div class="form-group form-group-lg">
<div class="col-lg-6 text-center">
<label class="sr-only" for="name">Your email</label>
<input type="email" class="form-control" type="text" id="formGroupInputLarge" placeholder="Your email" name="email" required data-validation-required-message="Please enter your email." data-validation-email-message="email not valid">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-lg-12 text-center">
<div id="success"></div>
<button type="submit" id="submit" class="btn btn-success btn-lg">Submit</button>
</div>
</form>
Any tips?
Thanks a lot!
The issue is that the error message is appearing int he same column and pushing the textbox up. I believe you would either have to add it to another column or row below the content.
I don't know if this would help you but when I do bootstrap validation I add the tooltip attributes and the has error class to the div.
<div class="form-group has-error">
<input id="txtEmail" type="text" class="form-control" data-toggle="tooltip" data-placement="right" title="Email is not valid.">
</div>
This highlights the textbox red and the error message is displayed on hover so it saves space.
The way your HTML is set up is incorrect. You need to have the <div class="col-lg-6"> end and begin next to each other. The way you have it set up now is the form-group is on the outside with the table-cells inside. Also you should have the <div class="row"> so the table knows when a new row has been added.
<form class="form-inline">
<div class="row">
<div class="col-lg-6 text-center">
<div class="form-group form-group-lg">
<label class="sr-only" for="name">Full Name</label>
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Full name" name="name" required data-validation-required-message="Please enter your full name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-lg-6 text-center">
<div class="form-group form-group-lg">
<label class="sr-only" for="name">Your email</label>
<input type="email" class="form-control" type="text" id="formGroupInputLarge" placeholder="Your email" name="email" required data-validation-required-message="Please enter your email." data-validation-email-message="email not valid">
<p class="help-block text-danger"></p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<div id="success"></div>
<button type="submit" id="submit" class="btn btn-success btn-lg">Submit</button>
</div>
</div>
</form>
Try this set up and see if your code alignment messes up or not.
With the various answers I got. I managed to get it working. Here is the final code.
<form>
<div class="row">
<div class="col-sm-6 text-center">
<div class="form-group form-group-lg">
<label class="sr-only" for="name">Full Name</label>
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Full name" name="name" required data-validation-required-message="Please enter your full name.">
<div class="help-block text-danger"></div>
</div>
</div>
<div class="col-sm-6 text-center">
<div class="form-group form-group-lg">
<label class="sr-only" for="name">Your email</label>
<input type="email" class="form-control" type="text" id="formGroupInputLarge" placeholder="Your email" name="email" required data-validation-required-message="Please enter your email." data-validation-email-message="Email is not valid">
<div class="help-block text-danger"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<input type="hidden" name="location" value="toronto">
<div id="success"></div>
<button type="submit" id="submit" class="btn btn-success btn-lg">Submit</button>
</div>
</div></form>
Feel free to comment if you see a problem with my answer!
I am trying to combine horizontal-inline features of bootstrap 3 form designs !
This is what I have currently,you can see that i have created an inline form
I want the checkbox element and an anchor tag for forgot password option like this .
I found the example of what I want # FB login form design
I have put my code # Bootply Example
Any Help would be nice guys !
This is what I could do with pure bootstrap:
<form class="form-inline" role="form">
<div class="form-group">
<label label-default="" class="sr-only" for="exampleInputEmail2">Email address</label>
<input class="form-control" id="exampleInputEmail2"
placeholder="Enter email" type="email">
<div class="clearfix"></div>
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
<div class="form-group">
<label label-default="" class="sr-only" for="exampleInputPassword2">Password</label>
<input class="form-control" id="exampleInputPassword2"
placeholder="Password" type="password">
<div class="clearfix"></div>
<div>
forgot password?
</div>
</div>
<button type="submit" class="btn btn-primary btn-lg">Sign in</button>
</form>
http://www.bootply.com/127634