I am looking to put a character limit on an input box on a form. I ideally want 140 characters but can't work out how to do it.
I'm using Angular on my front end.
My code for the input section i need a text limit for new.html
<div class="form-group">
<label>Description 140 characters</label>
<input type="text" ng-model="postsNew.post.description" class="form-control" </textarea>
I tried to use another textarea way but it deleted half of my form.
Here is my full code for this section
<section class="container">
<h1>What happened?</h1>
<form ng-submit="postsNew.submit()">
<div class="form-group">
<label>Tube Line</label>
<select ng-model="postsNew.post.line" class="form-control">
<option ng-repeat="line in postsNew.linesList" value="{{line}}">
{{line}}
</option>
</select>
</div>
**
<div class="form-group">
<label>Description 140 characters</label>
<input type="text" ng-model="postsNew.post.description"
class="form-control" </textarea>
</div>
**
<div class="form-group">
<label>Date</label><br>
<input id="enddatefield" type="date" ng-model="postsNew.post.date"
class="form-control">
</div>
<div class="form-group">
<label>Time</label><br>
<input type="time" name="name" ng-model="postsNew.post.time"
class="form-control">
</div>
<input type="submit" value="Fingers crossed..." class="btn btn-primary
pull-right">
</form>
</section>
With maxlength="int"
EXAMPLE:
<input type="text" name="text" maxlength="10">
Working DEMO.
You can use maxlength
<input type="text" name="max_length" maxlength="20">
<input type="text" ng-model="postsNew.post.description" class="form-control" maxlength="140" />
you can use this maxlength="140" attribute in your input field.
Related
Hello I can not validate my form with jquery validation. it does not giving me any errors but I can still type number and letters to the name field.
Here is the code for validation:
jQuery.validator.addMethod("lettersonly", function(value, element) {
return this.optional(element) || /^[a-z\s]+$/i.test(value);
}, "Only alphabetical characters");
$('#customer-form').validate({
rules: {
name: {
lettersonly: true
}
}
});
and here is the code for the form:
<html>
<head>
<title></title>
<asset:stylesheet src="application.css"/>
<asset:javascript src="jquery-3.3.1.min.js"/>
<asset:javascript src="application.js"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>
<g:form controller="customer" action="saveCustomer" class="customer-form">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" required class="form-control name" id="name" placeholder="Enter first and last name" name="name">
</div>
<div class="form-group">
<label for="code">Code</label>
<input type="text" required class="form-control" id="code" placeholder="Enter code" name="code">
</div>
<div class="form-group">
<label for="contactP">Contact Person</label>
<input type="text" class="form-control" id="contactP" placeholder="Enter contact person" name="contactP">
</div>
<div class="form-group">
<label for="status">Status</label>
<select class="form-control" required id="status" name="status">
<option disabled selected>Please select a Status</option>
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
<g:link controller="customer" action="index" ><button type="button" class="btn btn-primary">Cancel</button></g:link>
<button type="submit" class="btn btn-default" style = "background-color: #b52222">Add</button>
</form>
</g:form>
Thank you.
You are calling validate on customer-form id.
$('#customer-form').validate({
but your form does not have any id. It has a class.
So either adds an id in the form (id="customer-form") or change jquery code to
$('.customer-form').validate({
I have used bootstrap 4 framework in my website. Using this framework I have created a simple html form using bootstrap class with javascript function.
The form works good while i enter integer as input, But it shows some error while i enter float vales.
Here is the web-page.
<form role="form" name="BeamFactor">
<div class="form-group">
<label>Antenna dimension (D) :</label>
<input class="form-control input-lg" name="n1" required="" type="number">
</div>
<div class="form-group">
<label>Wavelength (λ) :</label><input class="form-control input-lg" name="n2" type="number">
</div>
<div class="form-group">
<label>Beamwidth :</label><input class="form-control input-lg" name="n3" type="number">
</div>
<div class="form-group">
<input value="Calculate" class="btn btn-success btn-lg" onclick="javascript:calcBeamFactor();" type="button">
<button type="reset" class="btn btn-warning btn-lg">Reset</button>
</div>
<div class="form-group">
<label>BF :</label><input class="form-control input-lg" name="total">
</div>
</form>
Add step property to your input type.
<input type="number" step="any" />
I am trying to disable the button if all inputs are not populated, If they are populated then the button is enabled.
I am also trying to print text under the input if no text is present in the input field, but only if user clicks on the disabled button.
My question
How do I alter my code to enable my button once text is present in all the input fields and if they are not and the user clicks on the disabled button show
<div ng-if="!myForm.Lname.$invalid">
<p>This field is required</p>
</div>
but only if text is not present in the input fields.
FULL CODE
<div class="form-group">
<label for="first-name">First Name*</label>
<input type="text" class="form-control" name="Fname" placeholder="Enter first name" ng-model="formData.Fname" ng-required="true">
<div ng-if="!myForm.Fname.$invalid">
<p>This field is required</p>
</div>
</div>
<div class="form-group">
<label for="last-name">Last Name*</label>
<input type="text" class="form-control" name="Lname" placeholder="Enter last name" ng-model="formData.Lname" ng-required="true">
<div ng-if="!myForm.Lname.$invalid">
<p>This field is required</p>
</div>
</div>
<div class="form-group">
<label for="email">Email*</label>
<input type="email" class="form-control" name="email" placeholder="Enter a valid email address" ng-model="formData.email" ng-required="true">
</div>
<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">
<button ui-sref="form.select" class="btn btn-block btn-info" ng-disabled="!myForm.Fname.$valid">
Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
</button>
</div>
</div>
You can do this by creating your own directive.
I hope this will help you.
Here's a demo on Jsfiddle
HTML:
<div ng-app="sampleapp">
<div ng-controller="samplecontoller" ng-init="showData()">
<form name="form" disable-btn ng-submit="submitForm()">
<div>
<label>First Name:</label>
<input type="text" placeholder="First Name" ng-model="model.name" required>
</div>
<div>
<label>Last Name:</label>
<input type="text"placeholder="Last Name" ng-model="model.lname" required>
</div>
<div>
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
</div>
All the examples that popped up on this forum do not relate to my current issue,
Currently, we have three rows of textboxes with a possibility of adding more rows later.
Below is sample code:
<body>
<div class="bs-example">
<form class="form-inline" role="form">
<div class="form-group">
<label for="employeename">Employee Name</label><br>
<input type="email" style="width:250px;" class="form-control" name="employeename" id="employeename" placeholder="Employee name...">
</div>
<div class="form-group">
<label for="ttitle">Title</label><br>
<input type="password" style="width:250px;" class="form-control" name="ttitle" id="ttitle" placeholder="Title...">
</div>
<div class="form-group">
<label for="inputPassword">Password</label><br>
<input type="password" style="width:250px;" class="form-control" id="inputPassword" placeholder="Password">
</div><br><br><br>
<div class="form-group">
<label for="inputName">Name</label><br>
<input type="text" style="width:250px;" class="form-control" id="inputName" placeholder="Name">
</div>
<div class="form-group">
<label for="inputAddress">Address</label><br>
<input type="text" style="width:250px;" class="form-control" id="inputAddress" placeholder="Address">
</div>
<div class="form-group">
<label for="inputIncome">Income</label><br>
<input type="text" style="width:250px;" class="form-control" id="inputIncome" placeholder="Income">
</div><br><br><br>
<div class="form-group">
<label class="sr-only" for="inputSpouse">Spouse</label>
<input type="text" style="width:250px;" class="form-control" id="inputSpouse" placeholder="Spouse">
</div>
<div class="form-group">
<label for="inputPassword">Affiliation</label>
<input type="text" style="width:250px;" class="form-control" id="inputAfil" placeholder="Affilatio n>
</div>
<div class="form-group">
<label for="inputDOB">DOB</label>
<input type="text" style="width:250px;" class="form-control" id="inputDOB" placeholder="Date of birth">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
<br>
</div>
</body>
Is it possible to have create additional textboxes dynamically row by row?
In other words, per the code above, there are three rows, users may have the need to create additional textboxes for one or more rows but not all the rows.
So, anyone has any ideas how to create additional rows dynamically row by row instead of adding textboxes for all rows at once?
I hope one of you experts can help.
Simplest way can be this. You can created dynamic tr and append it to tbody of a table
$(":button").click(function(){
var str = "<tr>";
str+="<td><input type=textbox class=txtFirst /></td>";
str+="<td><input type=textbox class=txtSecond /></td>";
str += "</tr>";
$("table tbody").append(str);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=button value=Add />
<table>
<tbody>
</tbody>
</table>
You're not being specific about what rows you need to create. In any case, you could use something like ...
https://jsfiddle.net/2nayvcmx/
HTML
<div>
Employee name
</div>
<div>
<input type="text" id="employee_name" value="" name="employee_name" />
</div>
<div>
Employee title
</div>
<div>
<button id="add_employee_title">
Add title
</button>
</div>
<div class="add_employee_title">
</div>
<hr/>
<input type="submit" value="Submit" />
Javascript
$(document).ready(function() {
$('button#add_employee_title').click(function() {
$(this).hide();
$('div.add_employee_title').html('<input type="text" name="employee_title"/>');
});
});
<label>Name <input type="text" name="text_2"/></label>
<label>Phone <input type="text" name="text_3"/></label>
<label>Age <input type="text" name="text_4"/></label>
<label>Address <input type="text" name="text_5"/></label>
I want to convert above html into format given below. I tried with jQuery .wrap() but no success. Any help or pointers will be quite helpful.
<div class="row">
<div class="form-group">
<label>Name:<i class="mandate">*</i></label>
<input type="text" class="input-lg">
</div>
<div class="form-group">
<label>Phone:<i class="mandate">*</i></label>
<input type="text" class="input-lg">
</div>
</div>
<div class="row">
<div class="form-group">
<label>Age:<i class="mandate">*</i></label>
<input type="text" class="input-lg">
</div>
<div class="form-group">
<label>Address:<i class="mandate">*</i></label>
<input type="text" class="input-lg">
</div>
</div>
You can try this:
$(document).ready(function(){
$('label').each(function(){
var $this=$(this);
$this.wrap( "<div class='row'><div class='form-group'></div></div>");
var $child=$this.find('input[type="text"]');
$child.remove();
$this.parent().append($child);
$this.append('<i class="mandate">*</i>');
});
});
Demo
you input tag is not closed:
<label>Name <input type="text" name="text_2"/></label>
<label>Phone <input type="text" name="text_3"/></label>
<label>Age <input type="text" name="text_4"/></label>
<label>Address <input type="text" name="text_5"/></label>
afterwards please try (with the assumption of no other label exist on page):
$("label").wrap("<div class=\"row\"><div class=\"form-group\"></div></div>");