Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.06.2019, 12:03
Аспирант
Отправить личное сообщение для alex-romanov Посмотреть профиль Найти все сообщения от alex-romanov
 
Регистрация: 02.02.2019
Сообщений: 67

не отобржается в нужном формате шаблон даты в Chrome
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="resources/css/bootstrap.min.css">
    <link rel="stylesheet" href="resources/css/style.css">


    <script src="resources/js/jquery/jquery-3.3.1.js"></script>
    <script src="resources/js/jquery/jquery.validate.js"></script>
    <script src="resources/registration/js/bootstrap.min.js"></script>


    <script src="resources/registration/script/auth.js"></script>
    <script src="resources/registration/js/additional-methods.min.js"></script>
    <script src="resources/js/jquery/get-locale-browser-plugin.js"></script>
    <script src="resources/registration/script/script.js"></script>
</head>

<body>
<div class="success"><h2><a href="#">Аутентификация</a></h2></div>
<div class="errMessage"></div>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-4">
            <h2>Валидация формы</h2>
            <hr>
            <form class="form myForm" id="myForm">
                <div class="messageForCommonError js-form-message"></div>

                <div class="form-group">
                    <label for="inputEmail">Введите email:</label>
                    <input type="email" class="form-control email" name="email" id="inputEmail"
                           placeholder="Введите email">
                .....

                <div class="form-group dateInput">
                    <label for="inputDate">Введите дату:</label>
                    <input type="date" class="form-control" name="date" id="inputDate" placeholder="Введите дату">
                </div>
              
...
                <button type="button" class="btn btn-primary">Отправить</button>
            </form>
        </div>
    </div>
</div>


$(document).ready(function () {

    var lang = $('body').getLocaleOfBrowserPlugin();
    /*it is the selector for first field of enter password*/
    var selectorPasswordFirst = "classPassword";
    

    /*defines array of messages about mistake according to locale browser*/
    var messageInfo = createArrMessages(lang);

    validateForm(messageInfo, selectorPasswordFirst);
});


/*create an array of messages about mistake according to locale browser */
function createArrMessages(langLocaleBrowser) {
    var messagesRu;
    var messagesEn;

    messagesRu = {
   
        date: "Пожалуйста, введите корректную дату.",
      
        mainMessageOfErr: "Исправьте пожайлуста все ошибки !"
    };

    messagesEn = {
       
        date: "Please enter a valid date.",
        
        mainMessageOfErr: "Please, correct all mistakes !"
    };


    if (langLocaleBrowser === 'ru') {
        return messagesRu;
    } else {
        return messagesEn;
    }

}


/* 5404 3600 8922 0783 */


function validateForm(messageInfo, selectorPasswordFirst) {

    var selectorFormValidate = ".myForm";
    var selectorForMainMessageErr = ".js-form-message";

    /* this custom function to check enter letters only*/
    $.validator.addMethod("lettersonlyRusEng", function (value, element) {
            return this.optional(element) || /^[а-яА-ЯёЁa-zA-Z]+$/.test(value);
        },
        "Please don't insert numbers.");

    $(selectorFormValidate).validate({

        rules: {
            email: {
                required: true,
                email: true,
                minlength: 7,
                maxlength: 15
            },
            name: {
                required: true,
                minlength: 3,
                maxlength: 10,
                lettersonlyRusEng: true

            },

            lastname: {
                required: true,
                minlength: 3,
                maxlength: 10,
                lettersonlyRusEng: true
            },
            login: {
                required: true,
                minlength: 3,
                maxlength: 10

            },

            password: {
                required: true,
                minlength: 2,
                maxlength: 8

            },

            passwordRepeat: {
                required: true,
                minlength: 2,
                maxlength: 8,
                equalTo: '.' + selectorPasswordFirst

            },
            date: {
                date: true,
                required: true
            },
            telephone: {
                required: true,
                digits: true
            },
             creditCardName: {
                required: true,
                creditcard: true
            }

        },

        focusCleanup: true,
        focusInvalid: false,

        /* this option output main message about mistakes*/
        invalidHandler: function () {
            $(selectorForMainMessageErr).text(messageInfo.mainMessageOfErr)
        },

        /* this option is clearing from main message of mistakes*/
        onkeyup: function () {
            $(selectorForMainMessageErr).text("")
        },


        /* This is configuring custom messages about mistakes.
          This option work if did not connect of localization package*/
        messages: {
            email: {
                required: messageInfo.required,
                email: messageInfo.email,
                maxlength: messageInfo.maxlength,
                minlength: messageInfo.minlength
            },
            name: {
                required: messageInfo.required,
                maxlength: messageInfo.maxlength,
                minlength: messageInfo.minlength,
                lettersonlyRusEng: messageInfo.lettersonlyRusEng
            },
            lastname: {
                required: messageInfo.required,
                maxlength: messageInfo.maxlength,
                minlength: messageInfo.minlength,
                lettersonlyRusEng: messageInfo.lettersonlyRusEng
            },
            password: {
                required: messageInfo.required,
                maxlength: messageInfo.maxlength,
                minlength: messageInfo.minlength
            },

            passwordRepeat: {
                required:  messageInfo.required,
                maxlength: messageInfo.maxlength,
                minlength: messageInfo.minlength,
                equalTo: messageInfo.equalTo
            },
            date: {
                required: messageInfo.required,
                date: messageInfo.date
            },
            telephone: {
                required: messageInfo.required,
                digits: messageInfo.digits
            },
            creditcardName: {
                required: messageInfo.required,
                creditcard: messageInfo.creditcard
            }
        }
    });

}


