javascript отключить/включить кнопку отправки при совпадении пароля

72
8

У меня этот html

> <div class="row">
> <div class="col-xs-6 col-sm-6 col-md-6">
> <div class="form-group">
> <input type="password" name="pass1" id="pass1" class="form-control input-lg" placeholder="Password"
> tabindex="3">
> </div>
> </div>
> <div class="col-xs-6 col-sm-6 col-md-6">
> <div class="form-group">
> <input type="password" name="pass2" id="pass2" onkeyup="checkPass(); return false;" class="form-control
> input-lg" placeholder="Confirm Password ">
> <span id="confirmMessage" class="confirmMessage"></span>
> </div>
>
> </div>
>
> </div>
>
> <div class="row">
> <input type="submit" id="login" value="Register">
> </div>

Как я могу сделать что-то вроде этого:

Когда пароль пуст, подача должна быть отключена (disabled = "disabled").

Когда что-то вводится в passsword, чтобы удалить отключенный атрибут.

Если поле пароля снова становится пустым (текст удаляется), кнопка отправки снова должна быть отключена.

Когда пароль не совпадает, кнопка отправки должна быть отключена

Я попробовал что-то вроде этого:

 <script type="text/javascript">
function checkPass()
{
//Store the password field objects into variables ...
var pass1 = document.getElementById('pass1');
var pass2 = document.getElementById('pass2');
//Store the Confimation Message Object ...
var message = document.getElementById('confirmMessage');
//Set the colors we will be using ...
var goodColor = "#66cc66";
var badColor = "#ff6666";
//Compare the values in the password field
//and the confirmation field
if(pass1.value == pass2.value){
//The passwords match.
//Set the color to the good color and inform
//the user that they have entered the correct password
pass2.style.backgroundColor = goodColor;
message.style.color = goodColor;
message.innerHTML = "Passwords Match!"
}else{
//The passwords do not match.
//Set the color to the bad color and
//notify the user.
pass2.style.backgroundColor = badColor;
message.style.color = badColor;
message.innerHTML = "Passwords Do Not Match!"
$("#submit").attr("disabled", "disabled");
}
}
</script>

отображаемое сообщение javascript, если пароль соответствует или не соответствует, но моя проблема заключается в том, что пароль не соответствует кнопке SUBMIT, и все еще идут и отправляются.

спросил(а) 2016-05-23T15:43:00+03:00 4 года, 6 месяцев назад
1
Решение
58

Вы должны изменить свойство элемента, а не атрибут:

$(document).ready(function() {
var isDisabled = false;
$('#toggler').click(function() {
isDisabled = !isDisabled;
$('#submit').prop('disabled', isDisabled);
});

$('form').submit(function(e) {
e.preventDefault();
alert('Submiting');
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
<button type="button" id="toggler">Disable/Enable</button>
<button type="submit" id="submit">Submit</button>
</form>

ответил(а) 2016-05-23T15:48:00+03:00 4 года, 6 месяцев назад
41

Извините, потому что я не могу комментировать, я отвечу вместо этого. Если у вас есть форма (я предполагаю, что вы делаете событие, хотя я не вижу его), вы можете сделать это так

 $("#form").on('submit', function(e) {
e.preventDefault();
if(!$('#submit').prop('disabled')){
$(this).submit();
}

});


В основном я прекращаю подачу сначала, а затем проверяю, отключена ли кнопка перед отправкой формы.

ответил(а) 2016-05-23T18:00:00+03:00 4 года, 6 месяцев назад
41

Используйте что-то похожее:

if (pass1.value && pass2.value && pass1.value == pass2.value) {
pass2.style.backgroundColor = goodColor;
message.style.color = goodColor;
message.innerHTML = "Passwords Match!"
$("#submit").prop("disabled", false);
} else {
pass2.style.backgroundColor = badColor;
message.style.color = badColor;
message.innerHTML = "Passwords Do Not Match!"
$("#submit").prop("disabled", true);
}

Я добавил две проверки длины (если значение "" оценивается как false) и добавил #prop() чтобы включить кнопку, когда две строки совпадают.

ответил(а) 2016-05-23T15:47:00+03:00 4 года, 6 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема