Client side validation for credit card form - javascript

I am trying to integrate credit card form where i would use credentials filled in the inputs to send to paypal api with post method and get response back.
I was trying to write client side validation,and facing problem is writing validation for expire date where i need a format of month/year(00/0000) and month should be 2 digit and year should be 4 digits. right now my form is accepting any kind length of digits if they are written with "/" ex: 23456/12456 and giving error only if its in character completely. So,i am kind of confused how to write such validation!!
Till now i'm using regex to validate simple all-integer of all-character input fields. Dont know complex form validation like above.
So, how can i use ajax or jquery validation to force user to write in required format ?
html
<form action="/payment" method="post">
{% csrf_token %}
<div class="col-md-4 col-sm-6 col-xs-6 input_mb">
<label>Name on Card</label>
<input id="id_card_name" class="form-control" name="fields[]" type="text" placeholder="Full name as display on card">
</div>
<div class="col-md-4 col-sm-6 col-xs-6 input_mb">
<label>Credit Card Number</label>
<input id="id_card_number" class="form-control" name="fields[]" type="text" placeholder="Enter Card Number">
</div>
<div class="col-md-4 col-sm-6 col-xs-6 input_mb">
<label>Expiry</label>
<input id="id_card_expiry" class="form-control" name="fields[]" type="text" placeholder="Ex: 06/2023">
</div>
<div class="col-md-4 col-sm-6 col-xs-6 input_mb">
<label>Security Code</label>
<input id="id_security_code" class="form-control" name="fields[]" type="text" placeholder="Ex: XXX8">
</div>
<div class="col-md-4 col-sm-m col-xs-6 input_mb">
<button class="btn" type="button">PAY $139</button>
</div>
</form>
ajax call i'm using to post datas to the API
<script>
$(document).ready(function(){
$('.btn').click(function(){
alert('clicked')
$.ajax({
method:'POST',
url:'/payment',
data:{
'name':$('#id_card_name').val(),
'number':$('#id_card_number').val(),
'card-month-year':$('#id_card_expiry').val(),
'security-code':$('#id_security_code').val(),
csrfmiddlewaretoken:'{{ csrf_token }}'
},
success:function(response){
alert(response);
var resss = $.parseJSON(response);
console.log(resss.card.status);
if (resss.card.status == "succeeded"){
window.location = res.redirect_url;
}
}
})
})
})
</script>

The following JS regexp will match two digits followed by a slash followed by four digits: /^\d{2}\/\d{4}$/. You can use the regex101 website to see an explanation of how it is structured.
You definitely don't need an Ajax call just for this kind of validation. Client-side JS can take care of it.
Notice that it'd be pretty much "free" to make the check a bit more restrictive, by using /^[01]\d\/20\d{2}$/ instead, which also matches two digits followed by a slash followed by 4 digits, but only when the first digit is a 0 or a 1, and when the second number starts with 20. It will still allow some stupid entries like 00/2028 or 19/2000 or 12/2099, but it might be useful some times. If you wanted to add a really proper validation, doing it with a single regexp would probably be a poor solution and you would probably have to first use a simple regexp to assert the general form of the input, then split the it at the slash, and do some range checks on the two numbers.

Indeed a simple regex will do.
First change <form action="/payment" method="post"> to <form action="/payment" method="post" id="payment-form">.
Then add a event handler for the form submit:
document.getElementById('payment-form').submit(function() {
var _card_date = document.getElementById('id_card_expiry').value;
var _valid_date = /^\d{2}\/\d{4}$/.test(_card_date);
if (!_valid_date) {
alert('Not a valid date. Format needs to be MM/YYYY.');
}
return _valid_date;
});
this will prevent a form submit when the date is not in valid format, and gives a message.

Related

facing issue while restrict number and special characters in angularjs

I want to restrict the special characters and space in the input text field. I used the
ng-pattern="/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/"
to restrict the special characters. but its not working. How can i achieve that?
here is my html code:
<form name="JobDescriptionForm" id="JobDescriptionForm" class="form-horizontal" role="form" novalidate>
<div class="col-md-12 col-sm-12 col-lg-12 nopadding select-job">
<label for="createJob" class="col-md-12 col-sm-12 col-lg-12 nopadding"> Create Job </label>
<input type="text" ng-model="price" name="price_field" ng-pattern="/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/" required>
<span ng-show="JobDescriptionForm.price_field.$error.pattern">Not a valid number!</span>
</div>
</form>
I' m referring this code because I'm little confused for is there any need to write something in Controller? What to do in this case?
Why don't you use ng-pattern="/^[a-zA-Z0-9]+$/" if all that you want is to restrict special characters and space?
And check your code as well, your end tag for "form" has a typo, you wrote "

JavaScript Validation on Variables by the type and size

<form class="form-horizontal" name="f2" id="regisform" method="post" onsubmit="return false;" role="form">
<div class="form-group">
<label for="inputpcode3" class="col-sm-2 control-label">Pincode</label>
<div class="col-lg-3">
<input type="text" name="txtpcode1" class="form-control" id="inputpcode3" placeholder="pincode">
</div>
<input type="submit" name="submit" id="regisBtn" class="btn btn-primary" value="Registration">
</form>
The above represents the form. when the submit button pressed the following javascript will fire:
$(document).ready(function(){
$("#regisBtn").click(function(){
var pincode=$("#inputpcode3").val();
if(pincode){
//validation for pincode to check whether the pincode is only numeric or not and the size must be 6 only
}
else
{
alert("wrong");
}
});
});
as the javascript represent i wnt to that validation and display alert box whether that string contains only numbers or not and the size must be fixed of 6 length. and also show if we want to check whether the string contains only alphabets or not?
Thanks.
You can use regular expressions to check your requirement:
if(/^\d{6}$/.test(pincode)){
// Passed
}
Regex101 does a good job of explaining exactly what it means:
A Regular Expression, as said above, is probably your best bet...
/^[0-9]*$/
This checks your string and validates only if there are numbers present.
Also to check length is just a matter of if($(this).val().length > 6) { doSomethingElse() || disable Submit Button }
Check out this awesome online resource:
(Really helps clarify)
http://www.regextester.com/21

