html5,forms,twitter-bootstrap,bootstrap,html-form , maxlength not working in html form input field with bootstrap


maxlength not working in html form input field with bootstrap

Question:

Tag: html5,forms,twitter-bootstrap,bootstrap,html-form

I am using bootstrap and currently created form with 5 tabs in it. I have a form field called layer time in which I have 3 input fields namely hours, minutes,seconds. I want to set the maxlength of 2 for each field.But it is not working when I specify it. Please help me out with this. Following is my code for bootstrap form.

<ul class="nav nav-pills">
    <li class="active"><a href="#basic-layer-tab" data-toggle="tab"><b>Basic Layer Data</b><i class="fa"></i></a></li>
    <li ><a href="#basic-calcuations-tab" data-toggle="tab"><b>Basic Calculations</b><i class="fa"></i></a></li>
    <li ><a href="#doping-N2-tab" data-toggle="tab"><b>Doping-Nitrogen</b><i class="fa"></i></a></li>
    <li ><a href="#doping-Al-tab" data-toggle="tab"><b>Doping-Aluminium</b><i class="fa"></i></a></li>
    <li ><a href="#other-calcuations-tab" data-toggle="tab"><b>Other Calculations</b><i class="fa"></i></a></li>
</ul>

<form action="insertlayer.php" id="newlayerform" role="form" method="post" class="form-horizontal" >

        <div class="tab-content">

            <div class="tab-pane active" id="basic-layer-tab">

               <div class= "panel panel-default">
                    <div class="panel-body">

                        <div class="container-fluid">

                            <div class="form-group">
                                <label for="layer_time" class="col-sm-2 control-label" style="color:red">Layer Time</label>
                                <div class="col-sm-4">
                                    <div class="input-group">
                                        <input type="number" class="form-control" name="layer_time_hours" id="layer_time_hours" maxlength="2">
                                        <div class="input-group-addon"><b>hh</b></div>
                                        <input type="number" class="form-control" name="layer_time_minutes" id="layer_time_minutes" maxlength="2">
                                        <div class="input-group-addon"><b>mm</b></div>
                                        <input type="number" class="form-control" name="layer_time_minutes" id="layer_time_minutes" maxlength="2">
                                        <div class="input-group-addon"><b>ss</b></div>
                                    </div><!--end of input group--> 
                                </div><!--end of column class-->
                            </div>

                        </div><!--end of container-fluid-->

                    </div><!--end of panel body-->
                </div><!--end of panel default-->

            </div><!--end of tab-pane basic-layer-tab-->

</form> <!--end of form-->  

For ease of understanding, I have just provided only information in one tab and one form field in the first tab. However there are 5 tabs in my form and each tab has many form fields.


Answer:

It is not bootstrap that are causing this. maxlength does only apply to <input>'s of type text, email, search, password, tel or url. See MDN.

Thats why maxlength not works with your <input type="number" maxlength="2">

Proof of concept :

text : <input type="text" maxlength="2">
number : <input type="number" maxlength="2">

here -> http://jsfiddle.net/7ba2oys7/


Related:


Run AJAX function on form submit button after javascript confirm() cancel


javascript,jquery,ajax,wordpress,forms
I have a form where and AJAX function runs on form submission to make sure that the data in the form doesn't conflict with data in the database. If a conflict is found, the AJAX function pops up a confirm() box. If the user clicks "OK", the form is submitted....

Django add an attribute class form in __init__.py


python,django,forms,django-forms
My form class from django import forms class Form(forms.Form): your_name = forms.CharField(label='Your name ', max_length=100) My app file __init__.py from django import forms from my_app.forms import Form from captcha.fields import ReCaptchaField def register(form): form.captcha=CaptchaField() register(Form) Code in __init__.py add an attribute captcha but it is not on the page. I...

Angular submit not called when required fields not filled


javascript,angularjs,forms
I'm creating a form in Angular with Ionic. I don't want a red error class to be displayed unless a user has submitted the form. As such, my code looks like this: <form ng-submit="submit()" name="form"> <ion-radio ng-repeat="item in items" ng-model="data.type" name="type" ng-value="item.value" ng-class="{'error' : form.type.$invalid && formSubmitted }" </form> And...

Correct PHP contact form syntax? [duplicate]


php,forms,validation
This question already has an answer here: PHP: “Notice: Undefined variable” and “Notice: Undefined index” 11 answers I am trying to follow a PHP contact form tutorial from here! Seems pretty simple and I'm completely new to PHP. However, when running my project, I get so many "Notice" messages...

Symfony 2 unable to pass entity repository to form


