2014-09-11 3 views
1

У меня есть этот код, который должен отрицать отправку формы, если функция проверки ввода возвращает false. Я не уверен, что я сделал неправильно на этомJavascript deny submit не работает

<script> 
function validateName(x){ 
     // Validation rule 
     var re = /^[A-Za-z0-9']{3,}$/; 
     // Check input 
     if(re.test(document.getElementById(x).value)){ 
     // Style green 
     document.getElementById(x).style.background ='#ccffcc'; 
     // Hide error prompt 
     document.getElementById(x + 'Error').style.display = "none"; 
     return true; 
     }else{ 
     // Style red 
     document.getElementById(x).style.background ='#e35152'; 
     // Show error prompt 
     document.getElementById(x + 'Error').style.display = "block"; 
     return false; 
     } 
    } 
function validateForm(){ 
     var error = 0; 
     if(!validateName('name')){ 
     error++; 
     } 
    if(error > 0) { 
     return false; 
    } 
    } 
</script> 

И мой HTML выглядит следующим образом

<form action="register.php" method="post" onsubmit="return validateForm()"> 
Username 
<input type="text" name="username" id="username" onblur="validateName(name)" maxlength="12"/> 
<p class="inputdesc" align="center">(Between 8-12 characters.)</p> 
<input type="submit" name="submit" id="submit" value="Register"/> 
<input type="reset" value="Clear Form"/> 
</form> 

код по-прежнему позволяет представить даже если входной текст не является действительным.

+0

Что вам скажет ваша консоль отладки? – Martijn

+0

Я не использую какой-либо IDE .. есть ли что-то, что я мог бы проверить в Интернете быстро, чтобы дать сообщение консоли отладки для вас? – CudoX

+0

Нет, это консоль в вашем браузере. Нажмите F12 и обновите (в большинстве браузеров, в Windows) – Martijn

ответ

1

Что бы я сделать, это воспользоваться передачи объекта на функции вместо. Пример:

<form action="register.php" method="post" id="form"> 
Username 
<input type="text" name="username" id="username" onblur="validateName(this)" maxlength="12"/> 
<p class="inputdesc" align="center">(Between 8-12 characters.)</p> 
<input type="submit" name="submit" id="submit" value="Register"/> 
<input type="reset" value="Clear Form"/> 
</form> 

<script> 
var okay = false; 
function validateName(e){ 
    // Validation rule 
    var re = /^[A-Za-z0-9']{3,}$/; 

    // Check input 
    if(re.test(e.value)){ 
    // Style green 
    e.style.background ='#ccffcc'; 
    // Hide error prompt 
    // e.style.display = "none"; 
    okay = true; 
    }else{ 
    // Style red 
    e.style.background ='#e35152'; 
    // Show error prompt 
    e.style.display = "block"; 
    okay = false; 
    } 
} 

document.getElementById('form').addEventListener('submit', function(e){ 
    if(okay == false) { 
     e.preventDefault(); 
    } else { 
     e.submit(); 
    } 
}); 

</script> 
+0

это не лишена скобок? 'document.getElementById ('form'). addEventListener ('submit', function (e) {' – CudoX

+0

no @ Gelo103097 он имеет ниже, перед закрытием '', я просто использовал анонимную функцию вместо – Ghost

+0

, я не уверен, почему .. im с этой ошибкой на моей консоли 'TypeError: document.getElementById (...) является null' – CudoX

0

вы ищете имя, а не имя пользователя

if(/^[A-Za-z0-9']{3,}$/.test(document.getElementById(x).value) { 
    return true; 
}else{ 
    return false; 
} 


function validateForm(){ 
    var error = 0; 
    if(validateName('username') == false){ 
    error++; 
    } 
    if(error > 0) { 
    return false; 
    } 
} 

форма

<form action="register.php" method="post" onsubmit="return validateForm();"> 
    Username 
    <input type="text" name="username" id="username" onblur="validateName(name)" maxlength="12"/> 
    <p class="inputdesc" align="center">(Between 8-12 characters.)</p> 
    <input type="submit" name="submit" id="submit" value="Register"/> 
    <input type="reset" value="Clear Form"/> 
</form> 
Смежные вопросы