Проверка нескольких полей в HTML-форме

0

Я разрабатываю форму для записи банковских реквизитов пользователей. На отправке я хочу убедиться, что они предоставили соответствующие данные для sortcode, номера счета и PIN-кода (я знаю, что вы никогда не должны записывать PIN-код только для моего проекта !!). Если какое-либо или все поля являются неправильной длиной, я хочу, чтобы появилась ошибка. Вот мой код, но на данный момент он, похоже, не ловит никаких проблем, возможно, кто-то может указать на какие-либо ошибки?

    <script>
    function formValidator(){
        var bankName = document.getElementById('bankName');
        var accName = document.getElementById('accName');
        var sortcode = document.getElementById('sortcode');
        var accNum = document.getElementById('accNum');
        var balance = document.getElementById('bal');
        var passhint = document.getElementById('passHint');
        var pin = document.getElementById('pin');
        var overdraft = document.getElementById('ODLimit');

        if(sortcodeLength(sortcode, 6)){
            if(accountNumLength(accNum, 8)){
                if(pinLength(pin, 4)){
                    return true;
                }
            }
        }
        return false;
    }

        function sortcodeLength(elem, val){
    var Input = elem.value;
    if(Input.length == val){
        return true;
    }else{
        alert("Please enter 6 digits for your sortcode");
        elem.focus();
        return false;
    }
    }

    function accountNumLength(elem, val){
            var Input = elem.value;
            if(Input.length == val){
                return true;
            }else{
            alert("Please enter 8 digits for your Account Number");
                elem.focus();
                return false;
            }
        }

    function pinLength(elem, val){
    var Input = elem.value;
    if(Input.length == val){
        return true;
    }else{
        alert("Please enter 4 digits for your Pin");
        elem.focus();
        return false;
    }
}
</script>

И тогда у меня есть моя форма, которая нуждается в проверке

    <form onClick='return formValidator()'>
Bank Name: <input type='text' id='bankName'/><br />
Acc Name: <input type='text' id='accName'/><br />
Sort Code: <input type='text' id='sortCode'/><br />
Acc Num: <input type='text' id='accNum'/><br />
Balance: <input type='text' id='bal'/><br />
PasswordHint: <input type='text' id='passHint'/><br />
Pin: <input type='text' id='pin'/><br />
Overdraft Limit: <input type='text' id='ODLimit'/><br />
<input type='submit' value='Check Form' />
</form>

Что я могу делать неправильно, что это не ломает ошибок в длине полей?

Теги:
javascript-events

2 ответа

0

Переместите событие onclick в кнопку отправки из формы, т.е.: onClick = 'return formValidator()'

<form >
Bank Name: <input type='text' id='bankName'/><br />
Acc Name: <input type='text' id='accName'/><br />
Sort Code: <input type='text' id='sortCode'/><br />
Acc Num: <input type='text' id='accNum'/><br />
Balance: <input type='text' id='bal'/><br />
PasswordHint: <input type='text' id='passHint'/><br />
Pin: <input type='text' id='pin'/><br />
Overdraft Limit: <input type='text' id='ODLimit'/><br />
<input type='submit' value='Check Form' onClick='return formValidator()' />
</form>
0

Вам нужно использовать обработчик события onsubmit в вашей форме, а не onclick

<form onsubmit='return formValidator();'>

Кроме того, у вас есть опечатка при поиске поля кода сортировки. У него неправильный корпус (который вызывал ошибку null ref).

var sortcode = document.getElementById('sortCode');
  • 0
    Глупая ошибка, спасибо за указание на это! Работает сейчас

Ещё вопросы

Сообщество Overcoder
Наверх
Меню