@rudaki29rus

Как заставить работать required в всех браузерах?

Добрый день. Есть форма:
<div class="attention">
                <p>Обращаем Ваше внимание, что стоимость дополнительных работ и&nbsp;материалов рассчитывается по&nbsp;согласованию с&nbsp;абонентом (подготовка места под&nbsp;ПУ, замена труб, установка фильтров, установка запорной арматуры и&nbsp;т.п)</p>
                <div class="checkbox">

					<input id="ok" name="ok" type="checkbox" value="<?if(strlen($_REQUEST['ok']) > 0){echo $_REQUEST['ok'];}?>" required = "true"/>
                    <label for="ok">Ознакомлен</label>

                </div>
            </div>


required - срабатывает только в мозиле, в других браузерах сообщение выскакивает на секунду и пропадает.
Как можно это исправить?

Вот код всей страницы:
<? if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); ?>



<div class="page_request page_request_ipu">
    <div class="container">

        <form class="win-formmodel" id="quickOrder" name="iblock_add" action="<?=POST_FORM_ACTION_URI?>" method="post" enctype="multipart/form-data">

            <div class="attention">
                <p>Обращаем Ваше внимание, что стоимость дополнительных работ и&nbsp;материалов рассчитывается по&nbsp;согласованию с&nbsp;абонентом (подготовка места под&nbsp;ПУ, замена труб, установка фильтров, установка запорной арматуры и&nbsp;т.п)</p>
                <div class="checkbox">

					<input id="ok" name="ok" type="checkbox" value="<?if(strlen($_REQUEST['ok']) > 0){echo $_REQUEST['ok'];}?>" required = "true"/>
                    <label for="ok">Ознакомлен</label>

                </div>
            </div>

            <div class="calculation">   
                <div class="count-list">
                    <div class="item">
                        <label for="count-1">
                            Количество точек установки <span class="nobr">ПУ<sup class="question-icon">?</sup></span>
                        </label>
                        <div class="count clearfix">
                            <a href="#" class="minus btn-number">-</a>
                            <input id="count-1" type="text" name="countinstpy" value="0" maxlength="3" class="input-number">
                            <a href="#" class="plus btn-number">+</a>
                        </div>
                    </div>
					<div class="item">
                        <label for="count-2">
							Количество точек замены <span class="nobr">ПУ<sup class="question-icon">?</sup></span>
                        </label>
                        <div class="count clearfix">
                            <a href="#" class="minus btn-number">-</a>
                            <input id="count-2" type="text" name="countreppy" value="0" maxlength="3" class="input-number">
                            <a href="#" class="plus btn-number">+</a>
                        </div>
					</div>
						<div class="item">
                        <label for="count-3">
                            Наличие собственных приборов учета, кол-во:
                        </label>
                        <div class="count clearfix">
                            <a href="#" class="minus btn-number">-</a>
                            <input id="count-3" type="text" name="countmypy" value="0" maxlength="3" class="input-number">
                            <a href="#" class="plus btn-number">+</a>
                        </div>
                    </div>
                </div>
                <button type="button" class="calculate">Рассчитать</button>
                <div class="sum">ИТОГО: <span class="price nobr">0 рублей</span></div>
    		    <input type="hidden" name="price" id="price-input">
            </div>
      
            <div class="request_form form">
                
                <div class="form-group name-group clearfix">
                    <input class="item" name="surname" placeholder="Ваша Фамилия *" type="text" value="<?if(strlen($_REQUEST['surname']) > 0){echo $_REQUEST['surname'];}?>" required>
                    <input class="item" name="firstname" placeholder="Ваше Имя *" type="text" value="<?if(strlen($_REQUEST['firstname']) > 0){echo $_REQUEST['firstname'];}?>" required>
                    <input class="item" name="middlename" placeholder="Ваше Отчество *" type="text" value="<?if(strlen($_REQUEST['middlename']) > 0){echo $_REQUEST['middlename'];}?>" required>
                </div>


				<div class="form-group place-group clearfix">
                    <input class="item" name="zipcode" placeholder="163002" type="hidden" value="<?if(strlen($_REQUEST['zipcode']) > 0){echo $_REQUEST['zipcode'];}?>">
                    <!--
					<select class="item" name="settlement-type">
                        <option value="city">Город</option>
                        <option value="urban-type-settlement">Поселок городского типа</option>
                        <option value="village">Сельский населенный пункт</option>
                    </select>
					-->
                    <input class="item" name="settlement-name" placeholder="Архангельск" type="hidden" value="Архангельск" required>
                </div>
				
                <div class="form-group address-group clearfix">
                    <input class="item" name="street" placeholder="Улица *" type="text" value="<?if(strlen($_REQUEST['street']) > 0){echo $_REQUEST['street'];}?>" required>
                    <input class="item" name="house" placeholder="Дом *" type="text" value="<?if(strlen($_REQUEST['house']) > 0){echo $_REQUEST['house'];}?>" required>
                    <input class="item" name="block" placeholder="Корпус" type="text" value="<?if(strlen($_REQUEST['block']) > 0){echo $_REQUEST['block'];}?>">
                    <input class="item" name="apartment" placeholder="Квартира" type="text" value="<?if(strlen($_REQUEST['apartment']) > 0){echo $_REQUEST['apartment'];}?>">
                </div>
			
				<div class="form-group message-group">
                    <textarea name="comments" rows="5" placeholder="Комментарий" value="<?if(strlen($_REQUEST['comments']) > 0){echo $_REQUEST['comments'];}?>"></textarea>
                </div>

                <div class="form-group last-group clearfix">
                    <div class="item phone">
                        <label for="phone">Контактный номер телефона&nbsp;*</label>
                        <input id="phone" name="phone" placeholder="+7 9хх ххх-хх-хх" type="tel" value="<?if(strlen($_REQUEST['phone']) > 0){echo $_REQUEST['phone'];}?>" required> 
                    </div> 

					<div class="item phone">
                        <label for="email">E-mail&nbsp;</label>
                        <input id="email" name="email" placeholder="e-mail@e-mail.com" type="email" value="<?if(strlen($_REQUEST['email']) > 0){echo $_REQUEST['email'];}?>"> 
                    </div> 		
                    
                    <div class="item agreement">
                        <div class="agreement-group checkbox">
                            <input id="agreement" name="agreement" type="checkbox" value="<?if(strlen($_REQUEST['agreement']) > 0){echo $_REQUEST['agreement'];}?>" required>
                            <label for="agreement">Даю согласие на&nbsp;обработку персональных данных</label>
                        </div>
                    </div>
				</div>
				
				<div class="submit-group">
                    <div class="item submit">
                        <input name="submit" value="Отправить заявку" type="submit">
                    </div>  
                </div>
                
                <?
                if( count($arResult['err']) > 0 ){
                     echo '<div class="input shadow">';
                        foreach( $arResult['err'] as $item ){
                             echo '<div  style="color:red; text-align:center; margin-top: 15px;">'.$item.'</div>';
                        }
                    echo '</div>';
                }
                if( count($arResult['send']) > 0 ){
                    echo '<div class="input shadow">';
                        foreach( $arResult['send'] as $item ){
                            echo '<div style="color:green; text-align:center; margin-top: 15px;">'.$item.'</div>';
                         }
                    echo '</div>';
                }      
                ?> 
                
            </div>

        </form>

    </div>
