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;
}
Related
I currently have this code https://codepen.io/jammydodger29/pen/RwgaVom where the user inputs their details into the fields and depending if its valid or not the background of the input will change. I am currently having a problem with my card field. The alert will trigger if the card isn't valid telling the user that the card details is wrong but it won't change the colour to pink, constantly remaining green (as if its valid). In addition, after clicking ok on the alert, I can still submit the form even if the card field is still incorrect. The code for this is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Technical Challenge</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js"></script>
</head>
<body>
<div class = form>
<form id = "form" form action="mailto:test#test.com" method="POST" enctype="text/plain">
<div class="form-group">
<label id="name-label" for="name">Name:</label>
<input
type="text"
name="name"
id="name"
pattern="[A-Za-z!#$%&'*+-/=?^_`{|}~]+"
title="Please enter a valid name."
class="form-control"
placeholder="Enter Your Name"
required
/>
<br>
<div class="form-group">
<label id="email-label" for="email">Email:</label>
<input
type="email"
name="email"
id="email"
class="form-control"
placeholder="Enter Your Email"
required
/>
<br>
<div class="form-group">
<label id="card-label" for="card">Card:</label>
<input
id="cardInput"
type="text"
size="24"
maxlength="20"
oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"
name="cc_number"
onblur="
// save input string and strip out non-numbers
cc_number_saved = this.value;
this.value = this.value.replace(/[^\d]/g, '');
if(!checkLuhn(this.value)) {
alert('Sorry, that is not a valid number - please try again!');
}"
" onfocus="
// restore saved string
if(this.value != cc_number_saved) this.value = cc_number_saved;
"
placeholder="Enter a Proxy Credit Card Number."
required
/>
<br>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">
Submit
</button>
</form>
</div>
</body>
</html>
input:required:valid, input:focus:valid {
background-color: rgb(137,200,46);
border: rgb(60,60,59);
}
input:not(:focus):not(:placeholder-shown):invalid {
background-color: rgb(231,0,100);
border: rgb(60,60,59);
}
function checkLuhn(input)
{
var sum = 0;
var numdigits = input.length;
var parity = numdigits % 2;
for(var i=0; i < numdigits; i++) {
var digit = parseInt(input.charAt(i))
if(i % 2 == parity) digit *= 2;
if(digit > 9) digit -= 9;
sum += digit;
}
return (sum % 10) == 0;
}
Any help with this would be really appreciated.
I don't know what a valid number input looks like so I will leave checking of that part to you. I extracted your inline js to external js file because such a big amount of inline js hinders readability. Aside from that, you can use formDOM.checkValidity() to check if all the fields of a form are valid and
you can also use field.setCustomValidity() to set a field to invalid.
function checkLuhn(input)
{
var sum = 0;
var numdigits = input.length;
var parity = numdigits % 2;
for(var i=0; i < numdigits; i++) {
var digit = parseInt(input.charAt(i))
if(i % 2 == parity) digit *= 2;
if(digit > 9) digit -= 9;
sum += digit;
}
return (sum % 10) == 0;
}
let cc_number_saved = "";
function onBlurEvent(mythis) {
cc_number_saved = mythis.value;
mythis.value = mythis.value.replace(/[^\d]/g, '');
if(!checkLuhn(mythis.value)) {
alert('Sorry, that is not a valid number - please try again!');
}
mythis.setCustomValidity("Invalid field");
}
function onFocusEvent(mythis) {
// restore saved string
// What is this for?
if(mythis.value != cc_number_saved) mythis.value = cc_number_saved;
}
function onSubmitEvent(mythis) {
if (!mythis.checkValidity()) {
event.preventDefault();
}
}
input:required:valid, input:focus:valid {
background-color: rgb(137,200,46);
border: rgb(60,60,59);
}
input:not(:focus):not(:placeholder-shown):invalid {
background-color: rgb(231,0,100);
border: rgb(60,60,59);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Technical Challenge</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js"></script>
</head>
<body>
<div class = form>
<form id = "form" form action="mailto:test#test.com" method="POST" enctype="text/plain">
<div class="form-group">
<label id="name-label" for="name">Name:</label>
<input
type="text"
name="name"
id="name"
pattern="[A-Za-z!#$%&'*+-/=?^_`{|}~]+"
title="Please enter a valid name."
class="form-control"
placeholder="Enter Your Name"
required
/>
<br>
<div class="form-group">
<label id="email-label" for="email">Email:</label>
<input
type="email"
name="email"
id="email"
class="form-control"
placeholder="Enter Your Email"
required
/>
<br>
<div class="form-group">
<label id="card-label" for="card">Card:</label>
<input
id="cardInput"
type="text"
size="24"
maxlength="20"
oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"
name="cc_number"
onblur="onBlurEvent(this)"
onfocus="onFocusEvent(this)"
placeholder="Enter a Proxy Credit Card Number."
required
/>
<br>
<div class="form-group">
<button onsubmit"onSubmitEvent(this)" type="submit" id="submit" class="submit-button">
Submit
</button>
</form>
</div>
</body>
</html>
This is a problem for school. I need to make an array of records to store user input that loops the number of times the user specifies.
1 - The user will enter the number of volunteers (between 5-10). I have that part working.
2 - The input form is suppose to display the number of times as the number of volunteers. I'm not sure how to do that.
3 - The user's input is to be stored in an array of records.
4 - A message is to be displayed at the bottom with each volunteer's inputted information.
I'm stuck on number 2 and I'm positive I'll need help with 3 & 4 too.
Any assistance would be greatly appreciated.
You can see the code I've written below and I've included the JS code for both functions that I have working (validateForm() & getNumberOfVolunteers())
function getNumberOfVolunteers() {
var y = document.forms["numberOfVolunteersForm"]["numberOfVolunteers"].value;
if (y == "") {
alert("Number of volunteers must be filled out.");
return false;
}
document.getElementById("numberOfVolunteers1").innerHTML = y;
return false;
}
function validateForm() {
var a = document.forms["inviteForm"]["recipientName"].value;
if (a == "") {
alert("Name must be filled out.");
return false;
}
var b = document.forms["inviteForm"]["organizationName"].value;
if (b == "") {
alert("Organization name must be filled out.");
return false;
}
document.getElementById("recipientName1").textContent = a;
document.getElementById("organizationName1").textContent = b;
return false;
}
<!DOCTYPE html>
<html lang="en-US">
<!--
<head>
<script src="js/getNumberOfVolunteers.js"></script>
</head>
-->
<body>
<header>
</header>
<section id="numOfVolunteers">
<form name="numberOfVolunteersForm" onsubmit="return getNumberOfVolunteers()">
<label for="numberOfVolunteers">Number of volunteers:
</label>
<input type="number" min="5" max="10" value="5" name="numberOfVolunteers" id="numberOfVolunteers" placeholder="Enter the number of volunteers" />
<input type="submit" value="submit" id="submit1" />
</form>
</section>
<section id="pageForm">
<form action="#" name=inviteForm onsubmit="return getVolunteerInfoIntoArray()">
Number of Volunteers Entered: <strong><span id="numberOfVolunteers1"> </span></strong> <br/> <br/>
<label for="recipientName">Recipient name:
</label>
<input type="text" name="recipientName" id="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:
</label>
<input type="text" name="organizationName" id="organizationName" placeholder="Enter your Organization Name" />
<input type="submit" value="submit" id="submit2" onclick="validateForm" />
</form>
</section>
<article id="placeholderContent">
Hello <span id="recipientName1"></span>!
<br/>
<br/> You have been invited to volunteer for an event held by <span id="organizationName1"></span>
</article>
<script>
var volunteerArray = [];
function getVolunteerInfoIntoArray() {
var volCount;
for (volCount = 5; volCount < getNumberOfVolunteers1.length; volCount++);
document.getElementById('recipientName');
document.getElementById('organizationName');
volunteerArray.push([recipientName.value, organizationName.value]);
}
</script>
</body>
</html>
I need to display the input form and the article multiple times. And store all the input in an array.
Is this what you're trying to do? Hope this helps even it's not exactly what you want hahahah
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.numberofvolunteers,
.all-volunteers{
padding:10px;
}
input,button{
margin:3px;
}
span{
font-size:12px;
padding:10px 10px;
}
</style>
</head>
<body>
<div class="numberofvolunteers">
<input type="number" id="volunteers" placeholder="Enter No. of volunteers"><button onclick="createVolunteerForm()">Submit</button>
</div>
<div id="all-volunteers">
</div>
<span id="array"></span>
<script>
var volunteerArray = [];
function createVolunteerForm(){
volunteerArray = [];
var numberofvolunteers = document.getElementById("volunteers").value;
var content = "";
if(parseInt(numberofvolunteers) < 5 || parseInt(numberofvolunteers) > 10){
alert("No. of volunteer should be 5 to 10");
}
else{
for(var i = 0; i < parseInt(numberofvolunteers); i++){
content += createForm(i);
}
}
document.getElementById("all-volunteers").innerHTML = content;
}
function createForm(index){
var content = ' <div id="volunteer-div-'+index+'">'+
'<div id="volunteer-form-'+index+'">'+
'<input type="text" id=recipient-'+index+' placeholder="Enter recipient name">'+
'<input type="text" id=organization-'+index+' placeholder="Enter organization name">'+
'<button id="submit-'+index+'" onclick="displayMessage('+index+');addToArray('+index+');">submit</button>'+
'</div>'+
'<span id="message-'+index+'"></span>'+
'</div>';
return content;
}
function displayMessage(index){
var message = "Hello " + document.getElementById("recipient-"+index).value + " your organization is " + document.getElementById("organization-"+index).value;
document.getElementById("message-" + index).innerHTML = message;
}
function addToArray(index){
volunteerArray.push({recipient : document.getElementById("recipient-"+index).value , organization : document.getElementById("organization-"+index).value});
document.getElementById("array").innerHTML = JSON.stringify(volunteerArray);
}
</script>
</body>
</html>
I coded an HTML form where I tried to validate it using javascript, However, the validation doesn't work. It should work on click of submit button. Everything looks fine! could not find the error! Please Help.
Below is the code for the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Term Deposit Interest Calculator</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script>
function validateform(){
var amount=document.myform.amount.value;
var years=document.myform.years.value;
var interst= document.myform.interst.value;
if (amount==null || amount==""){
alert("Amount can't be blank");
return false;
}else if (years==null || years==""){
alert("Years can't be blank");
return false;
}else if (interest==null || interest==""){
alert("Interest can't be blank");
return false;
}
}
</script>
</head>
<body>
<div class="card">
<h3>Term Deposit Interest Calculator</h3><br>
<form name = "myform" method="post"onsubmit="return validateform()">
<input type="text" name="amount" placeholder="Deposit Amount"><span id="num1"></span>
<input type="text" name="years" placeholder="Number Of Years"><span id="num2"></span>
<input type="text" name="interest" placeholder="Yearly Interst Rate"><span id="num3"></span>
<input type="submit" name="submit" class="my submit" value="Total Amount">
</form>
<div class="result">
</div>
</div>
</body>
</html>
<?php
if (!isset($amount7032)) { $amount7032 = ''; }
if (!isset($interest7032)) { $interest7032 = ''; }
if (!isset($years7032)) { $years7032 = ''; }
?>
You have written wrong form element name at below line
var interst= document.myform.interst.value;
it should be
var interest= document.myform.interest.value;
Basically because javascript was not able to find the form element and it was failing due to that.
I tried below code and its working:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Term Deposit Interest Calculator</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script>
function validateform(){
var amount=document.myform.amount.value;
var years=document.myform.years.value;
var interest= document.myform.interest.value;
if (amount==null || amount==""){
alert("Amount can't be blank");
return false;
}else if (years==null || years==""){
alert("Years can't be blank");
return false;
}else if (interest==null || interest==""){
alert("Interest can't be blank");
return false;
}
}
</script>
</head>
<body>
<div class="card">
<h3>Term Deposit Interest Calculator</h3><br>
<form name="myform" method="post" onsubmit="return validateform()">
<input type="text" name="amount" placeholder="Deposit Amount"><span id="num1"></span>
<input type="text" name="years" placeholder="Number Of Years"><span id="num2"></span>
<input type="text" name="interest" placeholder="Yearly Interst Rate"><span id="num3"></span>
<input type="submit" name="submit" class="my submit" value="Total Amount">
</form>
<div class="result">
</div>
</div>
</body>
</html>
I want to validate both email,mobile number using single textbox.
I tried in many ways but not working. i want to validate either it is javascript,html5,jquery,angularjs is not a problem.
please help me to solve this problem. thanks in advance
http://jsfiddle.net/ANxmv/3582/
<form name="form" ng-app="app" ng-controller="Ctrl" >
<div class="control-group" ng-class="{true: 'error'}[submitted && form.email.$invalid]">
<label class="control-label" for="email">Your email address/Mobile number</label>
<div class="controls">
<input type="email" name="email" ng-model="email" required />
</div>
</div>
<button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>
here is the simple javascript code which will validate both email and phone number.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
function ValidateEmail(mail)
{
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
// if (/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value))
if(mail.match(mailformat))
{ alert(mail);
return (true)
}
alert("You have entered an invalid email address!")
return (false)
}
function validate()
{
var data=document.getElementById("email").value;
checkNumberorEmail();
}
function phonenumber(inputtxt)
{
var phoneno = /^\d{10}$/;
if((inputtxt.match(phoneno)))
{
alert(inputtxt);
return true;
}
else
{
alert("enter 10 digit number");
return false;
}
}
function checkNumberorEmail()
{
var data=document.getElementById("email").value;
if (isNaN(data))
{
ValidateEmail(data) ;
}
else{
phonenumber(data)
}
}
</script>
</head>
<body>
<form >
<input type="text" name="email" id="email">
<input type="button" onclick="validate()">
</form>
</body>
</html>
FIDDLE
The method itself is not good. But here is a possible simple function in angular js
HTML
<form name="form" ng-app="app" ng-controller="Ctrl" >
<div class="control-group" ng-class="{invalidClass: 'error'}[submitted && form.email.$invalid]">
<label class="control-label" for="email">Your email address/Mobile number</label>
<div class="controls">
<input type="text" name="email" ng-model="email" required />
</div>
</div>
<button type="submit" class="btn btn-primary btn-large" ng-click="submitForm()">Submit</button></form>
Controller
$scope.submitForm = function(){
if(validateEmail($scope.email) || validateMobile($scope.email)){
// The nput is email or mobile
}
else{
//both are not valid
console.log("Invalid inputs");
$scope.invalidClass = true;
}
}
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validateMobile(email) {
var re = /^\d{10}$/;
return re.test(email);
}
I am trying to create a form which will ask a sure to input name, GPA and phone number. I need help to validate the GPA to be a number between 0 and 4 inclusive, including at most two decimal values after the grade.
I cannot figure where to start!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function enter()
{
var grade = document.getElementById("gpa").value;
if (grade >= 0 && grade <= 4)
{
alert("success");
}
}
</script>
</head>
<body>
<form id= "survey" name="survey">
Name:
<input type="text" name="fullname"/><br>
GPA:
<input type="text" id="gpa" name="gpa" maxlength="4"/><br><br>
<input type="submit" onclick="enter()"/>
</form>
</body>
</html>
Try something like this, its written with just javascript and html.
window.verify = function() {
var gpa = document.getElementById("gpa").value;
var ver = parseFloat(gpa);
alert(ver >= 0 && ver <= 4);
}
<input type="text" id="gpa" />
<br>
<br>
<button type="submit" onclick="verify()">Check GPA