Develop Reference

input type number - max value

I have an input
<input type="number" max="100">
However, if the user write manually for example 200, the input accept it. Is it something normal ?
I can validate the entry with javascript but if there is a build in in the html input it would be great :)
Thanks

There is actually no "native" HTML way outside a form post to avoid the faulty manual entry. You could do something like this (here jquery code):
$('input[type="number"]').on('change input keyup paste', function () {
if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
});
This code applies to all inputs of type number in case of keyboard input, pasting, changing a validation method that checks, whether a max value exists and if so Math.min() returns the lowest-valued number passed into it. If the value is not a number 0 is returned.
See a demo at JSFiddle
In Vanilla JavaScript the handler would look like this:
var numElement = document.querySelector('input[type="number"]')
numElement.addEventListener('change', validateMax);
numElement.addEventListener('input', validateMax);
numElement.addEventListener('keyup', validateMax);
numElement.addEventListener('paste', validateMax);
function validateMax() {
if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
}
See a demo of the vanilla version at JSFiddle
This handler should do the trick.

I don't think there is a solution directly with HTML; the max and min attributes only work when clicking the up arrow and down arrow keys. Check out the post in the references section for more information. The image below shows that the input does not change when the up arrow button is clicked, since the max attribute is 100:
In the solution below, when the input event of the <input> element is triggered, the data input is checked by checking the max attribute with the isValid() method. You can change the disabled property of the submit button according to the result returned by the isValid() method.
const inputElement = document.querySelector('input');
function isValid(value){
if(parseInt(value) <= inputElement.getAttribute('max'))
return true;
return false;
}
inputElement.addEventListener('input', function () {
if(isValid(this.value))
console.log("true");
else
console.log("false");
});
<input type="number" max="100">
References
How can I limit possible inputs in a HTML5 "number" element?

If you are using form, you can just mark it as required and the form does the validation for you.
document.getElementById("myForm").addEventListener("submit", function (event) {
event.preventDefault();
console.log(document.getElementById("myNumber").value);
});
<form id="myForm">
<input id="myNumber" name="myNumber" type="number" max="100" required >
<button>Send It</button>
</form>
Now if you want to know if it is valid in JavaScript directly there is built in methods for that
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault();
console.log(document.getElementById("myNumber").value);
});
document.getElementById("check").addEventListener("click", function(event) {
console.log("form: ", document.getElementById("myForm").checkValidity());
console.log("input: ", document.getElementById("myNumber").validity.valid);
});
<form id="myForm">
<input id="myNumber" name="myNumber" type="number" max="100" required>
<button>Send It</button>
</form>
<button type="button" id="check">Check It</button>

Check value from a string after a special character if it's not empty

im working in little projet, and i have a little issue
So first im working in a form with differents inputs
the first input called by ID is #name
I try to write a code to check if my user fill the input correctly with this tructure
fisrtname_lastname
what i try to do on my sence, is to check first if the user type ( _ ) in the input, and check if he continue to add more infos after the special character.
and the others steps is when he fill in the right way the submit button is actif
$('#submit').removeAttr('disabled');
if its not its gona be inactif
$('#submit').attr('disabled', 'disabled');
** input code**
<input type="text" class="form-control text" name="p_Nom" id="name" maxlength="24" placeholder="firstname_Prenom" />
** Jquery part **
$('#name').keyup(function() {
$('#submit').attr('disabled');
let val = $(this).val();
if( (val.includes('_')) && (val.substr(val.indexOf('_') + 1) == null) ){
$('#submit').removeAttr('disabled');
} else{
$('#submit').attr('disabled', 'disabled');
}
});

