We Keep Coding

how to validate a input field in jquery or javascript with only indian mobile number?

i want to validate the input field with only indian mobile number and the input field should contain 91 at the beginning when the try to type a mobile number on the input and this input should not exceed more than 10 digit after 91.so if anyone can help me with jquery or javascript validation in this.
<input id="mobileNumber" onkeypress="mobileValidation()" type="number">
function mobileValidation()
{
var mobile = document.getElementById('mobileNumber').value;
var regex = (/^91/.test(mobile) && (mobile.length<13));
return regex;
}
But what i want that it should show 91 at the starting when press any key on that input field.

function validateMobile(){
var mobile=document.getElementById("mobile").value;
// caclulate a boolean result:
var result=(/^91/.test(mobile) && (mobile.length<13));
//Do what you want with result
alert(result);
}
<input id="mobile">
<input type="submit" value="validate" onclick="validateMobile()">

custom error message with more html validate

Hello I want to create a custom error alert in HTML
here I want to custom in( required) and another for ( max and min number)
<div class="form-group">
<label for="durationdays">Days</label><br>
<input type="number" name="duration" max="5" min="1" class="form-control" style="width:50%" required oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);">
</div>
and this is a javascript code
function InvalidMsg(textbox) {
if (textbox.value === '') {
textbox.setCustomValidity
('Required');
} else if (textbox.validity.typeMismatch) {
textbox.setCustomValidity
('ONlY number');
} else {
textbox.setCustomValidity('');
}
return true;
}
I want if the user clicks on send button with empty value show this(Required)
and if enter letter value show (ONLY number)
and if enter less than 1 or more than 5 show (should be less than or equal 5)

You can use textbox.setCustomValidity(`Max: ${textbox.max} Min:${textbox.min}`); to get the min and max values, then it's possible to show the numbers. The other ones should work fine.

Input type number maxlength 5

I want to limit the input type number to maximum 5 numbers, I am using below code, which is working well, only issue is that for backspace I have to use event.keycode which I dont want to use. Is there any alternative apart from usking keycode of backspace.
var input = document.getElementById('input');
input.addEventListener('keypress',showData,false)
function showData(event)
{
if(event.target.value.length<=5)
{
return true;
}
else
{
event.preventDefault();
}
}

If you want it so if the user tries to type more than 5 numbers it only keeps the 5 numbers:
input.oninput = function() {
if (this.value.length > 5) {
this.value = this.value.slice(0,5);
}
}

Why don't you just use:
<input type="number" max="99999">
This will still not stop a user from manually entering a value larger than 99999, but the input element will be invalid.

<input type="number" max="99999" />
How can I limit possible inputs in a HTML5 "number" element?

<form>
<input required type="text" name="inputname" pattern="[0-9]{5,}">
<input type="submit" value="submit">
</form>

Password box - get value from input field with javascript

Does anybody know how to make a password box like this image?
This password box will be the first page of the site/mobile. The user have to insert 4 numbers (1 - 2 - 3 - 4). If they dont type 1 -2 - 3 - 4 as their password, they will get a message box saying "wrong password". If they type correct they will be sent to the next page.
Appreciate help!

Here a working sample
var password = [1,2,3,4];
var pwdInputs = $("#pwdContainer input");
var inputs = pwdInputs.toArray();
pwdInputs.keyup(function(){
if (this.value.length == this.maxLength) {
if(inputs.indexOf(this) == inputs.length-1){
testPassword();
} else {
$(this).next('input').focus();
}
}
});
function testPassword(){
var valid = true;
for(var i=0; i<inputs.length; i++){
if(password[i] != inputs[i].value){
valid = false;
break;
}
}
if(valid){
console.log("Correct Password!");
window.location.href = 'http://www.google.com';
}else{
console.log("Wrong Password!");
}
}
div.box-big {
background-color: grey;
margin: auto;
display:inline-block;
padding: 10px;
padding-top: 20px;
}
input.box-text {
width: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pwdContainer" class="box-big" >
<input type="text" maxlength="1" class="box-text" >
<input type="text" maxlength="1" class="box-text">
<input type="text" maxlength="1" class="box-text">
<input type="text" maxlength="1" class="box-text">
</div>

As per your comment, in the picture provided you seem to want to provide the user with 4 boxes, and in it, they would then type their password.
In this case, I do not think that you need regular expressions at all. What you need to do, in my opinion, is the following:
Create the 4 password field text boxes.
In the section where you check the password, simply check that the first box has a value of 1 stored in it, the second box has 2, the third has 3 and the fourth has 4.
Since you are looking for specific, entire string values, as opposed to patterns, regular expressions are not needed.

You probably want a regular expression (regex), which can be used to validate your input.
The regex string would look something like this: \d{4} or [0-9]{4}, which is basically saying match all digits (`\d' or numbers from 0-9) four times strictly, so only four digits exactly would be valid
<input type="password" pattern="[0-9]{4}" id="passcode" required onkeyup="checkIfValid()">
<p id="isValid"></p>

If condition is true print text in input field with specific ID

Noob in need of some input here. I've spent some hours now trying to get this to work, with both PHP and javascript and this is where i'm at now.
I want to get an input field to show a specific text based on a condition. If the digit in input field 'ebctotal' is within the range 1-4, then show the text "very pale" in input field 'hue'.
Code:
function getHue() {
var ebc = document.getElementById("ebctotal").value;
if (ebc >= 1 && ebc <= 4) {
// insert text "Very pale" into element with id 'hue'
document.getElementById('hue').value;
}
}
HTML:
// print text in this field
<input class="input" type="text" id="hue" size="7" maxlength="20">
// based on value of this field
<input class="input" type="text" id="ebctotal" size="7" maxlength="20">
Am I on the right track?
Cheers

If you want to check whether length of "ebc" between 1-4 then try like;
function getHue() {
var ebc = document.getElementById("ebctotal").value;
if (ebc.length>=1 && ebc.length<=4) {
document.getElementById('hue').value='Very pale';
}
}
or whether value of "ebc" between 1-4 then try like;
function getHue() {
var ebc = parseInt(document.getElementById("ebctotal").value);
if (ebc>=1 && ebc<=4) {
document.getElementById('hue').value='Very pale';
}
}