Форма в 2 шага, не срабатывает валидация, как исправить?

Question

ozoro @ozoro

JavaScript

Форма в 2 шага, не срабатывает валидация, как исправить?

Есть форма, вызывается в 2 шага, на первом шаге хочу валидировать поля.

Вот код валидации, но что-то он не срабатывает.

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 ($(\'#ticket-editor\').val() != ""){
        $(\'#ticket-editor\').css(\'border\',\' 2px solid #E6E6E6\') ;
   	$(\'.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_sections\').html(\'\');			   
			         $(\'.ticket-form-vo .error_title\').html(\'\');
			         $(\'.ticket-form-vo .error_text\').html(\'\');
                                        $(\'.modal-vopros-step2\').modal(\'show\');
           }
   		};

Кнопка

<button class="blue-button" onclick="pre_validateForm_vo();">Спросить</button>

Подскажите. что не так?

Вопрос задан более трёх лет назад
122 просмотра

2 комментария

Подписаться 1 Средний 2 комментария

Пригласить эксперта

Ответы на вопрос 1

11 комментариев

ozoro @ozoro Автор вопроса

Помогите поправить, я не силен в js и jquery

Написано более трёх лет назад

Алексей @skazi_premiere

ozoro,

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() == ""){
    $('#ticket-pagetitle').css('border',' 2px solid #ff0000') ;
    $('.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{
    $('#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_sections').html('');			   
    $('.ticket-form-vo .error_title').html('');
    $('.ticket-form-vo .error_text').html('');
    $('.modal-vopro-step2').modal('show');
  }
};

для начала логику как то так поправить, что бы это хоть как то работало. А дальше по ситуации смотреть надо.

Написано более трёх лет назад

ozoro @ozoro Автор вопроса

Алексей,
Модерируется, но форма не отправляется на следующий шаг.

Написано более трёх лет назад
Алексей @skazi_premiere

ozoro, ну тут без HTML гадание на кофейной гуще. Я так понимаю юзается JQuery и Bootstrap? Копайте в эту сторону, может банально библиотеки не подключены какие-то.
Пример модальной формы

Написано более трёх лет назад

ozoro @ozoro Автор вопроса

Алексей,

Алексей, вот код html

<!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>

Написано более трёх лет назад

ozoro @ozoro Автор вопроса

ozoro,

Вот код css

.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 ВОПРОСЫ-ОТВЕТЫ */

Написано более трёх лет назад

ozoro @ozoro Автор вопроса

ozoro,

Bootstrap

/*!
 * 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);

Написано более трёх лет назад

ozoro @ozoro Автор вопроса

Алексей,
Алексей, выложил код.

Написано более трёх лет назад

ozoro @ozoro Автор вопроса

Алексей,

Вот в таком варианте сделал, работает и отправляет на второй шаг (открывается модальное окно):

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');
	   }
	};

Однако хотелось бы, чтобы при удалении курсора с поля удалялись красные поля и надписи об ошибке, если условие для вывода ошибки отпадает (то есть вводится правильно - для select val() != "", а для остальных полей - не меньше 10 и не больше 20 символов)

Также хотелось бы валидировать еще и по регулярному выражению: /любые символы, кроме запрещенных/.

Только, к сожалению, не пойму как это все прописать, банально не хватает знаний в js и jquery.

Прошу помощи, подсказки или доработки моего кода.

Заранее, благодарю!

Написано более трёх лет назад

Алексей @skazi_premiere
ozoro, ну тут несколько подходов, я бы наверное использовал все таки HTML
По регулярному выражению
не меньше 10
не больше 20 символов
<input type="text" minlength="10" maxlength="20" pattern="[\d]">

но можно и на JS проверять, такой же пример валит ошибки в консоль.
PS. Регулярки тестим тут.
Написано более трёх лет назад
ozoro @ozoro Автор вопроса

Да, может действительно сделать валидацию на html и немного js (решений полно), т.к. по сути, эта валидация "для дураков", ведь знающий в консоли может вписать какие угодно данные. В любом случае при окончательной отправке формы все входящие данные фильтруются (вырезается всякая гадость или меняется на html сущности).

А тем jquery, над которым я заморочился, проверять на ошибки и отправлять уже валидированные данные на второй шаг формы.

Написано более трёх лет назад

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

JavaScript

+1 ещё

Средний
При создании PWA ошибка Cannot read properties of null (reading 'prompt'), в чем проблема?
- 1 подписчик
- 7 минут назад
- 2 просмотра
0

ответов
JavaScript

+2 ещё

Средний
Как сделать так, чтобы при нажатии по div выводилось сообщение?
- 1 подписчик
- 37 минут назад
- 30 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как сделать программную навигацию без изменения url в vue-router + vue3?
- 1 подписчик
- 11 часов назад
- 27 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Three.js объект сзади не виден при повороте к нему лицом?
- 2 подписчика
- 15 часов назад
- 204 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как скачать pdf из встроенного просмотрщика на сайте?
- 1 подписчик
- 17 часов назад
- 116 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как построение маршрута на 2GIS API v2.0?
- 1 подписчик
- 19 часов назад
- 46 просмотров
0

ответов
JavaScript

Средний
Эффект наложения блоков?
- 1 подписчик
- вчера
- 108 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- вчера
- 84 просмотра
0

ответов
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- вчера
- 46 просмотров
0

ответов
JavaScript

Простой
Как после сабмита очистить поле type="tel" и показать очищенную маску?
- 2 подписчика
- вчера
- 69 просмотров
0

ответов
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Написать индикатор на TradingView по хаям/лоям дня недели

25 апр. 2024, в 08:45

4000 руб./за проект

Вычислить размер объекта по карте глубин

25 апр. 2024, в 07:37

5000 руб./за проект

Спарсить TON PLACE: скрейпинг фото и текста с анкет по списку URL

25 апр. 2024, в 05:57

3000 руб./за проект

pre_validateForm_vo() вызывается вообще ? Добавьте в начале функции console.log('start validation');
А зачем экранирование \'? И как без разметки можно понять какой элемент чем на самом деле является или предположительно это все поля ввода?

Answer 1 · 2019-04-16 05:23:02

А по вопросу, Вас условие не смущает ?

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() == ""){ // Уже не работает

PS. Я к тому что вы сначала все на ошибки проверьте поля и если они все заполнены вызывайте последнюю ветку else, а так оно же работает до первого положительного совпадения на заполнение поля.

Форма в 2 шага, не срабатывает валидация, как исправить?

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

Минуточку внимания

Войдите на сайт