Показать сообщение отдельно
  #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 для данного поля....
Ответить с цитированием