<div>
<span id="mobile-valid">
<i class="fa fa-check"></i>
Valid Mobile No
</span>
<span id="mobile-invalid" >
Invalid mobile No
</span>
</div>
<div>
Mobile No
</div>
<div>
<input id="mobile-num" type="text"/>
</div>
How to do validation for 10 digit mobile number Using jQuery Ajax?Only numbers are allowed cannot use characters or alphanumeric characters.So how can i use jquery Ajax to do validation.I want to show on above input box that Invalid Email .and (dont want to show alert)
This will work for you...
$(document).ready(function(){
$("#mobile-num").on("blur", function(){
var mobNum = $(this).val();
var filter = /^\d*(?:\.\d{1,2})?$/;
if (filter.test(mobNum)) {
if(mobNum.length==10){
alert("valid");
$("#mobile-valid").removeClass("hidden");
$("#folio-invalid").addClass("hidden");
} else {
alert('Please put 10 digit mobile number');
$("#folio-invalid").removeClass("hidden");
$("#mobile-valid").addClass("hidden");
return false;
}
}
else {
alert('Not a valid number');
$("#folio-invalid").removeClass("hidden");
$("#mobile-valid").addClass("hidden");
return false;
}
});
});
.hidden{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mobile">
<div class="input">
<div class="label">
<div class="label-1">
<span id="mobile-valid" class="hidden mob">
<i class="fa fa-check pwd-valid"></i>Valid Mobile No
</span>
<span id="folio-invalid" class="hidden mob-helpers">
<i class="fa fa-times mobile-invalid"></i>Invalid mobile No
</span>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="label-2">
Mobile No
</div>
</div>
<div class="col-xs-9">
<input id="mobile-num" type="text" class="form-control form-change-element" />
</div>
</div>
</div>
</div>
<form action="#">
Mobile number: <input type="text" name="mobile" pattern="^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$" title="Enter Valid mobile number ex.9811111111" required>
<input type="submit">
</form>
starting with 9,8,7 you can add more as well.
you can test it using https://regex101.com/
Valid number are.
9883443344
09883443344
919883443344
0919883443344
+919883443344
+91-9883443344
0091-9883443344
+91 -9883443344
+91- 9883443344
+91 - 9883443344
0091 - 9883443344
Try this code in your jquery function
var mobileNum = $(this).val();
var validateMobNum= /^\d*(?:\.\d{1,2})?$/;
if (validateMobNum.test(mobileNum ) && mobileNum.length == 10) {
alert("Valid Mobile Number");
}
else {
alert("Invalid Mobile Number");
}
Try this code. It contains the ten digits number validation for mobile:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
body
{
padding: 10px;
font-family: Arial;
Font-size: 10pt;
}
span
{
font-weight:bold;
}
.san{
height: 26px;
width: 250px;
border: 1px solid #9E9E9E;
padding: 5px;
border-radius: 5px;
margin: 10px;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
$('#txtPhone').blur(function(e) {
if (validatePhone('txtPhone')) {
$('#spnPhoneStatus').html('Valid Mobil Number');
$('#spnPhoneStatus').css('color', 'green');
}
else {
$('#spnPhoneStatus').html('Invalid Mobile Number');
$('#spnPhoneStatus').css('color', 'red');
}
});
});
function validatePhone(txtPhone) {
var a = document.getElementById(txtPhone).value;
var filter = /[1-9]{1}[0-9]{9}/;
if (filter.test(a)) {
return true;
}
else {
return false;
}
}
});//]]>
</script>
</head>
<body>
Phone Number: <input type='text' id='txtPhone' class="san" maxlength="10"/>
<span id="spnPhoneStatus"></span>
</body>
</html>
try such thing
var value = "1234567.....";
var NumberRegex = /^[0-9]*$/;
if(value.length <= 10){
if(NumberRegex.test(value)){
//do whatever you want to
}else{
alert('invalid')
}
}
Jquery validation for mobile number using regular expression
Validation include:
10 digit number only (No alphabets and No special characters)
Numbers starts from 6,7,8,9
<html>
<body>
<label>Mobile Number:</label>
<input type="text" class="form-control mobile-valid">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.mobile-valid').on('keypress', function(e) {
var $this = $(this);
var regex = new RegExp("^[0-9\b]+$");
var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
// for 10 digit number only
if ($this.val().length > 9) {
e.preventDefault();
return false;
}
if (e.charCode < 54 && e.charCode > 47) {
if ($this.val().length == 0) {
e.preventDefault();
return false;
} else {
return true;
}
}
if (regex.test(str)) {
return true;
}
e.preventDefault();
return false;
});
});
</script>
</body>
</html>
For Demo Click here!
var pattern= /^[0]*(\d{9})*\s*$/;
Use this pattern only to validate Sri Lankan numbers. In above code line only validate mobile number starting with 0.
Related
I have two numbers GSTIN and PAN
I want to match GSTIN number Starting later 3 to 12 it would equal to PAN Number.
it should generate an alert, if it doesn't match
For example
My PAN is : 1234567891
My GSTIN is : aa1234567891bbb
Then it is correct
BUT
My PAN is : 1234567891
My GSTIN is : aa7894561239bbb
Then it is wrong
I searched on google but cant find any solution, It is possible? Please guide me in right direction.
i tried below code with substr, but i cant able to get that value
var pan = document.getElementById("pan");
var unino = document.getElementById("gstin");
var res = unino.substr(2, 11);
document.getElementById("button").addEventListener("click", function() {
alert( pan.value+'&'+res.value );
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<style type="text/css">
</style>
<body>
<div class="container">
<form method="post">
<div class="form-group">
<label>PAN</label>
<div class="input-group">
<input pattern=".{10,10}" maxlength="10" required="" type="text" class="form-control" name="pan" id="pan" placeholder="PAN No 10 digist" value="" title="PAN Number must be 10 character"/>
</div>
</div>
<div class="form-group">
<label>gstin</label>
<div class="input-group">
<input required="" type="text" class="form-control" name="gstin" id="gstin" placeholder="gstin" value=""/>
</div>
</div>
<input type="submit" name="submit" value="submit" class="btn btn-primary" id="button">
</form>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
This is the updated js chunk which would work for you. But this would only validate the lengths and if GSTIN contains PAN.
var pan = document.getElementById("pan");
var unino = document.getElementById("gstin");
document.getElementById("button").addEventListener("click", function() {
if (!(unino && unino.length == 15 && unino.indexOf(pan) == 2)){
alert( pan.value+'&'+res.value );
}
});
There should be regex validations also I suppose for the correct format of both in HTML.
The pattern for pan should be - "[A-Za-z]{5}[0-9]{4}[a-zA-Z]"
That for GSTIN should be - "[0-9]{2}[A-Za-z]{5}[0-9]{4}[a-zA-Z][0-9]{1}[a-zA-Z]{1}[0-9]{1}"
Just search for PAN string in GST string. if it finds PAN string in GST and index is 2 then there is a match. Otherwise NOT.
Hope that helps.
You can use search method as below
GST.search(PAN);
I found my answer.
document.getElementById("button").addEventListener("click", function() {
var pan = document.getElementById("pan").value;
var unino = document.getElementById("gstin").value;
var res = unino.substr(2, 10);
if(pan!=res){
alert("Wrong GSTIN Number...!");
}else{
alert("GST Number is matched.");
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<style type="text/css">
</style>
<body>
<div class="container">
<form method="post">
<div class="form-group">
<label>PAN</label>
<div class="input-group">
<input pattern=".{10,10}" maxlength="10" required="" type="text" class="form-control" name="pan" id="pan" placeholder="PAN No 10 digist" value="" title="PAN Number must be 10 character"/>
</div>
</div>
<div class="form-group">
<label>gstin</label>
<div class="input-group">
<input required="" type="text" class="form-control" name="gstin" id="gstin" placeholder="gstin" value=""/>
</div>
</div>
<input type="button" name="submit" value="submit" class="btn btn-primary" id="button">
</form>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Pass Value To Function
//get value of StateCode / PAN Number / GST Number
var chkGstNum = checkGstNumber(stateCode, panNum, gstNum);
if(chkGstNum == 0) // Error Code
else // Success Code
Function
function checkGstNumber(stateCode, panNum, gstNum)
{
var GstateCode = gstNum.substr(0, 2);
var GpanNum = gstNum.substring(2, 12);
var GEnd = gstNum.substring(12,14);
if(stateCode != GstateCode)
{
alert("Invalid GST Number.");
return false;
}
if(panNum != GpanNum)
{
alert("Invalid GST Number.");
return false;
}
if(GEnd != '1Z')
{
alert("Invalid GST Number.");
return false;
}
if(gstNum.length != 15)
{
alert("Invalid GST Number.");
return false;
}
return true;
}
Can you please take a look at this Demo and let me know why I am not able to do the calculation check using the each iterator?
As you can see I tried to use :
if (!parseInt($(this).val()) === ((parseInt($(this).closest('div').find('.upper').text())) - parseInt($(this).closest('div').find('.lower').text()))) {}
Which it didnt work then I used this :
if (!parseInt($(this).val()) === ((parseInt($(this).prev('.upper').text())) - parseInt($(this).prev('.lower').text()))) {
but still not validating the input?
I'm not sure if that what you want to achieve, take a look at following example :
$('#test').on('click', function (e) {
$("input").each(function () {
if ($(this).val().length === 0)
{
$(this).addClass('input-error');
} else {
var upper = parseInt($(this).prev().prev().text());
var lower = parseInt($(this).prev().text());
var current_value = parseInt($(this).val());
if (current_value != (upper-lower)){
$(this).addClass('input-error');
}else{
$(this).removeClass('input-error');
}
}
});
});
.input-error {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="upper">5</div>
<div class="lower">2</div>
<input type="text" id="txt1">
<hr />
<div class="upper">7</div>
<div class="lower">3</div>
<input type="text" id="txt2">
<hr />
<div class="upper">200</div>
<div class="lower">66</div>
<input type="text" id="txt3">
<hr />
<br />
<button type='button' id="test">Test</button>
Following is the code of my jsp where there are two input fields regNo and studentName.
I want the user to enter only numbers in regNo field. It should not contain any spaces and the length of the digits should be only 12.
I added the check for characters and I added CSS and now my Search button isn't working.
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
#mycontainer, h1, h3 {
text-align:center;
}
form {
display:inline-block;
}
#errorMsgNumber {
display: none;
background: brown;
color: white;
}
</style>
<script>
var regNoField = document.getElementById('regNo');
var regNoMessage = document.getElementById('regNoErrorMsgNumber');
var inputFieldsButton = document.getElementById('inputFields');
regNoField.addEventListener('keydown', onChange);
function onChange(e) {
if (e.keyCode < 48 || e.keyCode > 57) {
regNoMessage.style.display = 'block'
};
if(/^\d+$/.test(regNoField.value)) {
inputFieldsButton.disabled = false;
} else {
inputFieldsButton.disabled = true;
}
}
$(document).ready(function(){
$('#inputFields').click(function(event){
if (document.getElementById('regNo').value !=""){
$("#number").submit();
}else if(document.getElementById('studentName').value !=""){
$("#name").submit();
}
});
});
</script>
</head>
<body>
<div id="mycontainer">
<form method="post" action="number" id="number">
<div id="regNoErrorMsgNumber">Only numbers are allowed</div>
<div style="text-align: center;" >
<!-- //TODO: Only number, no spaces, no special symbol and 12 digit check-->
<input width="20" type="text" data-validation="numbers" id="regNo" name="regNo" size="30" maxLength="50" placeholder="Enter Register Number"> OR
</div>
</form>
<form method="post" action="name" id="name">
<input type="text" id="studentName" name="studentName" size="30" maxLength="50" placeholder="Enter Student Name"></input>
</form>
</div>
<div style="text-align: center;">
<input id="inputFields" type="button" value="Search" />
</div>
</body>
I made little modification in your code. It was the ordering of javascript code. I have put your java script code after the elements. Now it will work.
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
#mycontainer, h1, h3 {
text-align:center;
}
form {
display:inline-block;
}
#errorMsgNumber {
display: none;
background: brown;
color: white;
}
</style>
</head>
<body>
<div id="mycontainer">
<form method="post" action="number" id="number">
<div id="regNoErrorMsgNumber">Only numbers are allowed</div>
<div style="text-align: center;" >
<!-- //TODO: Only number, no spaces, no special symbol and 12 digit check-->
<input width="20" type="text" data-validation="numbers" id="regNo" name="regNo" size="30" maxLength="50" placeholder="Enter Register Number"> OR
</div>
</form>
<form method="post" action="name" id="name">
<input type="text" id="studentName" name="studentName" size="30" maxLength="50" placeholder="Enter Student Name"></input>
</form>
</div>
<div style="text-align: center;">
<input id="inputFields" type="button" value="Search" />
</div>
</body>
<script>
var regNoField = document.getElementById('regNo');
var regNoMessage = document.getElementById('regNoErrorMsgNumber');
var inputFieldsButton = document.getElementById('inputFields');
regNoField.addEventListener('keydown', onChange);
function onChange(e) {
if (e.keyCode < 48 || e.keyCode > 57) {
regNoMessage.style.display = 'block'
};
if(/^\d+$/.test(regNoField.value)) {
inputFieldsButton.disabled = false;
} else {
inputFieldsButton.disabled = true;
}
}
$(document).ready(function(){
$('#inputFields').click(function(event){
if (document.getElementById('regNo').value !=""){
$("#number").submit();
}else if(document.getElementById('studentName').value !=""){
$("#name").submit();
}
});
});
</script>
You can do one more thing instead of referring the jquery from website itself you can refer the google hosting look at the link for the benefit http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
HTML code:
<html>
<head>
<title>Registration Form</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css">
<script>
function submitAlbum(){
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('txtInput').value);
alert("condition1 is ..."+str1);
alert("condition2 is ..."+str2);
alert("condition3 is ..."+str1 == str2);
if (str1 == str2)
{
//alert("Entered captcha is correct");
}
else{
alert("Entered captcha is wrong");
document.getElementById("txtInput").value="";
return false;
}
var frm=document.getElementById("custRegistration");
frm.action="CustomerinfoServlet?formidentity=doRegistrations";
frm.submit();
}
</script>
</head>
<body style=" background-color:#f9f9f9" onload="DrawCaptcha();">
<div style="width: 100%; background-repeat:no-repeat; margin-top:30px; height:546px; background-image: url('images/mac.png')">
<br/><br/>
<div style="margin: 0 auto; background-color: #ffffff; opacity:0.9; border: 1px solid #D7EBFF; width: 400px; padding: 15px; height: 440px; margin-left: 56%;">
<form class="form" name ="custRegistration" id="custRegistration" onsubmit="return submitAlbum(this)" action="download.jsp" method="post" >
<p class="name">
<label for="name">Name <span style="color:red">*</span>:</label>
<input type="text" name="name" id="name" placeholder="" pattern="[A-Za-z ]{3,20}" required/>
<input type="hidden" id="formidentity" name="formidentity" value="doRegistrations"/>
</p>
<p class="email">
<label for="email">Email Id <span style="color:red">*</span>:</label>
<input type="email" name="email" id="email" pattern="((\w+\.)*\w+)#(\w+\.)+(com|org|net|us|info|biz|co)" required aria-required="true" placeholder="" required/>
</p>
<p class="Captcha" style="margin-top:5%; width: 100%;">
<div style="margin:0 0 0 1%">
<label class="captchalabel" style="width:38%; float: left;"><span style="margin:0 0 0 9%">Enter the text </span> <span style="color:red">*</span>:</label>
<input type="text" name="txtInput" id="txtInput" style="float: left;" required/> </div>
<div style="width: 20%; float: right;">
<input type="text" id="txtCaptcha" style="background-color:#E7EBF5; text-align:center; margin: 19px 104px 0px 0px; width: 120px; border-radius:0px; border:1px solid #ccc; font-weight:bold; font-family:Arial; " />
<input type="image" id="btnrefresh" onclick="DrawCaptcha();" src="images/captcha.png"/>
</div>
</p>
<p class="submit">
<input type="submit" value="Submit" />
</p>
</form>
</div>
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.realperson.js"></script>
<script type="text/javascript">
//Created / Generates the captcha function
function DrawCaptcha()
{
var a = Math.floor(Math.random() * 10)+ '';
var b = Math.floor(Math.random() * 10)+ '';
var c = Math.floor(Math.random() * 10)+ '';
var d = Math.floor(Math.random() * 10)+ '';
var e = Math.floor(Math.random() * 10)+ '';
var f = Math.floor(Math.random() * 10)+ '';
var g = Math.floor(Math.random() * 10)+ '';
var code = a + ' ' + b + ' '+ c + ' ' + d + ' ' + e + ' '+ f + ' ' + g;
document.getElementById("txtCaptcha").value = code
}
// Remove the spaces from the entered and generated code
function removeSpaces(string)
{
return string.split(' ').join('');
}
</script>
</html>
In this I have an issue. The problem is whenever I enter any text in the captcha textbox and press enter key. Then the captcha code is changing, ie, numbers are refreshing.
Also form is getting submit and getting the message ('captcha is wrong').
Can anyone tell me how to stop form submit when we press enter key after entering captcha in textbox?
Well you could disable the Enter button on the captcha input field using jQuery.
An example being:
$('#txtInput').bind("keypress", function (e) {
if (e.keyCode == 13) return false;
});
Where keyCode == 13 is the Enter key
Update
To add the above code in your file, just copy and paste this into your html:
<script type="text/javascript">
$(document).ready(function(){
$('#txtInput').bind("keypress", function (e) {
if (e.keyCode == 13) return false;
});
});
</script>
You can do this using the following jQuery code:
$('#custRegistration').bind("keyup keypress", function(e) {
var code = e.keyCode || e.which;
if (code == 13) {
e.preventDefault();
return false;
}
});
LOL :)
AS dfsq said in comment:
"Why do you press Enter if you don't want to submit the form?"
But to block sending form with enter on input do this:
$('body').on('keydown', '#chaptcha_input', function(e) {
if(e.which == 13 && !e.shiftKey) {
e.preventDefault();
}
});
Try this
$('#txtInput').on("keyup",function(e){
if(e.keyCode == 13)
return false;
// do your stuff here if not enter key pressed
});
HTML code for validaton of name, mobile number etc by giving error message beside the text box in red colour
if(p.length!=10) region.innerHTML="phone num must be 10 digits";
if(isNaN(p)) region.innerHTML="digits only";
I have used this type of format but not working.
if you want to use html validation try this once:
<style type="text/css">
.validationError {
border: solid 2px red;
}
.validationValid {
border: solid 2px green;
}
</style>
<form id="customerForm">
<label>
First Name:
<input id="firstName" required />
</label>
<label>
Social Security Number:
<input id="ssn" required pattern="^[0-9]{3}-[0-9]{2}-[0-9]{4}$" title="Expected pattern is ###-##-####" />
</label>
<input type="submit" />
</form>
script:
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.h5validate.js"></script>
<script type="text/javascript">
// Enable h5Validate plugin
$("#customerForm").h5Validate({
errorClass: "validationError",
validClass: "validationValid"
});
// Prevent form submission when errors
$("#customerForm").submit(function (evt) {
if ($("#customerForm").h5Validate("allValid") === false) {
evt.preventDefault();
}
});
</script>
Try following function
var phoneNumber = "(07) 1234-5678";
phoneNumber = phoneNumber.replace(/\D/g,'');
if (phoneNumber.length == 10) {
region.innerHTML = phoneNumber + ' contains 10 digits';
}
else {
region.innerHTML= phoneNumber +' does not contain 10 digits';
}