Остановить отправку с пустым значком ввода

Question

Im Ищет простое решение, чтобы остановить регистрационную форму от отправки пустым полям ввода. Код для формы приведен ниже. Я хотел бы использовать простой Javascript soluiton, если это возможно.

<form id="login" method="post" action=""> 
    <input type="text" name="email" id="email" /> 
    <input type="password" name="pwd" id="pwd" /> 
    <button type="submit" id="submit">Login</button> 
</form>  

Если возможно, я также хотел бы изменить границу пустых полей.

Заранее спасибо.

Answer 1

Пример кода с фиктивными чеками:

<script type="text/javascript"> 
function checkForm(form) { 
    var mailCheck = checkMail(form.elements['email']), 
     pwdCheck = checkPwd(form.elements['pwd']); 
    return mailCheck && pwdCheck; 
} 

function checkMail(input) { 
    var check = input.value.indexOf('@') >= 0; 
    input.style.borderColor = check ? 'black' : 'red'; 
    return check; 
} 

function checkPwd(input) { 
    var check = input.value.length >= 5; 
    input.style.borderColor = check ? 'black' : 'red'; 
    return check; 
} 
</script> 

<style type="text/css"> 
#login input { 
    border: 2px solid black; 
} 
</style> 

<form id="login" method="post" action="" onsubmit="return checkForm(this)"> 
    <input type="text" name="email" id="email" onkeyup="checkMail(this)"/> 
    <input type="password" name="pwd" id="pwd" onkeyup="checkPwd(this)"/> 
    <button type="submit" id="submit">Login</button> 
</form> 

Answer 2

Возможный подход:

• настройка действие для #
• добавления обработчика для кнопки отправки или onsubmit форм
• изменить действие формы, если текстовые поля не являются пустыми

Редактировать: Чтобы сделать это, даже для пользователей, не являющихся javascript, введите # -действие при загрузке страницы.

Answer 3

Чтобы сохранить его минимален, я бы просто использовать:

<form id="login" method="post" action="" onSubmit="if (this.email.value == '' || this.pwd.value == '') {return false;}"> 

Предоставленный - не указывает, что это сгодится для пользователя, но работает лакомство ,