css

/*стилизация поля ввода, при ошибке*/
.error {
     border-color: #ef079b;
     box-shadow: 0 0 3px #ff0000; 
   
}

/*стилизация сообщения об ошибке*/


/*внешний контейнер для поля ввода*/
.form-group {
   width: 30%;

      /* Относительно позиционированный элемент сдвигается со своего обычного 
       места в разных направлениях относительно границ родительского 
       контейнера, а пространство, которое он занимал, не исчезает. 
       При этом такой элемент может перекрывать другое содержимое 
       на странице. */
   position: relative;
}


label.error{
    width: 100%;
    display: block; /*Элемент генерирует структурный блок, как и тег <div>.*/
   
    padding-left: 25px;
    margin-left: 25px;
    
     color: #f9066b;
     margin-top: 0.5%;
     font-style:italic;
     font-weight:300;
     padding: 0.3% 0.3% 0.3% 0.3%;
     font-size: 12px; 
     border-radius: 4px; /*загругление углов контейнера для ошибок*/
     box-shadow: 0 0 3px #1023a2; /*тень вокруг контейнера для ошибок*/

        /*  Абсолютно позиционированный элемент полностью удаляется из 
        потока документа и позиционируется относительно границ его 
        блока-контейнера (другого элемента или окна браузера).*/
    position: absolute;
    top: 40%;
    left: 100%;
     z-index: 1;
}


/*контейнер для общих ошибок*/
.messageForCommonError {
    padding: 10px;
    margin-bottom: 20px;
    font-weight: bold;
    background-color: #caf4fe;
    color: #ff0000;
    text-align: center;
    font-size: 15px;
    font-style: italic;

}

/* используем псевдокласс 'empty', если в контейнере пока
    нет никаких данных (то есть данные еще не сгенерированы)*/
.messageForCommonError:empty{
    display: none; /*Элемент не генерирует никакой контейнер, полностью удаляясь со страницы.*/
}

.valid{
    box-shadow: 0 0 3px #37e309; /*тень вокруг контейнера для првоеренных данных*/
}

-label.error{
     
     color: #f9066b;
     margin-top: 0.5%;
     font-style:italic;
     font-weight:300;
     padding: 0.3% 0.3% 0.3% 0.3%;
     font-size: 12px; 
     border-radius: 4px; /*загругление углов контейнера для ошибок*/
     box-shadow: 0 0 3px #1023a2; /*тень вокруг контейнера для ошибок*/

}


С случае с Chrome, выбранная дата поступает на сервер в формате

dd/MM/yyyy , а нужно

dd-MM-yyyy

как это исправить ?

<input type="date" ....


Здесь нельзя менять тип , иначе не будет работать jquery-validate для данного поля....
Ответить с цитированием
  #2 (permalink)  
Старый 13.06.2019, 13:06
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от alex-romanov
С случае с Chrome, выбранная дата поступает на сервер в формате

dd/MM/yyyy , а нужно

dd-MM-yyyy
Все браузеры отправляя поле date, отправляют его значение в европейском формате YYYY-MM-DD, и это правильно. При этом в календаре формат даты соответствует локали, для нас это DD.MM.YYYY.

Следовательно проблемы не в браузере как таковом, а в плагине, видимо это get-locale-browser-plugin.js, который косячит под этим браузером.

Последний раз редактировалось laimas, 13.06.2019 в 14:03.
Ответить с цитированием
  #3 (permalink)  
Старый 13.06.2019, 22:41
Аспирант
Отправить личное сообщение для alex-romanov Посмотреть профиль Найти все сообщения от alex-romanov
 
