Остановить отправку с пустыми значениями ввода - PullRequest
Новая
       8

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

6 голосов
/ 25 июля 2009

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

<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>

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

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

Ответы [ 3 ]

9 голосов
/ 26 июля 2009

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

<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>
3 голосов
/ 25 июля 2009

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

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

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

2 голосов
/ 23 февраля 2012

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

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

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

...