0

I have inherited a site that has a programmatically created webform. The form posts to a custom module. The actual form works fine and the module receives the data correctly. The issue is that the form has quite a bit of JQuery validation that does not work. I have done a lot of hunting and I can not see why the validation does not work. Below is the form and the JS code

<form class="pay-form" enctype="multipart/form-data" action="" method="post" id="pay-form" accept-charset="UTF-8">

<div class="enquire-form-wrapper form-item webform-component webform-component-radios webform-component--credit">
    <label class="element-invisible" for="edit-submitted-credit">Credit <span class="form-required" title="This field is required.">*</span></label>
    <div id="edit-submitted-credit" class="form-radios enquire-form-check checkbox-circle">
    <div class="form-type-radio form-item-submitted-credit form-item radio">
        <input required="required" class="enquire-form-check checkbox-circle form-radio" type="radio" id="edit-submitted-credit-1" name="submitted[credit]" value="Visa">  <label class="visa" for="edit-submitted-credit-1"></label>
    </div>
    <div class="form-type-radio form-item-submitted-credit form-item radio">
        <input required="required" class="enquire-form-check checkbox-circle form-radio" type="radio" id="edit-submitted-credit-2" name="submitted[credit]" value="Mastercard">  <label class="mastercard" for="edit-submitted-credit-2"></label>

    </div>
    </div>
</div>

<div class="enquire-form-wrapper form-item webform-component webform-component-textfield webform-component--name webform-container-inline">
    <label>Name<span class="form-required" title="This field is required.">*</span></label>
    <input required="required" class="enquire-form-name form-control form-text required pay-name" type="text" value="" size="60" maxlength="128"  data-validation="alphanumeric">
    <p class="cc_name">Name as shown on credit card</p>
</div>
<div class="enquire-form-wrapper form-item webform-component webform-component-textfield webform-component--name webform-container-inline">
    <label>Card no.<span class="form-required" title="This field is required.">*</span></label>
   <input required="required" class="enquire-form-name form-control form-text required pay-card" type="text" value="" size="60" maxlength="128" data-validation="number" data-validation="length" data-validation-length="16">
    <p class="cc_number">The 16 digits displayed on the front of your credit card</p>
</div>
<div class="enquire-form-wrapper form-item webform-component webform-component-textfield webform-component--name webform-container-inline">
    <label>CVV2/CVC2<span class="form-required" title="This field is required.">*</span></label>
    <input required="required" class="enquire-form-name form-control form-text required pay-cvv" type="text" value="" size="60" maxlength="128"  data-validation="number" data-validation="length" data-validation-length="3">
    <p class="cc_cvv">The last 3 digits displayed on the back of your card</p>
</div>
<div class="enquire-form-wrapper form-item webform-component webform-component-select webform-component--name webform-container-inline">
<label>Expiry<span class="form-required" title="This field is required.">*</span></label>
<select class="enquire-form-expiry form-control form-select required pay-expiry-month" required="required"><option selected="selected" value="month">month</option><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select>
<span class="expiry_slash">/</span>
<select class="enquire-form-expiry form-control form-select required pay-expiry-year" required="required"><option selected="selected" value="yeart">year</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option><option value="2019">2019</option><option value="2020">2020</option></select>
<p class="cc_expiry">The expiry date displayed on your card</p>
</div>


<button type="button" class="btn btn-default pay-submit">Make Payment</button>

<div class="pay-message">No refund will be given once payment is made.</div>

</form>

The JS is

(jQuery)(".pay-submit").click(function(){

var validate = true;

if (!(jQuery)("input[name='submitted[credit]']:checked").val()){
        createAlert("Select a Credit card option");
        validate = false;
    }

    if (!(jQuery)(".pay-name").val() || !(jQuery)(".pay-card").val() || !(jQuery)(".pay-cvv").val() || !(jQuery)(".pay-expiry-month").val() || !(jQuery)(".pay-expiry-year").val()) {
        createAlert("Enter valid details to make payment");
        validate = false;
    }

    var card  = (jQuery)(this).find(".pay-card").val();
    if((card) && !(jQuery.isNumeric(card)) && ((card).length != 16)){
        validate = false;
        createAlert("Enter valid 16 digit card no.");
    }


    var cvv  = (jQuery)(this).find(".pay-cvv").val();
    if((cvv) && !(jQuery.isNumeric(cvv)) && ((cvv).length != 3)){
        validate = false;
        createAlert("Enter valid 3 digit CVV");
    }

 var expiry_month  = (jQuery)(this).find(".pay-expiry-month").val();
   if((expiry_month) && !(jQuery.isNumeric(expiry_month))){
            validate = false;
            createAlert("Enter valid expiry month");
        }

var expiry_year  = (jQuery)(this).find(".pay-expiry-year").val();
if((expiry_year) && !(jQuery.isNumeric(expiry_year))){
  validate = false;
   createAlert("Enter valid expiry year");
 }

    if(validate) {
        var arr = {
            "PaymentMethod" : (jQuery)("input[name='submitted[credit]']:checked").val(),
            "Name" : (jQuery)(".pay-name").val(),
            "Card" : (jQuery)(".pay-card").val(),
            "Cvv" : (jQuery)(".pay-cvv").val(),
    "Expiry_Month" : (jQuery)(".pay-expiry-month").val(),
    "Expiry_Year" : (jQuery)(".pay-expiry-year").val()
        };

        var request_pay = (jQuery).ajax({
        url: "<?php echo base_path(); ?>reservation/cpi?name="+arr["Name"]+"&card="+arr["Card"]+"&cvv="+arr["Cvv"]+"&expiry_month="+arr["Expiry_Month"]+"&expiry_year="+arr["Expiry_Year"]+"&method="+arr["PaymentMethod"],
        method: "POST",
        async: "true",
        beforeSend: function() {
            (jQuery)(".pay-block").hide();  
            (jQuery)(".payment-process-block").show();
            (jQuery)(".payment-process-message").html("Please wait as we proceed to the payment page...");
            (jQuery)(".payment-process-loader").show();
          }
        });

The validation of the credit cards at the radio checkboxes works fine. If they are not checked the alert happens. If any of the other fields are empty the validation works fine and I get the alert.

However None of the validation for isNumeric or length works e.g.

(jQuery.isNumeric(card)) && ((card).length != 16))

Does not appear to do anything regardless of what is entered in this field. What should happen is unless there is a numeric string 16 characters long we should get an alert.

I can't see why this is not working.

  • Have you installed jquery_update module? jQuery.isNumeric is added in jQuery 1.7 according to the docs. Drupal 7 ships with lower version out of the box. You should get an error in javascript console about undefined method isNumeric – Beebee Sep 7 '15 at 22:25
  • Yes the jquery_update module is installed and the default version is set to JQuery 1.10. I am not seeing any javascript console error messages – Richard Luckhurst Sep 8 '15 at 1:29
  • Can you do some debugging by yourself by printing out the variable contents using console.dir(variable);? Plus, that jQuery syntax is very weird. I'm not sure about the validity, but it certainly doesn't look standard. – Beebee Sep 8 '15 at 8:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.