im using bootstraps 3.0.1 and im trying to validate a multiple checkbox, I need to validate one at least. Is there no any way to do this bootstraps? Its hard to believe, but I couldn't find the way.
Here is my html,
<div class="form-group">
<label class="control-label col-lg-4 text-right" for="interes">Categoría:</label>
<div class="controls col-lg-8">
<label class="checkbox inline col-lg-6" for="interes-0">
<input type="checkbox" name="interes" id="interes-0" value="Gastronomía">
Gastronomía
</label>
<label class="checkbox inline col-lg-6" for="interes-1">
<input type="checkbox" name="interes" id="interes-1" value="Moda">
Moda
</label>
<label class="checkbox inline col-lg-6" for="interes-2">
<input type="checkbox" name="interes" id="interes-2" value="Cuidado Personal">
Cuidado Personal
</label>
<label class="checkbox inline col-lg-6" for="interes-3">
<input type="checkbox" name="interes" id="interes-3" value="Espectáculos">
Espectáculos
</label>
</div>
</div>
Thanks.
Twitter Bootstrap doesn't do validation. You can easily Google for a solution.
Related
I'm using Laravel and Bootstrap 4.2.1 and would like to display a form label over two required in-line text fields. I can get the label over the two fields by placing the form label outside of a form group but I am unable to get the red asterisk (*) display next to the form label. I've placed my code here in jsfiddle.
<label for="contact_first_name" class="form-label required">Contact Name</label>
<div class="form-group mb-3">
<div class="row">
<div class="col-md-6">
<input class="form-control" id="contact_first_name" name="contact_first_name" type="text"
placeholder="First Name" value="" required>
</div>
<div class="col-md-6">
<input class="form-control" id="contact_last_name" name="contact_last_name" type="text"
placeholder="Last Name" value="" required>
</div>
</div>
</div>
Try adding a span tag with class="text-danger" or style="color:red" inside the label tag and the * in it. Either way, you will get an * sign with the label.
Below, I have used the bootstrap approach of adding class="text-danger" to the span tag.
<label for="contact_first_name" class="form-label required">Contact Name
<span class="text-danger">*</span>
</label>
<div class="form-group mb-3">
<div class="row">
<div class="col-md-6">
<input class="form-control" id="contact_first_name" name="contact_first_name" type="text"
placeholder="First Name" value="" required>
</div>
<div class="col-md-6">
<input class="form-control" id="contact_last_name" name="contact_last_name" type="text"
placeholder="Last Name" value="" required>
</div>
</div>
</div>
Here is the link to the Jsfiddle.
#AhmadKarimi Thank you for your comment and solution. I just figured it out (by accident) while working on a different form. I needed to drop the label form control down one level inside of the form-group. It doesn't appear to work in jfiddle though.
<div class="form-group mb-3">
<label for="contact_first_name" class="form-label required">Contact Name</label>
<div class="row">
<div class="col-md-6">
<input class="form-control" id="contact_first_name"
name="contact_first_name" type="text"
placeholder="First Name" value="" required>
</div>
<div class="col-md-6">
<input class="form-control" id="contact_last_name"
name="contact_last_name" type="text"
placeholder="Last Name" value="" required>
</div>
</div>
</div>
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>
this is the html part when i add more email id's only first email is being validated and rest of emails treat as normal even if they are not in proper
<form action="<?php echo base_url()?>index.php/EMail/show_email">
<div class="form-group">
<label for="exampleInputEmail1">To :</label>
<input type="email" name="toa[]" ng-model="to" placeholder="To" class=" tagsinput" value="ss" />
</div>
<div class="form-group">
<label for="exampleInputEmail1">Subject :</label>
<input type="text" class="form-control" ng-model="sub" name="suba" id="exampleInputEmail1" placeholder="Subject">
<div>{{sub}}</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">CC :</label>
<input type="text" class="form-control" ng-model="to" name="cca" id="exampleInputEmail1" placeholder="CC">
<div>{{to}}</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">BCC:</label>
<input type="text" class="form-control" name="bcca" id="exampleInputEmail1" placeholder="BCC">
</div>
<div class="form-group ">
<label for="ccomment" class="control-label">Message</label>
<textarea class="form-control " id="ccomment" name="msg" required></textarea>
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<input type="submit" onclick="mail()" class="btn btn-primary" value="Send"/>
<button type="submit" class="btn btn-Success">Draft</button>
</form>
this is my controller and "toa "is that field which i mentioned in the image
function show_email(){
$this->form_validation->set_rules("toa[]","To","valid_email");
$this->form_validation->set_rules("cca","CC ","valid_email");
$this->form_validation->set_rules("suba","Subject","required");
$this->form_validation->set_rules("bcca","bcc","valid_email");
$this->form_validation->set_rules("msg","Message","required");
if($this->form_validation->run()==FALSE){
$data["title"]="EMail";
$this->load->view('header',$data);
$this->load->view('sidebar');
$this->load->view('Mail/mail');
}else{
//finish
$ccdata=$this->input->post("cca");
$bccdata=$this->input->post("bcca");
$sub=$this->input->post("suba");
$ms=$this->input->post("msg");
$dataa["username"]="MyProject";
$dataa["msg"]=$ms;
$msg=$this->load->view('Email_Temp/mail',$dataa,TRUE);
$todata=explode(",",$data);
print_r($todata[0]);
//$this->SendEmail($todata,$ccdata,$bccdata,$msg,$sub);
}
}
[Image] this is the field (to) that i want to validate
I am in the process of learning AngularJS, still at the most basic stages of form validation. I followed the official tutorial here, and managed to get the validation working like they have, where if input is invalid, the background changes colour.
That is all nice and counts as an important step in my learning, but how do I move a little further and have the validation add / remove CSS classes required by Bootstrap to show visual cues?
Here is my HTML code:
<form novalidate class="css-form">
<div class="form-group">
<label class="control-label" for="fname">First Name</label>
<input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required >
</div>
<div class="form-group">
<label class="control-label" for="lname">Last Name</label>
<input type="text" id="lname" placeholder="Last Name" class="form-control" ng-model="user.lname" required >
</div>
<div class="form-group">
<label class="control-label" for="email">Email</label>
<input type="email" id="email" placeholder="Email" class="form-control" ng-model="user.email" required >
</div>
<div class="form-group">
<label class="control-label" for="password">Password</label>
<input type="password" id="password" placeholder="Password" class="form-control" ng-model="user.password" required >
</div>
<div class="form-group">
<label class="control-label" for="emailpref">Want annoying emails?</label>
<select class="form-control" ng-model="user.emailpref" required>
<option value="Null">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
In the Bootstrap3 documentation, it says that if I need to show a valid state, I must add a CSS class of has-success like so:
<div class="form-group has-success">
<label class="control-label" for="fname">First Name</label>
<input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required >
</div>
How can I get my AngularJS validation to do that? At the moment, my AngularJS is as follows:
function UserCtrl($scope) {
$scope.master = {};
$scope.user = { fname: "J", lname: "Watson", password: "test", email: "j.watson#world.com", emailpref: "Yes" };
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}
To add dynamic classes based on field validation you need to do two things
Give your form a name
`<form novalidate class="css-form" name="form1">`
Give each input field a name too. You can then use expression to determine state of error of a field
<div class="form-group has-success" ng-class="{'has-success':form1.fname.$invalid}">
<label class="control-label" for="fname">First Name</label>
<input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required name="fname">
</div>
Please go through the form guide http://docs.angularjs.org/guide/forms for more details.
You can use angular-validator.
Disclaimer: I am the author of angular-validator
I have a div with checkboxes, and everytime before checking any of them I want to make sure they are cleared first. Any input on how I can do it?
The HTML code for the div consisting of checkboxes is
<div class="row_bus_groups cuke_business_group">
<div class="row">
<input class="field_checkbox cuke_partners" type="checkbox" id="SelectedBusinessGroups[0]" name="SelectedBusinessGroups[0]" value="Partners">
<label for="SelectedBusinessGroups[0]"><span class="translated_text" rel="BusinessGroups.Partners">Partners</span></label>
<input type="hidden" name="SelectedBusinessGroups[0]" value="">
</div>
<div class="row">
<input class="field_checkbox cuke_press" type="checkbox" id="SelectedBusinessGroups[1]" name="SelectedBusinessGroups[1]" value="Press">
<label for="SelectedBusinessGroups[1]"><span class="translated_text" rel="BusinessGroups.Press">Press</span></label>
<input type="hidden" name="SelectedBusinessGroups[1]" value="">
</div>
</div>
I tried doing
#browser.div(:class, "cuke_business_group").checkbox.each{ |all| all.clear }
You were close. Try this:
#browser.div(:class => "cuke_business_group").checkboxes.each {|checkbox| checkbox.clear}