Develop Reference

Limit the user's input in an input number to 4 digits

How can I prevent (usign maybe Angular) the user from entering more than 4 numbers in a an simple number like this one :
<input type="number">
I used ng-maxlength, and max attributes, but those attributes as specified by w3.org specs and the official website Angular, do not prevent the user from adding more numbers.
What I want is that the input stops in 4 digits, like adding in somehow a mask or something to it.

Here is a way to do it using JavaScript:
HTML
<input type="number" oninput="checkNumberFieldLength(this);">
JavaScript
function checkNumberFieldLength(elem){
if (elem.value.length > 4) {
elem.value = elem.value.slice(0,4);
}
}
I would also suggest to make use of the min and max HTML attributes for the input Number element, if it applies in your case.
JSFiddle
W3c: input Number

Well, as somebody stated above maxlength doesn't work with inputs of type number, so you can do it this way:
<input type="text" pattern="\d*" maxlength="4">
of course, this will do if it's not a requirement to have input type="number"

Using ng-pattern with a regex
\d : digits
{4} : 4 times
<input type="number" ng-pattern="/^\d{4}$/" />

I would create a function in your controller like this
angular.module("my-app", [])
.controller('my-controller', function($scope) {
$scope.checkInput = function() {
if (input.value.length > 4) {
input.value = input.value.slice(0,4);
}
});
});
Then in your view you can do something like this
<input type="number" max="9999" ng-input="checkInput()" />
Warning: The max attribute will only work for the spinner. The user will still be able to enter numbers higher than that. Here's an example
<input type="number" max="9999" />

You can do that using modernizr and jquery.
I've made an example here: https://jsfiddle.net/5Lv0upnj/
$(function() {
// Check if the browser supports input[type=number]
if (Modernizr.inputtypes.number) {
$('input[type=number]').keypress(function(e) {
var $this = $(this),
maxlength = $this.attr('maxlength'),
length = $this.val().length;
if (length >= maxlength)
e.preventDefault();
});
}
});

How to add IF ELSE condition for rules (for multiple forms) in Jquery validation

I am using jQuery validation to validate multiple forms with same id. Each form contains different fields and I want to add these fields validation rules to jQuery validate function. How can I add these rules for multiple forms (every form has the same id)?
Example
Form1
<form id="new-form">
<input type="text" name="name" value=""/>
<input type="text" name="email" value=""/>
<input type="submit" name="submit" value="submit"/>
</form>
Form 2
<form id="new-form">
<input type="text" name="mobile" value=""/>
<input type="text" name="address" value=""/>
<input type="submit" name="submit" value="submit"/>
</form>
JavaScript function
$('#new-form').validate({
// I want to add rules here for both forms
});

I am using jQuery validation to validate multiple forms with same id
You cannot use the same id multiple times on the same page. It's invalid HTML and it will break your JavaScript. Only the first instance of an id will be considered.
If you change your id into a class, then you can freely use it multiple times, and it's valid HTML.
<form class="new-form">...</form>
<form class="new-form">...</form>
However, the jQuery Validate plugin will still only consider the first instance (a limitation of this particular plugin). The workaround is to use a jQuery .each() together with class naming...
$('.new-form').each(function() { // select every form on the page with class="new-form"
$(this).validate() { // initialize plugin on every selected form
// rules for both forms
});
});
Each form contains different fields and I want to add these fields validation rules to jQuery validate function.
Simply declare all the rules for both forms. The plugin will ignore any field names that do not exist on the form.
$('.new-form').each(function() { // select every form on the page with class="new-form"
$(this).validate() { // initialize plugin on every selected form
rules: {
name: {
required: true
},
email: {
required: true
},
mobile: {
required: true
},
address: {
required: true
}
},
// other options, etc.
});
});

That is not possible reason same id is not working so change id name.then use below code:
$().ready(function() {
// First form validate
$("#commentForm").validate();
// Second form validate
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
}
}messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
}
});
});

Jquery Validation validate form-array with index [duplicate]

This question already has answers here:
Validating array inputs using jquery validation plugin
(4 answers)
Closed 8 years ago.
I need to validate the floor fields that mention below.
<form id="test_form" >
<input name="floor[abc]" type="text" class="input_txt_l " value="" />
<input name="floor[cde]" type="text" class="input_txt_l " value="" />
</form>
I tried with jquery validator plug-in.
jQuery("#test_form").validate({
rules: {
'floor[]':{
required:true
}},
messages: {
'floor[]':{
required:"floor is required."
}
}
});
In here validation is not working. but if the floor has no index , It works well. If someone have idea to fix this issue please help me.

There are different ways to solve your problem:
Either you use addClassRules:
// using the class name instead of field name
jQuery.validator.addClassRules("input_txt_l", {
required: true
});
Or you handle each field separately, because in fact they are named different:
jQuery("#test_form").validate({
rules: {
'floor[abc]':{
required:true
},
'floor[cde]':{
required:true
},
}
});
Or you rename your fields:
HTML:
<input name="floor[][abc]" type="text" class="input_txt_l " value="" />
<input name="floor[][cde]" type="text" class="input_txt_l " value="" />
JavaScript:
jQuery("#test_form").validate({
rules: {
'floor[]':{
required:true
}},
});
fiddle is here.

How to validate Integer value in jquery

I need to validate input field, it should be integer(0-100), if max_seat = 5 then min_seat should be less than or equal to max_seats.
<form class="cmxform form-horizontal" id="table_info" name="table_info" method="post" action="">
<input class="span6 " id="max_seat" name="default_seats" type="text" />
<input class="span6 " id="min_seats" name="default_seats" type="text" />
</form>
and the jquery is looking like this, how to create rules in this type validation, thank you
$("#table_info").validate(
{
rules: {
min_range :"required integer",
max_seats:"required integer"
},
messages: {
max_seats: "* Required",
min_range: "* Required",
}
});

This is not how you declare multiple rules. (This shorthand style can only be used with one rule.)
rules: {
min_range :"required integer",
max_seats:"required integer"
}
You must declare each rule separately. And for an integer, you can use the digits method.
Your HTML is also not valid for this plugin...
<input class="span6 " id="max_seat" name="default_seats" type="text" />
<input class="span6 " id="min_seats" name="default_seats" type="text" />
Each field must contain a unique name attribute and you would declare your rules based on that name. (Declare the messages option similarly)
rules: {
min_seats: { // <- this is the NAME attribute of the field, not ID
required: true,
digit: true
},
max_seats: { // <- this is the NAME attribute of the field, not ID
required: true,
digit: true
}
}
To compare the two fields, you must use the .addMethod() method and declare your new custom rule the same as above.

Can I use the range method as a class with the jQuery validation plugin?

I have a form that will have input fields added dynamically via JavaScript. Because I don't know about all of the fields beforehand, I can't define a range restriction like this:
$("#myform").validate({
rules: {
field: {
required: true,
range: [13, 23]
}
}
});
Source: http://docs.jquery.com/Plugins/Validation/Methods/range#range
For most validation methods, such as required, I have been adding validation method names as classes like this:
<input type="text" name="text_2" class="required">
Is it possible for me to use range in the same way that I've used required above? Or do I need to create a new method with a regular expression?

If your input name is text_2 be sure to update that in your rules like so
$("#myform").validate({
rules: {
text_2: {
required: true,
range: [13, 23]
}
}
});
or just change your input with the required field
<input type="text" name="text_2" class="required" range="13,23" />

The current version of jQuery validate respects the min and max attributes of the element so you can have a non-required input with range restrictions like this:
<input type="text" name="text_2" class="number" min="13" max="23" />