php,forms,symfony2,runtime-error
I have a form with a drop down and a set of checkboxes, i've used entity form field type to get the values via DB. it works with one of the entity but not with the other. i have this code seperately inside AddBadgesType there is NO AddBadges entity <?php...

Prevent bootstrap 3 tab from stacking when window is resized (made smaller)


html5,css3,twitter-bootstrap-3
I have two tabs and I do not want them to stack when the window is resized. How do I do so? As shown below this is the code I've used to create my tabs. I don't understand why they would stack up when my window is resized. HTML Tab...

Multiple AJAX forms with the same ID on the same page


javascript,php,jquery,ajax,forms
I have two AJAX newsletter subscribe forms on the same page (top and bottom). Both forms have the same ID. The top form works perfectly, however I'm unable to get the alert messages to appear in the bottom form. I found this question but wasn't sure how to implement the...

More modern image maps?


javascript,html,css,html5
With all the recent advances in JavaScript/HTML5 it would be nice to think there would be a more modern way of implementing an image map. I know you can set a map property for the tag but I don't think this supports nicely formatted tooltips on rollover (near the region)....

change icon on collapse in Bootstrap 2.3 not in bootstrap 3


javascript,jquery,css,html5,twitter-bootstrap
I am using bootstrap 2.3 collapse in my project. I need to change icons on collapse means on show and hide I need to change icons. with bootstrap 3 some shown and hidden functions are showing in internet but I need with Bootstrap 2.3. Please let me know how to...

Using Aria to make a div table accessible


html,html5,wai-aria
Context: I have a div table that a client wants to be screen reader accessible like a regular html table is using the table commands Problem: Cant get aria to work to announce the header with the row value to keep the integrity intact with the data. Solutions: Only using...

Show only the requested forms using JS


javascript,jquery,html,html5,forms
As the image below illustrates, I have two forms and two buttons. Currently all the forms are visible. How can I only show the requested form "according to the option they have selected (from the blue buttons on the top)"? So, if the user clicked on the "send an invite"...

Saving image to localstorage - canvas


javascript,html5,html5-canvas
I'm using html5 storage to store my image. It works great in chrome. In FireFox it works 8/10 times. function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); console.log("line 1 : " + img.src); var dataURL = canvas.toDataURL('image/jpeg'); console.log("line...

Retrive geolocation in real time (HTML5)


