Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.10.2015, 01:18
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

Валидация скрытого поля формы
Здравствуйте
Есть форма - два поля, одно из них скрывается/показывается радиобаттонами.
Также есть валидация формы на пустое поле и условие - если див, в котором находится поле скрыт, то это поле не проверять (и соответственно проверять, если див показан):
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, 30.10.2015 в 01:45.
Ответить с цитированием
  #2 (permalink)  
Старый 30.10.2015, 02:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

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>

Последний раз редактировалось рони, 30.10.2015 в 08:28.
Ответить с цитированием
  #3 (permalink)  
Старый 30.10.2015, 02:47
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

рони, спасибо, работает! А можно валидацию формы без jquery? Или укажите на ошибку - почему не срабатывает условие
if(document.getElementById('vm_myadres_input').style.display == ''){

Последний раз редактировалось sashgera, 30.10.2015 в 08:36.
Ответить с цитированием
  #4 (permalink)  
Старый 30.10.2015, 09:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

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>

Последний раз редактировалось рони, 30.10.2015 в 09:34.
Ответить с цитированием
  #5 (permalink)  
Старый 30.10.2015, 15:26
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

рони, спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Валидация поля формы / regexp Александр222 Общие вопросы Javascript 7 28.11.2014 22:03
Валидация формы в зависимости от значения radio batton housewm Events/DOM/Window 1 10.01.2014 17:46
Валидация поля для отправки формы shkarbatov Javascript под браузер 3 25.07.2011 14:07
Валидация формы dmsuslov jQuery 4 05.11.2010 16:12
Подгружаемые поля формы AlexJ AJAX и COMET 2 26.06.2009 18:04