</div>




<script>
    $(document).ready(function() {

        $('#ok').click(function() {
           // console.log(this)
        });



        $('.calculate').click(function() {

            var count_point_setup = $('#count-1').val(),
                count_point_change = $('#count-2').val(),
                metering_device = $('#count-3').val(),
                ok =  $('#ok').val();



            $.ajax({
                type: "POST",
                url: "/ajax/calculate.php",
                data: { cps : count_point_setup,
                        cpc : count_point_change,
                        md  : metering_device
                      },

                success: function(data){
                    $(".price").empty();
                    $(".price").append(data+" рублей");
                    $("#price-input").val(data);
                }
            });






            console.log(ok);
        });
    });
</script>


В других местах required работает как надо. Сайт на битриксе. Может проблема в обработчике php но где и как его найти я не знаю.
  • Вопрос задан
  • 268 просмотров
Пригласить эксперта
Ответы на вопрос 1
it_monk
@it_monk
Разработчик в oncloud.ru
Замените

$('.calculate').click(function() {

на

$('#quickOrder').submit(function() {

UPD:

html5-валидация в вашем случае не подойдёт, т.к. форма у вас одна, но по нажатию кнопки "рассчитать" валидировать нужно лишь часть формы. Используйте js-валидацию как вам порекомендовали в комментариях.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы