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

Question

[rudaki29rus]

Добрый день. Есть форма:

<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]" 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 но где и как его найти я не знаю.

Comments

[Игорь]

Вы пробовал указать просто requiered?
<input type="text" name="usrname" required>

[Максим Тимофеев]

1. Php тут точно ни при чем. У Вас же клиентская валидация не работает, а не серверная.
2. Валидаторы на клиенте надо писать на js, а не возлагать надежды на html5

[rudaki29rus]

Игорь, пробовал

[rudaki29rus]

Максим Тимофеев, не подскажете как это сделать?

[Максим Тимофеев]

rudaki29rus, Есть куча готовых решений:
https://codegeekz.com/best-javascript-form-validat...
https://github.com/search?l=JavaScript&q=validator...
https://yandex.ru/search/?text=js%20validator%20fo...

[Валерий]

Максим Тимофеев, чем надежды на html5 плохи? Тогда уж и на css3 не стоит надеяться, да и про пользователей IE не стоит забывать...

[Максим Тимофеев]

Валерий, одно дело border не скруглился, другое валидация, не надо сравнивать. Я про конкретный случай. Использовать required, который каждый браузер по своему обрабатывает не стоит. Тем более, что есть куча готовых js решений. Точнее использовать его можно, но в паре с js валидацией.

Answer 1

[Валерий]

Замените

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

на

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

UPD:

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

Comments

[rudaki29rus]

После замены перестала работать функция калькулятора и required все равно не работает.

[Валерий]

rudaki29rus, прошу прощения, не заметил что у вас две кнопки с разными задачами на одну форму. Обновил ответ.