Регистрация: 02.02.2019
Сообщений: 67

Сообщение от laimas Посмотреть сообщение
Следовательно проблемы не в браузере как таковом, а в плагине, видимо это get-locale-browser-plugin.js, который косячит под этим браузером.
он то как влияет

function ($) {
    $.fn.getLocaleOfBrowserPlugin = function (prop) {

        /*the locale of the browser*/
        var langLocaleBrowser = '';

        this.fadeIn('normal', function () {

            /*getting information about the locale of the browser*/
            getLang();
        });

        /* The method describes receive data of browser locale
         * window.navigator.browserLanguage - using for IE
         * */
        function getLang() {
            var lang = window.navigator.languages ? window.navigator.languages [0] : null;
            lang = lang || window.navigator.language || window.navigator.browserLanguage || window.navigator.userLanguage;
            if (lang.indexOf('-') !== -1) {
                lang = lang.split('-')[0];
            }

            if (lang.indexOf('_') !== -1) {
                lang = lang.split('_')[0];
            }
            langLocaleBrowser = lang;

            console.log('current locale : ' + langLocaleBrowser);
        }

        return langLocaleBrowser;
    }

}) (jQuery);


я его написал, чтобы удобно можно было узнавать локаль по умолчанию и это нужно для автоматической локализации веб-части приложения.

в firefox формат отображается как

dd-MM-yyyy

и в таком виде поступает на сервер
Ответить с цитированием
  #4 (permalink)  
Старый 13.06.2019, 22:44
Аспирант
Отправить личное сообщение для alex-romanov Посмотреть профиль Найти все сообщения от alex-romanov
 
Регистрация: 02.02.2019
Сообщений: 67

мне пришлось на сервере проверять разделитель и в соответствии с этим форматировать дату из строки в тип Date, чтобы можно было работать с СУБД.
Но это не очень правильно, думал кто знает как это исправить на уровне браузера.
Ведь календарь встроен в bootstrap, а значит им можно как то управлять.
Ответить с цитированием
  #5 (permalink)  
Старый 14.06.2019, 00:49
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,709

Сообщение от laimas
Все браузеры отправляя поле date, отправляют его значение в европейском формате YYYY-MM-DD, и это правильно.
Это совершенно неправильно!

В европейских странах (и не только) дату пишут так: dd.mm.yyyy или dd/mm/yyyy или dd-mm-yyyy, в Венгрии yyyy. mm. dd
В США mm-dd-yyyy или mm/dd/yyyy или mm.dd.yyyy или dd Mmm yyyy или dd mm yy.

И где вы видели у себя yyyy-mm-dd? (Вы же из РФ? У вас прямо так все дату пишут?)

yyyy-mm-dd является компьютерным форматом из RFC3339 для обмена дат, и в <input type="date"> он используется именно по этой причине!
  • Компьютерный «шашлычный формат» RFC 3339 или ISO 8601 записывается в виде yyyy-mm-dd. Согласно спецификации HTML5, этот формат используется для значения атрибута value, при отправке формы или по запросу через DOM API. Это не зависит от языка и региона.
  • Формат, отображаемый пользовательским интерфейсом элемента <input type="date"> и принимаемый как пользовательский ввод зависит от предпочтении пользователя. Например, в Mac OS с регионом «Соединенные Штаты», выбранным на панели настроек «Язык и текст», Chrome 75 использует формат «mm/dd/yyyy».

Спецификация HTML5 не включает какие-либо средства переопределения или ручного указания любого из этих формата.

Сообщение от alex-romanov
Здесь нельзя менять тип , иначе не будет работать jquery-validate для данного поля....
Кажется вы его где-то поменяли...

Последний раз редактировалось Malleys, 14.06.2019 в 01:36.
Ответить с цитированием
  #6 (permalink)  
Старый 14.06.2019, 21:51
Аспирант
Отправить личное сообщение для alex-romanov Посмотреть профиль Найти все сообщения от alex-romanov
 
Регистрация: 02.02.2019
Сообщений: 67

Сообщение от Malleys Посмотреть сообщение
Кажется вы его где-то поменяли...
Если в поле где появляется календарь стоит

type=date , тогда jquery-validate работает

как только меняю на type= text, могу использовать datepicker от jquery, но валидация для данного поля отключается.
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
скрипт вывода даты в формате 01.12.2014 aleksandr8i Общие вопросы Javascript 7 04.01.2014 14:05
вывод результатов в нужном формате Alfer Events/DOM/Window 1 20.09.2013 09:03