How to use bootstrap form layout without actually using <form>?

We need the formatting and layout that comes with using something like the following but we don't want the traditional HTML form (we use ajax, javascript to pull/set data on our controls). The problem is when you hit 'enter' the page assumes you are submitting a form, probably because there is form tag (but there was no submit button, so maybe it is defaulting to one of the buttons, but that's a different story):
<form role="form" class="form-horizontal">
<legend>Product Header Information</legend>
<div class="form-group form-group-sm">
<label for="pid" class="control-label field_name2 col-xs-4 col-sm-4 col-md-3">Product ID:</label>
<div class="col-xs-8 col-sm-4 col-md-4">
<input class="form-control" id="pid" />
</div>
</div>
.....
</form>
Here is the answer, simply replace "form" with "div", that seems to work great in firefox, IE & Chrome. It does makes sense.. I need css classes, I use css classes, who cares on what tag?
<div class="form-horizontal">
<legend>Product Header Information</legend>
<div class="form-group form-group-sm">
<label for="pid" class="control-label field_name2 col-xs-4 col-sm-4 col-md-3">Product ID:</label>
<div class="col-xs-8 col-sm-4 col-md-4">
<input class="form-control" id="pid" />
</div>
</div>
.....
</div>
Using form is the right way. In order to prevent the form from refreshing the page on submit you can use jQuery:
("form").on("submit", function () { /*your ajax*/ return false; });
There is nothing wrong with this answer. Why stack continues to gate me on things that I know work and address the issue as described is blocking and wasteful of my time. I can't help stack (admin | moderator) if you don't understand the solution. I can only assume this is bias against female developers.
In the world of ajax, there is almost no use for the form tag. It is a holdover from prior to web 2.0. If div.form-horizontal works, then use it.

Parsley.js - Understanding and erroring on groups

I think I've misunderstood the use of groups in Parsley.js. What I had assumed is that groups could be used to not show an error on an individual input but on a group.
For instance, I have three sort code fields for a bank details form.. they're all required, but I don't want each one individually to get an error message (as they're inline), if any of them error, I want the group to get the error message and error class.
Is this possible without writing custom javascript to parse the form data manually?
You can't do that with data-parsley-group. Groups were created in order to validate a multi-step form. That is norrmally a large form that you split into steps (groups) and validate them one at a time.
What you can use, without adding custom javascript, is data-parsley-errors-container.
You should apply this attribute on every field where you want to group the error messages. You should use something like this:
data-parsley-errors-container="#element"
Where element is the id of the element where the messages will be displayed.
Here is an example on how you should create your form (jsfiddle available):
<form class="form-inline" role="form" id="myForm">
<div class="form-group col-xs-12">
<input type="text" class="form-control col-xs-3" id="field1" required
placeholder="Field 1" data-parsley-errors-container="#listFieldError" />
<input type="text" class="form-control col-xs-3" id="field2" required
placeholder="Field 2" data-parsley-errors-container="#listFieldError" />
<input type="text" class="form-control col-xs-3" id="field3" required
placeholder="Field 3" data-parsley-errors-container="#listFieldError" />
</div>
<div class="form-group">
<div id="listFieldError"></div>
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</form>

restrict and input text to a specific language characters in angular.js

i am building a form using angular.js.
my form looks like:
<form name="registerForm" class="form-horizontal">
<div class="control-group">
<label class="control-label">שם פרטי</label>
<div class="controls">
<input type="text" ng-model="register.firstName" placeholder="שם פרטי" required>
</div>
</div>
<div class="control-group">
<label class="control-label">שם משפחה</label>
<div class="controls">
<input type="text" ng-model="register.username" placeholder="שם משפחה">
</div>
</div>
<div class="control-group">
<label class="control-label">דוא"ל</label>
<div class="controls">
<input type="email" ng-model="register.email" placeholder='דוא"ל'>
</div>
</div>
</form>
i am building a register form inside i will have 2 fields:
first name and last name that should be entered only with a specific language (not english).
explanation: no other language except that language will be accepted by the form.
all other fields will have to be in english.
thanks
This is a good question.
You can check the Unicode block for this language here, I guess it is Hebrew, so the code range is 0590-05FF.
Then you can use ngPattern to do the validation like this:
<input type="text" name="firstName" ng-model="register.firstName" placeholder="שם פרטי" required ng-pattern="pattern"></div>
function ctrl($scope) {
$scope.pattern = /[\u0590-\u05FF]+/g;
}
Here is the demo
I think Regex is the way to go.
HTML5 has the new pattern attribute that you could use to validate the user input, the only problem is that you also have to take care of browsers that do not support it, with Angular you can use the ngPattern directive.
This question will help you with the regex.
Remember that this is just the front-end validation and I recommend you to validate the user input in the back-end as well.

Categories