Принудительный ввод данных с помощью формы с помощью jQuery - PullRequest
Новая
       1

Принудительный ввод данных с помощью формы с помощью jQuery

0 голосов
/ 02 февраля 2011

У меня есть форма, чтобы взять номера кредитных карт. Как я могу заставить следующее:

16 цифр для номера CC, 15, если AmEx выбран из элемента выбора

3 цифры для номера CSV, 4, если AmEx выбран из элемента выбора

2 цифры для billingState (поэтому это могут быть только NY, CA, NV и т. Д.)

5 цифр для биллингаZip

(...) ... - .... формат для телефонных номеров

Вот мой код - http://slexy.org/view/s2dgDx7fV9

Я использую jQuery для большей части страницы. Как я могу сделать это в JQuery?

Спасибо!

Ответы [ 2 ]

1 голос
/ 02 февраля 2011

Полагаю, вам следует добавить код JavaScript. Обычный HTMl не предоставляет такого мощного механизма управления пользовательским вводом.

Используя jQuery, вы можете проверить номер кредитной карты следующим образом: 

function isAmExSelected()
{
  return $("#creditCardType").val() == "American Express";
}

function containsOnlyDigits(str)
{
   return str.match(/[^0-9]/) == null;
} 

function validateCCNumber()
{
    var ccn = $("#creditCardNumber").val();
    var onlyDigits = containsOnlyDigits(ccn);
    if(isAmExSelected())
    {
       return ccn.length == 15 && onlyDigits;
    }
    else
    {
       return ccn.length == 16 && onlyDigits;
    }
}

function registerValidation(id, validateMethod, errorMethod)
{
    $(id).change(function(){
        if(validateMethod() == false)
        {
            errorMethod();
        }
    });
}

    $(document).ready(function(){
        registerValidation("#creditCardNumber", validateCCNumber, function(){alert("Error!")});
    });

Вы должны написать другие подтверждения самостоятельно.

0 голосов
/ 03 февраля 2011

Свяжите свои входы с событиями keyup.Кроме того, вы можете проверить карту по первой цифре, то есть 4 = Visa, 5 = Mastercard, 3 = Amex (обычно) и 6 = Discover. 

$(document).ready( function(){
    $("#creditCardNumber").change(function(){
        $value = $(this).val();
        $type = $value.substr(0,1);

        if ( $type == '3' ){
            $(this).attr("maxLength", 15);
        }
        else {
            $(this).attr("maxLength", 16);
        }

        if ( $(this).attr("maxLength") < $value.length ) {
        $len = ( $(this).attr("maxLength") - 1 );
            $(this).val($value.substr(0,$len));
        }
    });
});

Вы можете сделать что-то подобное с CVV,или даже получить значение типа карты вместо первой цифры.Для штатов и почтовых индексов, если вы принимаете только адреса из США, вы можете просто установить атрибут maxLength в своем HTML.Что касается маски номера телефона, есть плагин jQuery, который я никогда не использовал, поэтому я не могу поручиться за него, но, надеюсь, это уведет вас в правильном направлении.

http://webdeveloperplus.com/jquery/how-to-mask-input-with-jquery/

...