I'm using Bootstrap validator for bootstrap 3 and trying to display error messages above the input.
Here is the provided HTML code example:
<form role="form" data-toggle="validator">
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" id="inputEmail">
<div class="help-block with-errors"></div>
</div>
</form>
this works fine but I want to display the error like this:
<!-- display error -->
<div class="help-block with-errors"></div>
<!-- input -->
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" id="inputEmail">
</div>
Am I missing something here, how to do it right?
or, is there another way to accomplish this task by using JavaScript? (if the first block of code is used, can I move the error above the input like the example of the 2nd code?)
Put the error inside the same parent div as the input. Try this:
<div class="form-group">
<div class="help-block with-errors"></div>
<label for="inputEmail">Email</label>
<input type="email" id="inputEmail">
</div>
Related
I have created a search.html where users can select/enter search criteria and click the search button to search the database of 1000 records. I have done the HTML part but I don't know how to generate the action link.
<form action="/bookings/search?" method="POST">
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" name="email" placeholder="Email" value="">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" class="col-sm-2 col-form-label">Number of Tickets</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="inputPassword3" name="numTickets" min=1 max=4
value="">
</div>
</div>
<button type="submit" class="btn btn-primary">Search</button>
So, when the user enters the email or number of Tickets, the submit button will direct the result to /bookings/search javascript that goes through the database (Mongo DB). The email supports partial matching.
I want to do is: say, the user enters 'atom' in email and 2 in number of Tickets, then the action query should look like /bookings/search?email=atom&numTickets=2.
I believe it is related to javascript, but I am not sure how to do it.
My bookings/search looks like this:
bookings/search
Just changed the method to "get" instead of "post" and it works.
This question already has answers here:
How can I send an email using PHP?
(20 answers)
Closed 6 years ago.
This is the HTML contact form I created and I have been trying to get the PHP code that will make it work however I am not sure the best way to handle this. I have read through other questions and answers where they use separate files I am not an expert in PHP but I can assume the two files must be linked by name this is the HTML form I have:
<section class="our-contacts slideanim" id="contact">
<h3 class="text-center slideanim">Contact Us</h3>
<p class="text-center slideanim">Got a project in mind? Shoot as an email below!</p>
<div class="container">
<div class="row">
<div class="col-lg-12">
<form role="form">
<div class="row">
<div class="form-group col-lg-4 slideanim">
<input type="text" name="name" class="form-control user-name" placeholder="Your Name" required/>
</div>
<div class="form-group col-lg-4 slideanim">
<input type="email" name="email" class="form-control mail" placeholder="Your Email" required/>
</div>
<div class="form-group col-lg-4 slideanim">
<input type="tel" class="form-control pno" placeholder="Your Phone Number" required/>
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12 slideanim">
<textarea name="message" class="form-control" rows="6" placeholder="Your Message" required/> </textarea>
</div>
<div class="form-group col-lg-12 slideanim">
<button type="submit" href="#" class="btn-outline1">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
The form tag needs to have an action and a method attribute, like this:
<form role="form" method="post" action="path/to/file.php">
The method will normally be post (you can look up the difference between post and get if you like). The action is the path to the php file that will process the data.
In the php file you can access the data through the $_POST global variable which will be an array containing each of the inputs eg $_POST['tel'] will be the telephone number field from your form.
Then you need to send the email. You can try one of the implementations in the php manual (http://php.net/manual/en/refs.remote.mail.php) or you could try using a 3rd party service like mail gun.
I want to be able to link a form I have in "details.php" to a javascript file so that I can in turn write the results of a form to an sqlite database. My PHP code is like this:
<div class="form-group">
<label class="col-sm-3 control-label">Register Tag:</label>
<div class="col-sm-7">
<input type="text" class="form-control" ng-model="singleRegister.RegTag"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Register Number:</label>
<div class="col-sm-7">
<input type="number" class="form-control" min="1" max="65536" ng-model="singleRegister.Register"/>
</div>
</div>
I have tried to link using $scope in the javascript file however it does not seem to be functioning. What would be the correct way of doing this in the javascript file?
I have a form splitted in 4 steps (I made a form "wizard" using ng-switch), the submit button is on the last page of the wizard. I have some troubles making the angular form validation to work . It seems that the formName.$invalid only watches the inputs of the current step of the form.
<form name="carouselForm">
<div ng-switch="modal.getCurrentStep()" class="slide-frame">
<div ng-switch-when="general" class="wave row">
....
</div>
<div ng-switch-when="carousel" class="wave row">
<div class="col-md-12">
<div class="form-group"
ng-class="">
<label for="Title">
Title <span class="red">*</span>
</label>
<div>
<input id="Title"
ng-model="entityData.Title"
type="text"
required
placeholder="" class="form-control input-md">
</div>
</div>
</div>
</div>
<div ng-switch-when="details" class="wave row">
.....
</div>
<div ng-switch-when="description" class="wave row">
.....
</div>
</div>
</form>
I removed most of the form cause it would have been very long. In step two I left an input with the required tag. On this step the carouselForm.$invalid is properly set to true if this field is not set, but as soon as I change to the next step, carouselForm.$invalid is false again even if I didn't filled the required input.
It seems that the angular form validation doesn't watch the inputs in my other ng-switch block. Is there a way to make include them into the validation ?
Thank you very much !
You can replace ng-switch-when by ng-show, that way it doesn't get removed from the DOM, but is hidden using CSS.
So I'm using bootstrap form helpers to make selecting a country and region easier. Here is some of the code. I want to take this and input it into my db. It currently won't.
<div id="countries_states2" class="bfh-selectbox bfh-countries" data-country="US" data-flags="true" name="country">
<input type="text">
</div>
<div class="bfh-selectbox bfh-states" data-country="countries_states2" name="stateOrProvince">
<input type="text">
</div>
</div>
However, this does
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" placeholder="ironbat#example.com">
</div>
How can I enter the former into the form without wrecking the formatting (its very pretty :) )
As a template, here is a similar setup/strategy:
https://scotch.io/tutorials/easy-node-authentication-setup-and-local