Я разрабатываю форму для записи банковских реквизитов пользователей. На отправке я хочу убедиться, что они предоставили соответствующие данные для 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>
Что я могу делать неправильно, что это не ломает ошибок в длине полей?
Переместите событие 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>
Вам нужно использовать обработчик события onsubmit в вашей форме, а не onclick
<form onsubmit='return formValidator();'>
Кроме того, у вас есть опечатка при поиске поля кода сортировки. У него неправильный корпус (который вызывал ошибку null ref).
var sortcode = document.getElementById('sortCode');