Client side validation for credit card form

Question

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>

Answer 1

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.

Answer 2

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.