You might consider using a regex instead: use the pattern [A-Za-z]+_[A-Za-z]+ for the input. No jQuery necessary:
<form>
<input pattern="[A-Za-z]+_[A-Za-z]+">
<button>Submit</button>
</form>
Or, to permit other non-alphabetical characters, use a negative character set instead:
<form>
<input pattern="[^_]+_[^_]+">
<button>Submit</button>
</form>
If you also need to run Javascript when invalid, add an invalid event listener:
$('input').on('invalid', () => {
console.log('invalid');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input pattern="[^_]+_[^_]+">
<button>Submit</button>
</form>

How to force the user to put only numbers

I want the user to only be able to use input for numbers I've tried several things like oninput="this.value = this.value.replace(/[^0-9.]/g, '') and a lot more but for example the code I sent if I type a letter and keep pressing the letter on the keyboard it won't turn it to anything, I need a code that will 100% force the user to type only numbers doesn't matter what happens. if I could put a number in the input box that the user cant delete for example 0 it will be good to.

There are a few different ways to accomplish this but one of them would be capturing the keypress itself and returning false if the input is not a number.
Also if I understand you correctly, to add a default value of "0", just define it in the input directly like value="0", or you could use a placeholder="0" if that's what you're looking for.
<input type="number" value="0" onkeydown="javascript: return event.keyCode === 8 || event.keyCode === 46 ? true : !isNaN(Number(event.key))" />

You can use <input type=...> as mentioned in the input specification.

While this wouldn't enforce the user input to numbers only, you may want to consider using the pattern attribute to leverage some built-in behaviour. If you type non-numeric characters, the text colour will turn red:
input:invalid {
color: red;
}
<input type="text" pattern="[0-9]+"/>
Then we can start looking at the constraint validation API:
The Constraint Validation API enables checking values that users have entered into form controls, before submitting the values to the server.
If you type non-numeric characters and try to submit the form, you should see a built-in tooltip displaying a custom error message:
const input = document.querySelector('input');
input.addEventListener('invalid', () => {
if (input.validity.patternMismatch) {
input.setCustomValidity('Numbers only please!!');
}
});
input:invalid {
color: red;
}
<form>
<input type="text" pattern="[0-9]+"/>
<button type="submit">submit</button>
</form>

$("#but").click(function(){
let inp_val = $("#txt").val();
if(isNaN(inp_val)){
alert("Just enter a number.");
$("#txt").val("");
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt">
<input type="button" value="CLICK" id="but">

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();
});
}
});

Not allow a blank character / space in a input form [duplicate]

This question already has answers here:
How to prevent invalid characters from being typed into input fields
(8 answers)
Closed 9 years ago.
Is it possible to not allow a blank character / space in a input form like below?
<input type="text" value="" maxlength="30" name="email" class="formfield w0">

Check this Fiddle. Relevant code:
$(function() {
$('#input1').on('keypress', function(e) {
if (e.which == 32){
console.log('Space Detected');
return false;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input1" />

Use HTML5's extended input types to apply constraint validation, which will prevent submitting the form with invalid emails in modern browsers:
<input type="email" value="" maxlength="30" name="email" class="formfield w0">
In older browsers, you can detect that the input's type is not "email", as it will default to "text" when a value is considered invalid. I'd recommend blocking the submission of the form, rather than preventing default action of the space key, which could be inadvertently circumvented by pasting or via other input methods.
The following code is an example of this, and should be executed after the document is ready:
var frm = document.getElementById('myform');
if (frm.email.type === 'text') {
frm.onsubmit = function () {
if (/\s/.test(frm.email.value)) {
// Tell your user the field is invalid here, e.g.
frm.email.className = 'invalid';
// Prevent form submission
return false;
}
}
}
Working demo: http://jsfiddle.net/hgc7C/
Don't forget that this is not a substitute for server-side form validation.

Yes it is possible by using javascript/JQuery.
If you want it for all text boxes, then do as below.
$(function() {
$('.formfield input[type=text]').on('keypress', function(e) {
if (e.which == 32)
return false;
});
});
If you want it for a specific textbox, then add an id to the textbox input and replace .formfield input[type=text] with #textBoxId