Валидация скрытого поля формы
Здравствуйте
Есть форма - два поля, одно из них скрывается/показывается радиобаттонами. Также есть валидация формы на пустое поле и условие - если див, в котором находится поле скрыт, то это поле не проверять (и соответственно проверять, если див показан):
if(document.getElementById('vm_myadres_input').style.display == ''){//если див скрыт - не проверяем
Проблема заключается в следующем - если див (в нем поле) сначала скрыть, а потом показать, то в див вставляется style="display: block;" По условию валидации поле не скрыто и должно проверяться на пустое поле, но этого не происходит. Проверить поле не дает display: block; Как решить проблему? Вот пример: http://www.glassbus.ru/Untitled-26.html <div id="err_userfields" class="err_valid" style="color:red; font-weight:bold;"></div> <form action="index.php" method="post"> <input name="shipping_rate_id" id="zzz1" value="1" type="radio"> Самовывоз <em>(поле Адрес будет скрыто)</em><br> <input name="shipping_rate_id" id="zzz2" value="2" type="radio"> Доставка по Москве <em>(поле Адрес будет показано)</em><br><br> <div class="formField" id="vm_myname_input"> <input id="vm_myname_field" name="vm_myname" value="" class="inputbox" type="text"> Имя </div> <br> <div class="formField" id="vm_myadres_input"> <input id="vm_myadres_field" name="vm_myadres" value="" class="inputbox" type="text"> Адрес </div> <br> <input id="submit-form" type="submit" value="Оформить заказ" onclick="javascript: return(submitregistration());" /> </form>
<script type="text/javascript">
function submitregistration(){
//Проверка поля имя
if(document.getElementById('vm_myname_field').value == "") {//проверка на пустое поле
document.getElementById('err_userfields').innerHTML = 'Заполните поле Имя';
return false;
};
//Проверка поля Адрес
if(document.getElementById('vm_myadres_input').style.display == ''){//если див скрыт - не проверяем !!!ЗДЕСЬ ЗАСАДА!!!
if (document.getElementById('vm_myadres_field').value=="") {//проверка на пустое поле
document.getElementById('err_userfields').innerHTML = 'Заполните поле Адрес';
return false;
};
};
return true;
};
</script>
<script type="text/javascript">
$("input").click(function(){
if ($("input:checked").val() == "1") {
$("#vm_myadres_input").hide();
}
else
$("#vm_myadres_input").show();
});
</script>
|
sashgera,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$('[name="shipping_rate_id"]').click(function() {
$("#vm_myadres_input").toggle(this.value == 2);
})
$('form').submit(function() {
var text = '',
val = $.trim($('#vm_myname_field').val());
if (!val) {
text += ' <br>Заполните поле Имя '
}
val = $.trim($('#vm_myadres_field').val())
if (!val && $('#vm_myadres_field').is(':visible')) {
text += ' <br>Заполните поле Адрес '
}
$('#err_userfields').html(text)
return !text
})
});
</script>
</head>
<body>
<div id="err_userfields" class="err_valid" style="color:red; font-weight:bold;"></div>
<form action="index.php" method="post">
<input name="shipping_rate_id" id="zzz1" value="1" type="radio"> Самовывоз <em>(поле Адрес будет скрыто)</em>
<br>
<input name="shipping_rate_id" id="zzz2" value="2" type="radio"> Доставка по Москве <em>(поле Адрес будет показано)</em>
<br>
<br>
<div class="formField" id="vm_myname_input">
<input id="vm_myname_field" name="vm_myname" value="" class="inputbox" type="text"> Имя
</div>
<br>
<div class="formField" id="vm_myadres_input">
<input id="vm_myadres_field" name="vm_myadres" value="" class="inputbox" type="text"> Адрес
</div>
<br>
<input id="submit-form" type="submit" value="Оформить заказ" />
</form>
</body>
</html>
|
рони, спасибо, работает! А можно валидацию формы без jquery? Или укажите на ошибку - почему не срабатывает условие
if(document.getElementById('vm_myadres_input').style.display == ''){
|
form validate js
sashgera,
если div скрыт display = 'none' поэтому условие на видимость
if(document.getElementById('vm_myadres_input').style.display != 'none')
при условии установки none програмно или в атрибуте style, потому что кроме '' есть и значения по умолчанию типа 'auto'
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
window.addEventListener("DOMContentLoaded", function() {
var radio = document.querySelectorAll('[name="shipping_rate_id"]'),
visible = true,
div = document.querySelector("#vm_myadres_input"),
myadres = document.querySelector("#vm_myadres_field"),
form = document.querySelector("form"),
myname = document.querySelector("#vm_myname_field"),
err = document.querySelector("#err_userfields");
[].forEach.call(radio, function(item, i) {
item.addEventListener("click", function() {
visible = this.value == 2;
div.style.display = visible ? "" : "none"
})
});
form.addEventListener("submit", function(event) {
var text = "",
val = myname.value.replace(/\s+/g, "");
if (!val) text += " Заполните поле Имя <br>";
val = myadres.value.replace(/\s+/g, "");
if (!val && visible) text += " Заполните поле Адрес ";
text && event.preventDefault();
err.innerHTML = text;
return !text
}, false)
});
</script>
</head>
<body>
<div id="err_userfields" class="err_valid" style="color:red; font-weight:bold;"></div>
<form action="index.php" method="post" >
<input name="shipping_rate_id" id="zzz1" value="1" type="radio"> Самовывоз <em>(поле Адрес будет скрыто)</em>
<br>
<input name="shipping_rate_id" id="zzz2" value="2" type="radio"> Доставка по Москве <em>(поле Адрес будет показано)</em>
<br>
<br>
<div class="formField" id="vm_myname_input">
<input id="vm_myname_field" name="vm_myname" value="" class="inputbox" type="text"> Имя
</div>
<br>
<div class="formField" id="vm_myadres_input">
<input id="vm_myadres_field" name="vm_myadres" value="" class="inputbox" type="text"> Адрес
</div>
<br>
<input id="submit-form" type="submit" value="Оформить заказ" />
</form>
</body>
</html>
|
рони, спасибо!
|
| Часовой пояс GMT +3, время: 23:40. |