javascript,html5,google-maps,gps,geolocation
I have this code: var map; var geocoder; function initialize() { var mapOptions = { zoom: 18 }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // Try HTML5 geolocation if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var marker = new google.maps.Marker({ position: pos, map: map, title: 'Posizione Attuale' });...

how can I use 'localStorage' to store an entire page?


javascript,html5
I've been reading the book HTML in action and in chapter 5 it shows how to create a mobile application that can be runned even offline. My only doubt is: Can I do it for an entire page? and can you give me a simple but complete example on how...

Teechart HTML5, line color and thickness


javascript,html5,teechart
How do you change the line color and thickness of a series in Teechart HTML5. I have been looking through the examples, but i can't find anything describing that....

Does localStorage.clear(); clear ALL from PC?


javascript,html5,local-storage
If I call the following: window.onbeforeunload = function() { localStorage.clear(); }; Does this clear all local storage from a user machine or just what my site has set?...

What is the semantic HTML tag to display for URLs that are not links?


html,html5,url,tags,semantics
I have a search engine plugin that outputs results in a basic structure: <a href="page url"> <div class="searchResult"> <h3>Page title</h3> <p>Page url</p> <p>Page <meta> description</p> </div> </a> The plugin is designed to integrate into an existing website so it has no default styling. However, websites are supposed to be usable...

Load javascript in consecutive order after browser load event


javascript,jquery,html,html5,browser
What am I trying to do? In an attempt to speed up my website I am loading non-essential javascript after the browser load event. (So the JS files are not render blocking) This is currently functioning correctly. What is the problem? The problem is sometimes the non-essential javascript depends on...

php form get parameters from url and store it until the final page


php,mysql,forms,get
I wrote a simple PHP survey application about movies and I am using one of the crowdsourcing services to collect data. In order to verify and rate workers, I have to generate VCODE (https://microworkers.com/vcode.php) in the final page and so workers can submit it as their proof of finishing my...

Form not submitted using jquery


javascript,jquery,html,forms
I have following form, <form method="post" action="test.php" id="offer1Form"> <input type="hidden" name="c" value="3883316"> <input type="hidden" name="qtyadd" id="qtyadd" value="1"> <input type="hidden" name="buyid" id="buyid" value="multi"> <input type="hidden" name="multi" id="multi" value="11,1;150,1;182,1;27,1; "> <input type="hidden" name="promocode" value="<?php echo $promote_code1?>"> <input type="hidden" name="continue" value="<?php echo "...

Form controls not showing


c#,forms,winforms,user-interface,user-controls
I'm making a console application that shows a form. I created the form from scratch. When I run the program, the form shows, but the controls I added don't show. My code: using System; using System.Windows.Forms; using System.Drawing; namespace form { public class main { public static void Main() {...

Javascript/jQuery form validation


javascript,jquery,forms,validation
I got most of this form validation to work properly but the only issue is that when the form detects an error on submit and the user corrects the mistake, the error text won't go away. This can be confusing for the user but I can't seem to figure out...

How can I make a DIV element Fixed but non-Scaleable?


html,css,html5
Hopefully I'm asking this question right. Basically, I'm trying to implement a drop down menu into my design. I've been looking around for help coding it, since I'm still relatively new to HTML/CSS and found a few great tutorials that I have altered a bit to match what I have...

How secure are HTML5 forms?


html5
<input id="user_lic" type="number" min="5" max="30" step="5" value ="5"/> Would someone be able to disable this min="5" statement and then submit the input with a negative value. Or for example bypass the type=number statement and enter a symbol...

How to make my nav bar responsive


html5,css3,media-queries
I would like to use media query to make my navbar responsive. @media screen and (max-width: 600px) { .nav-wrap { position: relative; min-height: 40px; } .nav-wrap ul { position: absolute; } .nav-wrap li { display: none; /* hide all <li> items */ margin: 0; } .nav-wrap .current_page_item { display: block;...

PHP+HTML: file not loaded from form


php,html,forms
In my form a user can choose to upload a file. So, here's the correspondent field in the form. here is the html code: <p> <label>Allega fattura</label> <span class="field"> <input type="file" name="allegato_fattura" id="allegato_fattura" value="Sfoglia..." /> </span> and when the submit button is clicked, here we go: ... define("DIR_FATTURE","fatture/"); $fatturaFileName; $addedFattura...

How to read all video type in a video tag


javascript,php,html5,video,codec
I make a web interface for my server and I want to read all my video, but I have some problems: When I change the innerHTML (in javascript) of my video tag with a new source tag, it keep playing the previous video then I need to refresh the page...

Sending input data to a javascript file


javascript,jquery,ajax,html5,send
My following code is this: <form> <input class="inputField" type="text" required="required" pattern="[a-zA-Z]+" /> <input class="myButton" type="submit" value="Submit" /> </form> <script type="text/javascript"> $(document).ready(function () { $(".myButton").on("click", function () { var value = $(".inputField").val(); }); }); </script> I want to send to the file main.js the data after a user puts in some...

How can you drop an image from your desktop into an editor and move it around?


javascript,html5,contenteditable
The default behavior when you drop something from your desktop to a textarea is that you will see the path to the image at the position where you dropped it. My end goal is to convert the local image as base64 and insert it at the drop position within the...

CSS drop down navigation


css,html5,css3,drop-down-menu,navigation
I'm sure this is something simple I'm missing... My drop down menu is opening within the main navigation, widening it. Here is a link to the page I'm working on. The issue is with the navigation below the App buttons. http://membershq.incentiveusa.com/AwardPages/GoalUp_Test2/index_test3.html# Here is my HTML: <div class="container-fluid"> <div class="section-title2 text-center">...

How to change my table based on screen size?


javascript,html,css,html5
I want to change my table so it would look nice on a mobile platform. All I want to do is change my table so it is two columns. I am using this code to send an email. So I cannot link a stylesheet to my html. It is recommended...

Rails: get f.range_field to submit null or nil as default value


ruby-on-rails,forms
In my app, I have a range_field where a user can select 0..100. But if they don't select anything, I want the form to submit "null" or nil as the value rather than a numerical value. Is this possible? If I use the below syntax, then everything works except value...

Regex not working in HTML5 pattern


regex,html5
So I have this regex intended to let pass all text but those that contain as initial chars the "34" sequence: ^(?!34)(?=([\w]+)) The regex is working fine for me in https://regex101.com/r/iN1yN3/2 , check the tests to see the intended behavior. Any Idea why it isn't working in my form? <form>...

Javascript: Resetting variable value created by form


javascript,forms,variables
I've created a form whereby the user enters details which are stored in variables or calculated depending on user entry. When clicking the button, a message will be displayed showing a message with the cost variable. The form clears but the message remains. The problem I have is that the...

Codeigniter Form Validation Rule for match (password)


php,forms,codeigniter,validation
I am trying to write Form validation rules in my Controller to submit Change Password form in which I am checking the old password too. I am getting the old password(current) from db and placing it in a hidden input field. My Rules are simple and are given below $config=array(...

Tagging values in HTML document for automated extraction


html,xml,html5
We have a series of documents that are being converted to HTML for web access. The documents are operating instructions that list actions people have to do as well as distinct requirements. We wanted to put a tag around each requirement so it can be automatically extracted using some code....

why i don't get return value javascript


javascript,jquery,html,json,html5
When i debug my code i can see i have value but i don't get value to createCheckBoxPlatform FN function createCheckBoxPlatform(data) { var platform = ""; $.each(data, function (i, item) { platform += '<label><input type="checkbox" name="' + item.PlatformName + ' value="' + item.PlatformSK + '">' + item.PlatformName + '</label>' +...

jQuery & CSS only load after many refreshes


jquery,css,html5,internet-explorer,internet-explorer-11
If you open this page in IE11, the CSS and jQuery don't load: http://javasmart.gooberdev.com/ If you refresh the page once, maybe even twice, it still doesn't load. But if you hit F5 a bunch of times in succession, the CSS and jQuery finally load and the page displays correctly. This...

JSON.parse parsing a string into string


javascript,html5
I have confusion over the functionality of JSON.parse. I am writing code : dynamicMsgObj = '"rest, no disc"'; var jsonObj = {}; var isJsonString = function isJsonString(str) { try { jsonObj = JSON.parse(str); } catch (e) { return false; } return true; }(dynamicMsgObj); console.log(isJsonString);// returns true console.log(typeof jsonObj);//returns string How...

Having Users IP Address Showing In My Email Form [duplicate]


php,html,forms,joomla
This question already has an answer here: How to get the client IP address in PHP? 13 answers Hello I have created an email form but am very unfamiliar with how to code in a section that displays a users IP address in the email that is sent. Here...

javascript onblur onMouseOver calculate tax and autofill form input


javascript,php,html,html5,forms
After 2 days searching I give up. I have a form and need to add (autofill) taxes to the input total price but in a easy simple way: <form name="form" action="go.php"> <input name="cost" type="text"> <input name="costplustax" type="text" value=" here we autofill cost +19%> <input type="submit" value="ready to mysql"> I can...

Put form fields two per line in bootstrap form


html,forms,twitter-bootstrap-3
I am using Twitter Bootstrap (version 3) and in the form, I am trying to put these fields two per line, but i cant figure it out how to do it.. Here you can see it in bootply what i have done.. <div class="col-md-10"> <div class="form-group"> <legend>1st sth</legend> <div class="col-md-2">...

Entering data into mysql database using php


php,mysql,forms,mamp
Customer will complete a form and enter a pathway where they will want the CSV to be exported to. The pathway is entered using the top section of the php (below): <form action="register.php" method="post"> Enter file pathway where CSV will be saved: <input type="text" name="username" required="required"/> <br/> <input type="submit" value="Enter"/>...

Javascript into HTML form


javascript,html,forms
Hi I am trying to implement a HTML form. Let's suppose it has 4 fields- Name , Age , City (dropdown- contains A,B,C,D) and Region. I want Region field to appear only when City selected is A or B and disappears if city is changed to C and D. Could...

Swap nav and div vertically uing CSS only


html,css,html5,css3
So I have a <nav> in my <header> tag and just below it I have a <div> which shows the date. Now the problem is, my design is in such a way that I cannot put the <div> for the date inside my <header>. However since I'm working with a...

Redraw text over clearRect HTML5 Canvas


jquery,html5,canvas
I'm trying to draw text (HTML5 canvas) depending on what option is selected in a select element. It works correctly until there's 2 set of text that appears at the same place. It seems like the clearRect function is the issue. The text won't be redrawn over that cleared space....

validation of AngularJS direcrives


angularjs,html5,html-validation
I read on W3C School that to make a valid HTML page I have to add data before each angular directive in HTML file (e.g.: <p>The name is <span data-ng-bind="firstName"></span></p> or <div data-ng-app="" data-ng-init="firstName='John'"> Ok that's fine. I have two questions: Should this prefix be used only for ng- directives?...

Form with 2 submit buttons


javascript,html,forms,window.open
I have one form with 2 submit buttons. The form generates a URL. The 2 outputs of the form are: It writes a URL to a hidden div which displays when they click the Preview button, and It launches the same URL in a new window when they click the...