function pre_validateForm_vo(){
if ($('#ticket-sections').val() == ""){
$('#ticket-sections').css('border',' 2px solid #ff0000');
$('.ticket-form-vo .error_sections').html('Выберите раздел вопрос-ответ');
}
else if ($('#ticket-pagetitle').val().length < 10 || $('#ticket-pagetitle').val().length > 20){
$('#ticket-pagetitle').css('border',' 2px solid #ff0000') ;
$('.ticket-form-vo .error_title').html('Введите тему вопроса');
}
else if ($('#ticket-editor').val().length < 10 || $('#ticket-editor').val().length > 20){
$('#ticket-editor').css('border',' 2px solid #ff0000') ;
$('.ticket-form-vo .error_text').html('Введите Ваш вопрос');
}
else {
$('#ticket-sections').css('border',' 2px solid #E6E6E6');
$('#ticket-pagetitle').css('border',' 2px solid #E6E6E6');
$('#ticket-editor').css('border',' 2px solid #E6E6E6');
$('#ticket-sections-step2').val($('#ticket-sections').val());
$('#voprostext-step2').val($('#ticket-editor').val());
$('#voprostitle-step2').val($('#ticket-pagetitle').val());
$('.ticket-form-vo .error_title').html('');
$('.ticket-form-vo .error_text').html('');
$('.ticket-form-vo .error_sections').html('');
$('.modal-vopros-step2').modal('show');
}
};/*!
* Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*!
* Generated using the Bootstrap Customizer (http://bootstrap-3.ru/customize.php?id=0428e8ddac0d8731dc5b9d39b701d0e0)
* Config saved to config.json and https://gist.github.com/0428e8ddac0d8731dc5b9d39b701d0e0
*/
if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(t){"use strict";var e=t.fn.jquery.split(" ")[0].split(".");if(e[0]<2&&e[1]<9||1==e[0]&&9==e[1]&&e[2]<1)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher")}(jQuery),+function(t){"use strict";function e(e,s){return this.each(function(){var o=t(this),n=o.data("bs.modal"),a=t.extend({},i.DEFAULTS,o.data(),"object"==typeof e&&e);n||o.data("bs.modal",n=new i(this,a)),"string"==typeof e?n[e](s):a.show&&n.show(s)})}var i=function(e,i){this.options=i,this.$body=t(document.body),this.$element=t(e),this.$dialog=this.$element.find(".modal-dialog"),this.$backdrop=null,this.isShown=null,this.originalBodyPad=null,this.scrollbarWidth=0,this.ignoreBackdropClick=!1,this.options.remote&&this.$element.find(".modal-content").load(this.options.remote,t.proxy(function(){this.$element.trigger("loaded.bs.modal")},this))};i.VERSION="3.3.7",i.TRANSITION_DURATION=300,i.BACKDROP_TRANSITION_DURATION=150,i.DEFAULTS={backdrop:!0,keyboard:!0,show:!0},i.prototype.toggle=function(t){return this.isShown?this.hide():this.show(t)},i.prototype.show=function(e){var s=this,o=t.Event("show.bs.modal",{relatedTarget:e});this.$element.trigger(o),this.isShown||o.isDefaultPrevented()||(this.isShown=!0,this.checkScrollbar(),this.setScrollbar(),this.$body.addClass("modal-open"),this.escape(),this.resize(),this.$element.on("click.dismiss.bs.modal",'[data-dismiss="modal"]',t.proxy(this.hide,this)),this.$dialog.on("mousedown.dismiss.bs.modal",function(){s.$element.one("mouseup.dismiss.bs.modal",function(e){t(e.target).is(s.$element)&&(s.ignoreBackdropClick=!0)})}),this.backdrop(function(){var o=t.support.transition&&s.$element.hasClass("fade");s.$element.parent().length||s.$element.appendTo(s.$body),s.$element.show().scrollTop(0),s.adjustDialog(),o&&s.$element[0].offsetWidth,s.$element.addClass("in"),s.enforceFocus();var n=t.Event("shown.bs.modal",{relatedTarget:e});o?s.$dialog.one("bsTransitionEnd",function(){s.$element.trigger("focus").trigger(n)}).emulateTransitionEnd(i.TRANSITION_DURATION):s.$element.trigger("focus").trigger(n)}))},i.prototype.hide=function(e){e&&e.preventDefault(),e=t.Event("hide.bs.modal"),this.$element.trigger(e),this.isShown&&!e.isDefaultPrevented()&&(this.isShown=!1,this.escape(),this.resize(),t(document).off("focusin.bs.modal"),this.$element.removeClass("in").off("click.dismiss.bs.modal").off("mouseup.dismiss.bs.modal"),this.$dialog.off("mousedown.dismiss.bs.modal"),t.support.transition&&this.$element.hasClass("fade")?this.$element.one("bsTransitionEnd",t.proxy(this.hideModal,this)).emulateTransitionEnd(i.TRANSITION_DURATION):this.hideModal())},i.prototype.enforceFocus=function(){t(document).off("focusin.bs.modal").on("focusin.bs.modal",t.proxy(function(t){document===t.target||this.$element[0]===t.target||this.$element.has(t.target).length||this.$element.trigger("focus")},this))},i.prototype.escape=function(){this.isShown&&this.options.keyboard?this.$element.on("keydown.dismiss.bs.modal",t.proxy(function(t){27==t.which&&this.hide()},this)):this.isShown||this.$element.off("keydown.dismiss.bs.modal")},i.prototype.resize=function(){this.isShown?t(window).on("resize.bs.modal",t.proxy(this.handleUpdate,this)):t(window).off("resize.bs.modal")},i.prototype.hideModal=function(){var t=this;this.$element.hide(),this.backdrop(function(){t.$body.removeClass("modal-open"),t.resetAdjustments(),t.resetScrollbar(),t.$element.trigger("hidden.bs.modal")})},i.prototype.removeBackdrop=function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},i.prototype.backdrop=function(e){var s=this,o=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var n=t.support.transition&&o;if(this.$backdrop=t(document.createElement("div")).addClass("modal-backdrop "+o).appendTo(this.$body),this.$element.on("click.dismiss.bs.modal",t.proxy(function(t){return this.ignoreBackdropClick?void(this.ignoreBackdropClick=!1):void(t.target===t.currentTarget&&("static"==this.options.backdrop?this.$element[0].focus():this.hide()))},this)),n&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),!e)return;n?this.$backdrop.one("bsTransitionEnd",e).emulateTransitionEnd(i.BACKDROP_TRANSITION_DURATION):e()}else if(!this.isShown&&this.$backdrop){this.$backdrop.removeClass("in");var a=function(){s.removeBackdrop(),e&&e()};t.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one("bsTransitionEnd",a).emulateTransitionEnd(i.BACKDROP_TRANSITION_DURATION):a()}else e&&e()},i.prototype.handleUpdate=function(){this.adjustDialog()},i.prototype.adjustDialog=function(){var t=this.$element[0].scrollHeight>document.documentElement.clientHeight;this.$element.css({paddingLeft:!this.bodyIsOverflowing&&t?this.scrollbarWidth:"",paddingRight:this.bodyIsOverflowing&&!t?this.scrollbarWidth:""})},i.prototype.resetAdjustments=function(){this.$element.css({paddingLeft:"",paddingRight:""})},i.prototype.checkScrollbar=function(){var t=window.innerWidth;if(!t){var e=document.documentElement.getBoundingClientRect();t=e.right-Math.abs(e.left)}this.bodyIsOverflowing=document.body.clientWidth<t,this.scrollbarWidth=this.measureScrollbar()},i.prototype.setScrollbar=function(){},i.prototype.resetScrollbar=function(){}, i.prototype.measureScrollbar=function(){var t=document.createElement("div");t.className="modal-scrollbar-measure",this.$body.append(t);var e=t.offsetWidth-t.clientWidth;return this.$body[0].removeChild(t),e};var s=t.fn.modal;t.fn.modal=e,t.fn.modal.Constructor=i,t.fn.modal.noConflict=function(){return t.fn.modal=s,this},t(document).on("click.bs.modal.data-api",'[data-toggle="modal"]',function(i){var s=t(this),o=s.attr("href"),n=t(s.attr("data-target")||o&&o.replace(/.*(?=#[^\s]+$)/,"")),a=n.data("bs.modal")?"toggle":t.extend({remote:!/#/.test(o)&&o},n.data(),s.data());s.is("a")&&i.preventDefault(),n.one("show.bs.modal",function(t){t.isDefaultPrevented()||n.one("hidden.bs.modal",function(){s.is(":visible")&&s.trigger("focus")})}),e.call(n,a,this)})}(jQuery);.clr {
clear: both;
}
.blue-button {
background-color: #A83E1A;
border: none;
border-bottom-width: medium;
border-bottom-style: none;
border-bottom-color: currentcolor;
border-bottom: 3px solid #952905;
color: #fff;
cursor: pointer;
display: block;
font-size: 16px;
transition: 0.2s;
padding: 8px 22px;
border-radius: 3px;
}
.blue-button:hover,.but:hover{
background: #913E1A;
}
.but {
background-color: #A83E1A;
border: none;
border-bottom-width: medium;
border-bottom-style: none;
border-bottom-color: currentcolor;
border-bottom: 3px solid #952905;
color: #fff;
cursor: pointer;
display: block;
font-size: 16px;
transition: 0.2s;
padding: 10px 18px;
border-radius: 3px;
width: 126px;
text-align: center;
display: inline-block;
}
/* ВОПРОСЫ-ОТВЕТЫ */
.tab-pane {
display: none;
}
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.fade.in {
opacity: 1;
}
.tab-pane.active {
display: block;
}
/* Модальные окна */
.modal-exit .but{
width: 200px;
margin: 0px;
background: #db341d;
background: -moz-linear-gradient(top, #ee4b18 0%,#cb2321 100%);
background: -webkit-linear-gradient(top, #ee4b18 0%,#cb2321 100%);
background: -o-linear-gradient(top, #ee4b18 0%,#cb2321 100%);
background: -ms-linear-gradient(top, #ee4b18 0%,#cb2321 100%);
background: linear-gradient(to top, #ee4b18 0%,#cb2321 100%);
}
.modal-open{overflow:hidden;}
.modal{display:none;overflow:hidden;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;-webkit-overflow-scrolling:touch;outline:0;}
.modal.fade .modal-dialog{-webkit-transform:translate(0, -25%);-ms-transform:translate(0, -25%);-o-transform:translate(0, -25%);transform:translate(0, -25%);-webkit-transition:-webkit-transform 0.3s ease-out;-o-transition:-o-transform 0.3s ease-out;transition:transform 0.3s ease-out;}
.modal.in .modal-dialog{-webkit-transform:translate(0, 0);-ms-transform:translate(0, 0);-o-transform:translate(0, 0);transform:translate(0, 0);}
.modal-open .modal{overflow-x:hidden;overflow-y:auto; z-index: 100000000;}
.modal-dialog{position:relative;width:auto;margin:10px;}
.lending-modal .modal-content{ border: 2px solid #faf0bc;
background: #ffffff;
padding-bottom: 40px;}
.modal-content{position:relative;background-color:#f9fafb;padding: 10px 10px 20px;-webkit-box-shadow:0 3px 9px rgba(0, 0, 0, 0.5);box-shadow:0 3px 9px rgba(0, 0, 0, 0.5);-webkit-background-clip:padding-box;background-clip:padding-box;outline:0;}
.modal-content .but{
float: right;
}
.modal-content:after{
clear: both;
content: " ";
display: table;
}
.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000000;}
.modal-backdrop.fade{opacity:0;filter:alpha(opacity=0);}
.modal-backdrop.in{opacity:0.5;filter:alpha(opacity=50);}
.modal-header{padding:15px;min-height:16.42857143px;}
.modal-header .close{margin-top:-2px;float:right;background:url("close_cross.png") no-repeat;margin-top:10px;margin-right:10px;border:none;width:17px;height:17px;cursor:pointer;}
.modal-title,.modal-title p{margin:0 30px -10px 0;line-height:1.42857143;font-weight:600;font-size:24px;/* display:inline; */}
.modal-body{position:relative;padding:15px;}
.modal-footer{padding:20px;text-align:right;border-top:1px solid #e5e5e5;}
.modal-footer .btn + .btn{margin-left:5px;margin-bottom:0;}
.modal-footer .btn-group .btn + .btn{margin-left:-1px;}
.modal-footer .btn-block + .btn-block{margin-left:0;}
.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll;}
@media (min-width:768px){.modal-dialog{width:700px;margin:100px auto;}
.modal-content{-webkit-box-shadow:0 5px 15px rgba(0, 0, 0, 0.5);box-shadow:0 5px 15px rgba(0, 0, 0, 0.5);}
.modal-sm{width:300px;}
}
@media (min-width:992px){.modal-lg{width:900px;}
}
.modal-dop-info .modal-header{padding: 0;}
.modal-dop-info .modal-content{position:relative;background-color:white;border:3px solid #679bdc;border-radius:5px;padding-left:20px;-webkit-box-shadow:0 3px 9px rgba(0, 0, 0, 0.5);box-shadow:0 3px 9px rgba(0, 0, 0, 0.5);-webkit-background-clip:padding-box;background-clip:padding-box;outline:0;
font-size: 18px;padding-top: 0px;line-height: 130%;}
/* END Модальные окна */
.form-group label{display:none}
.radio_poll {
vertical-align: top;
width: 17px;
height: 17px;
margin: 0 3px 0 0;
}
.radio_poll:not(checked) {
position: absolute;
opacity: 0;
}
.radio_poll:not(checked) + label::before {
content: '';
position: absolute;
top: -1px;
left: 0;
width: 20px;
height: 20px;
background: #ffffff;
border: 1px solid #c7ceda;
}
/* .radio_poll:checked + label::after { */
/* content: '\2713'; */
/* position: absolute; */
/* top: 0px; */
/* left: 3px; */
/* font-weight: 900; */
/* } */
.radio_poll:checked + label::after {
content: " ";
background: url(../images/ok.png) no-repeat;
position: absolute;
top: 1px;
left: 2px;
width: 16px;
height: 16px;
}
.radio_poll + label {
cursor: pointer;
}
.radio_poll:not(checked) + label {
position: relative;
padding: 0 0 0 30px;
}
.radio_poll:checked + label::before {
border: 1px solid #06b13e;
}
.radio_poll:checked + label {
color: #06b13e;
}
/* .content-block {
padding: 20px;
} */
.form-control {
width: 100%;
/* border: 1px solid #999999; */
border-radius: 3px;
padding: 10px 0 10px 15px;
box-sizing: border-box;
/* font-size: 14px; */
font-family:'Helvetica Neue',Arial,sans-serif;
margin: 5px 0;
}
#ticket-sections-step2{display:none}
.modal-body #ticket-author{margin-top:0}
.ticket-form-vo{
margin-bottom: 20px;
}
/* .ticket-form-vo .form-control{
border:1px solid #4574c9;
border-radius: 0;
} */
.ticket-form-vo .blue-button{
float: right;
}
@media screen and (max-width:360px){
.ticket-form-vo .blue-button {float: none;margin: 40px auto;}
.modal-content .but {margin: 20px auto;}
.modal-body {padding:0}
}
.gray-text{
color: #737373;
}
.ticket-form-vo .subtitle{
color: #737373;
display: block;
margin-bottom: 10px;
font-weight: 600;
}
.ticket-form-vo .b-title{
margin-bottom: 10px;
}
.b-title{
color: #d24a0b;
}
/* #questions{ */
/* background: #f9fafb; */
/* } */
.h3title-vo {
background: #8E411E;
margin: 0 !important;
color: white;
display: block;
line-height: 120%;
padding: 15px 16px !important;
font-size: 22px;
font-weight: 600;
margin-top: 10px !important;
}
.h4title-vo {
margin: 5px 0 10px !important;
color: #D24A0B;
display: block;
line-height: 120%;
font-size: 20px;
}
.question-answer .question {
padding: 10px;
}
.question {
/* border: 1px solid #d3dae6; */
border-top: none;
padding: 19px;
/* background-color: #F9F5D6; */
margin-bottom: 20px;
}
.author{
color: #f5a308;
font-size: 18px;
display: block;
padding: 5px 0;
}
.author_icon{
background: url(../images/author.png) no-repeat;
height: 27px;
width: 27px;
display: inline-block;
vertical-align: bottom;
margin-right: 10px;
}
.question .author{
display: inline-block;
color: #cb6a5a;
margin-right: 5px;
font-weight: 600;
}
.content2{
margin-bottom: 10px;
}
/* .question .content2 p {
display: inline;
} */
.date-q{
font-size: 14px;
color: #a2a0a0;
}
.image-answer {
width: 60px;
height: 60px;
margin-right: 10px;
display: inline-block;
vertical-align: middle;
}
.author-answer-info {display: inline-block}
.question button{
margin-top: 10px;
}
.nav-tabs {
list-style-type: none;
}
.nav-tabs {
padding: 0;
list-style-type: none;
}
.question-answer .nav-tabs {
padding: 0 !important;
margin: 0 !important;
}
.question-answer ul li.active {
font-weight: 600;
background: #ffffff;
border: 1px solid #fdcea4;
}
.question-answer .nav-tabs li {
border: 1px solid #F4E4C4;
list-style-image: none;
background: #F4E4C4;
display: inline-block;
padding: 0 !important;
margin: 0 !important;
}
.question-answer .nav-tabs li a {
color: #000000;
text-decoration: none;
font-size: 16px;
padding: 12px 10px;
display: inline-block;
margin-bottom: -2px;
border: none;
}
@media screen and (max-width:440px){
.question-answer .nav-tabs li a {
color: #000000;
text-decoration: none;
font-size: 14px;
padding: 8px 3px;
display: inline-block;
max-width: 135px;
margin-bottom: -2px;
}
}
@media screen and (max-width:285px){
.question-answer .nav-tabs li a {
max-width: 100%;
}
}
.question-answer .nav-tabs li.active a {
background: #F9F5D6
}
.answer-new {
padding: 12px;
}
.answer-new.question-block {
background: #fff8ed;
}
.question-answer .tab-pane {
background: #F9F5D6;
padding: 3px;
border: 1px solid #fdcea4;
}
.input__no-radius{
border-radius: 0;
border:1px solid #dedede;
}
/* END ВОПРОСЫ-ОТВЕТЫ */<!doctype html>
<html lang="ru">
<head>
<title>Форма в 2 шага</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="vo-style2.css">
</head>
<body>
<h2>Задать вопрос</h2>
<div class="ticket-form-vo">
<div class="form-group"><div class="error_sections" style="color:red;"></div>
<label for="ticket-sections">Выберите раздел вопрос-ответ</label>
<select name="parent" class="form-control" id="ticket-sections"><option value="">Выберите раздел вопрос-ответ</option><option value="38" >Раздел 1</option><option value="40" >Раздел 2</option><option value="40" >Раздел 3</option></select>
<span class="error"></span>
</div><br><br>
<div class="form-group"><div class="error_title" style="color:red;"></div>
<label for="ticket-pagetitle">Заголовок</label>
<input type="text" class="form-control" name="pagetitle" id="ticket-pagetitle" placeholder="Заголовок" value="" maxlength="100">
</div>
<div class="form-group"><div class="error_text" style="color:red;"></div>
<textarea class="form-control" name="content" id="ticket-editor" placeholder="Содержимое" rows="6"></textarea>
</div>
<button class="blue-button" onclick="pre_validateForm_vo();">Спросить</button>
<div class="clr"></div>
</div>
<!-- СКРИПТЫ И ДОП.HTML ДЛЯ ОТДЕЛЬНОГО ВОПРОС-ОТВЕТ -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="bootstrap.min.js" defer></script>
<script>
function pre_validateForm_vo(){
if ($('#ticket-sections').val() == ""){
$('#ticket-sections').css('border',' 2px solid #ff0000') ;
$('.ticket-form-vo .error_sections').html('Выберите раздел вопрос-ответ');
} else if ($('#ticket-sections').val() != ""){
$('#ticket-sections').css('border',' 2px solid #E6E6E6') ;
$('.ticket-form-vo .error_sections').html('');
} else if ($('#ticket-pagetitle').val() == ""){
$('#ticket-pagetitle').css('border',' 2px solid #ff0000') ;
$('.ticket-form-vo .error_title').html('Введите тему вопроса');
} else if ($('#ticket-pagetitle').val() != ""){
$('#ticket-pagetitle').css('border',' 2px solid #E6E6E6') ;
$('.ticket-form-vo .error_title').html('');
} else if ($('#ticket-editor').val() == ""){
$('#ticket-editor').css('border',' 2px solid #ff0000') ;
$('.ticket-form-vo .error_text').html('Введите Ваш вопрос');
} else{
if ($('.pre_poll_choicem2').prop( "checked" ) == true)
$('#urgent').val('on');
$('#ticket-editor').css('border',' 2px solid #E6E6E6');
$('#ticket-sections-step2').val($('#ticket-sections').val());
$('#voprostext-step2').val($('#ticket-editor').val());
$('#voprostitle-step2').val($('#ticket-pagetitle').val());
$('.ticket-form-vo .error_title').html('');
$('.ticket-form-vo .error_text').html('');
$('.modal-vopros-step2').modal('show');
}
};
</script>
<div class="modal fade modal-vopros-step2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<!-- Закрывает окно -->
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title" id="myLargeModalLabel">Оставьте свои контактные данные</h4>
</div>
<div class="modal-body">
<form action="" method="get" id="ticketForm" class="well create">
<div id="ticket-preview-placeholder"></div>
<input type="hidden" name="tid" value="0"/>
<select name="parent" id="ticket-sections-step2" class="form-control"><option value="38" >Раздел 1</option></select>
<input type="hidden" name="content" id="voprostext-step2" value="">
<input type="hidden" name="pagetitle" id="voprostitle-step2" value="">
<div class="error_text"></div>
<div class="form-group">
<span id="name_valid"></span>
<label for="ticket-author">Имя</label><span class="error"></span><br>
<input type="text" name="author_vo" id="ticket-author" class="form-control input__no-radius" placeholder="Ваше имя" maxlength="50" value="">
</div>
<div class="form-group">
<label for="ticket-author-email">Ваш Email</label><span class="error"></span>
<input type="email" name="email_author_vo" id="ticket-author-email" class="form-control input__no-radius" placeholder="Ваш Email" maxlength="50" value="">
</div>
<div class="end"></div>
<div class="br"></div>
<div class="clr"></div>
<div class="form-actions row">
<div class="move-right">
<input type="submit" class="more buttons blue" name="draft" id="submit" value="Отправить вопрос">
</div>
</div>
<div class="end"></div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<!-- END СКРИПТЫ И ДОП.HTML ДЛЯ ОТДЕЛЬНОГО ВОПРОС-ОТВЕТ -->
</body>
</html>
А тем jquery, над которым я заморочился, проверять на ошибки и отправлять уже валидированные данные на второй шаг формы.