вопрос
Приветствую. Есть JS и форма.
Все работает, но при не заполненных полях - выдает ошибку и потом сразу же отправляет сообщение через обработчик.
Вот JS
Вот форма:
Я не спец в JS...
Огромное спасибо за помощь!!!!
Все работает, но при не заполненных полях - выдает ошибку и потом сразу же отправляет сообщение через обработчик.
Вот JS
$(function () {
var validateMinlegth = function ($elem) {
var $fg = $elem.parents('.form-group').eq(0);
if ($elem.val().length < $elem.data('minlength')) {
$fg.addClass('has-error');
if (!$elem.hasClass('has-tooltip')) {
$elem.tooltip({
'title': $elem.data('error'),
'placement': 'top',
'trigger': 'manual',
}).addClass('has-tooltip');
}
$elem.tooltip('show');
return false;
} else {
$fg.removeClass('has-error');
if ($elem.hasClass('has-tooltip')) {
$elem.tooltip('hide');
}
}
return true;
}
var validateRequired = function ($elem) {
var $fg = $elem.parents('.form-group').eq(0);
if ($elem.val() == '0' || $elem.val() == '') {
$fg.addClass('has-error');
if (!$elem.hasClass('has-tooltip')) {
$elem.tooltip({
'title': $elem.data('error'),
'placement': 'top',
'trigger': 'manual',
}).addClass('has-tooltip');
}
$elem.tooltip('show');
return false;
} else {
$fg.removeClass('has-error');
if ($elem.hasClass('has-tooltip')) {
$elem.tooltip('hide');
}
}
return true;
}
$('.form-ask-phone-multistep :input[data-minlength],.form-ask-multistep :input[data-minlength]').each(function () {
$(this).blur(function () {
validateMinlegth($(this));
});
});
$('.form-ask-phone-multistep select[data-required],.form-ask-multistep select[data-required]').each(function () {
$(this).change(function () {
validateRequired($(this));
});
});
var multistepForm = function ($block, steps) {
$block.addClass('init');
var $form = $block.find('form');
$form.append($('<input />').attr({
name: 'ref',
type: 'hidden',
}).val(document.referrer));
var curStep = 'step1';
var transactionStep = function (step) {
$block.find('.askstep').not(steps[step].selector).addClass('hide');
$block.find(steps[step].selector).removeClass('hide');
curStep = step;
}
var nextStep = function () {
console.log(nextStep);
var ok = true;
$block.find(steps[curStep].selector).find('select[data-required]').each(function () {
ok = ok && (validateRequired($(this)) || ($(this).focus() && false));
});
$block.find(steps[curStep].selector).find(':input[data-minlength]').each(function () {
ok = ok && (validateMinlegth($(this)) || ($(this).focus() && false));
});
if (ok) {
if (typeof steps[curStep].submit !== 'undefined') {
var error = steps[curStep].submit.error;
var status = steps[curStep].submit.status;
var success = steps[curStep].submit.success;
var onSuccess = typeof steps[curStep].submit.onSuccess !== 'undefined' ?
steps[curStep].submit.onSuccess : null;
var onerror = typeof steps[curStep].submit.onerror !== 'undefined' ?
steps[curStep].submit.onerror : null;
var $cform = $form;
if ($cform.length > 1) {
$cform = $cform.filter(steps[curStep].selector);
}
transactionStep(status);
var number1 = Math.ceil(Math.random() * 10);
var number2 = Math.ceil(Math.random() * 10);
var checkcode = number1 + number2;
var formParams = $cform.serialize();
formParams += '&number1=' + number1;
formParams += '&number2=' + number2;
formParams += '&checkcode=' + checkcode;
$.post($cform.attr('action'), formParams, function (data) {
var json = $.parseJSON(data);
// json.status = 'error';
if (json.status == 'ok') {
transactionStep(success);
if (onSuccess != null) {
onSuccess($cform, json, transactionStep);
$cform.next().attr('action', $cform.next().attr('action') + '?id=' + json.id);
} else {
// if (typeof mixpanel !== 'undefined') {
// mixpanel.track('Send form', { partnerID : $cform.find(':input[name=partnerID]').val() });
// }
for (var i in window) {
if (i.length > 9 && i.substring(0, 9) == 'yaCounter') {
window[i].reachGoal('MOSCOW');
}
}
}
} else {
transactionStep(error);
if (onerror != null) {
onerror($cform, json, transactionStep);
}
}
}).error(function () {
transactionStep(error);
});
} else {
transactionStep(steps[curStep].next);
}
}
return false;
}
$form.submit(nextStep);
$block.find('.btn-step').click(nextStep);
}
var stepsSetting = {
'phone': {
'step1': {
selector: '.askstep1',
next: 'step2',
},
'step2': {
selector: '.askstep2',
submit: {
error: 'step2-error',
status: 'step2-status',
success: 'step2-success',
},
},
'step2-error': {
selector: '.askstep2-error',
submit: {
error: 'step2-error',
status: 'step2-status',
success: 'step2-success',
},
},
'step2-success': {
selector: '.askstep2-success',
}
},
'default': {
'step1': {
selector: '.askstep1',
next: 'step2',
},
'step2': {
selector: '.askstep2',
submit: {
error: 'step2-error',
status: 'step2-status',
success: 'step2-success',
onSuccess: function ($form, data, transactionStep) {
if (data.askphone) {
transactionStep('step5');
} else {
for (var i in window) {
if (i.length > 9 && i.substring(0, 9) == 'yaCounter') {
window[i].reachGoal('/item-ok/');
}
}
$('#modal-itemok-body').load('/item-ok/' + data.id + '/');
$('#modal-itemok').modal({
backdrop: 'static'
});
}
},
onerror: function ($form, data) {
var number1 = Math.ceil(Math.random() * 10);
var number2 = Math.ceil(Math.random() * 10);
var checkcode = number1 + number2;
$form.eq(0).append($('<input type=hidden name=number1>').val(number1));
$form.eq(0).append($('<input type=hidden name=number2>').val(number2));
$form.eq(0).append($('<input type=hidden name=checkcode>').val(checkcode));
$form.eq(0).unbind('submit').submit();
},
},
},
'step2-error': {
selector: '.askstep2-error',
submit: {
error: 'step2-error',
status: 'step2-status',
success: 'step2-success',
onSuccess: function ($form, data, transactionStep) {
if (data.askphone) {
transactionStep('step5');
} else {
$('#modal-itemok-body').load('/item-ok/' + data.id + '/');
$('#modal-itemok').modal({
backdrop: 'static'
});
}
},
onerror: function ($form, data) {
var number1 = Math.ceil(Math.random() * 10);
var number2 = Math.ceil(Math.random() * 10);
var checkcode = number1 + number2;
$form.eq(0).append($('<input type=hidden name=number1>').val(number1));
$form.eq(0).append($('<input type=hidden name=number2>').val(number2));
$form.eq(0).append($('<input type=hidden name=checkcode>').val(checkcode));
$form.eq(0).unbind('submit').submit();
},
},
},
'step2-success': {
selector: '.askstep2-success',
},
'step5': {
selector: '.askstep5',
submit: {
error: 'step5-error',
status: 'step2-status',
success: 'step5-success',
},
},
'step5-error': {
selector: '.askstep5-error',
submit: {
error: 'step5-error',
status: 'step2-status',
success: 'step5-success',
},
},
'step5-status': {
selector: '.askstep5-status',
},
'step5-success': {
selector: '.askstep5-success',
},
},
};
$('.form-ask-phone-multistep:not(.init)').each(function () {
var steps = stepsSetting.phone;
multistepForm($(this), steps);
});
$('.form-ask-multistep:not(.init)').each(function () {
var steps = stepsSetting.default;
multistepForm($(this), steps);
});
$('.form-ask-multistep .askstep1 :input').focus(function () {
$(this).closest('form').find('.askstep1').removeClass('hide');
});
});Вот форма:
<section class="formblock3 bg-salt raunded-salt">
<div class="ask-form3 form-ask-phone-multistep">
<div class="row">
<div class="col-xs-12">
<div class="askstep askstep2 hide bg-darkgreen">
<div class="h4">Юрист получил вопрос! Как с Вами связаться?</div>
</div>
<div class="askstep askstep2-error hide bg-darkgreen">
<div class="h4">Внимание!<br>Произошла ошибка при отправке!<br>Проверьте соединение с интернетом и нажмите на кнопку "Получить ответ" еще раз.</div>
</div>
<div class="askstep askstep2-status hide bg-darkgreen">
<div class="h4">Происходит отправка данных. Не закрывайте страницу до тех пор,
пока не увидите сообщение о результате отправки.</div>
</div>
<div class="askstep askstep2-success hide bg-darkgreen">
<div class="h4">Ваша заявка успешно отправлена!<br>Ожидайте звонка юриста.</div>
</div>
</div>
</div>
<br>
<form method="post" action="mail.php" class="form-vertical form-ask">
<div class="form-group askstep askstep1">
<label class="control-label visible-xs">Ваш вопрос</label>
<textarea class="form-control" name="comment" placeholder="Задайте вопрос юристу и получите консультацию бесплатно" data-minlength="10" data-error="Опишите суть вашей ситуации и вопрос" rows="6"></textarea>
</div>
<div class="form-group askstep askstep2 hide">
<label class="control-label3">Ваше имя</label>
<input type="text" class="form-control" name="name" placeholder="Ваше имя" data-minlength="2" data-error="Укажите свое имя">
</div>
<div class="form-group askstep askstep2 hide">
<label class="control-label">Ваш город</label>
<input type="text" class="form-control" name="city" placeholder="Ваш город" data-minlength="2" data-error="Укажите свой город">
</div>
<div class="form-group askstep askstep2 hide">
<label class="control-label">Телефон</label>
<div class="row">
<div class="col-xs-5 col-sm-4 col-md-4">
<input type="text" class="form-control" name="phoneprefix" placeholder="Код" data-minlength="3" data-error="Укажите код номера телефон (3 цифры)">
</div>
<div class="col-xs-7 col-sm-8 col-md-8">
<input type="text" class="form-control" name="phone" placeholder="Телефон" data-minlength="7" data-error="Укажите свой номер телефона (7 цифер)">
</div>
</div>
</div>
<hr class="askstep askstep2 askstep2-error hide">
<div class="form-group">
<div class="askstep askstep1 text-center">
<button class="btn-step btn-salt" type="button">Задать вопрос юристу</button>
</div>
<div class="row">
<div class="col-xs-12 text-center">
<button class="askstep askstep2 askstep2-error hide btn-step btn-salt" type="submit"> Получить ответ </button>
<button class="askstep askstep3 hide btn-step btn-salt" type="submit" disabled="disabled">Отправка... Подождите...</button>
</div>
</div>
</div>
<input value="5" type="hidden" name="partnerID">
</form>
</div>
</section>
Я не спец в JS...
Огромное спасибо за помощь!!!!
