Добрый день!
Есть форма:
<form id="regforma" style="flex: 1 100%">
<label class="note">Регистрация нового пользователя</label>
<label class="input-holder full-name"><span class="input-title">Полное Имя*</span>
<input type="text"/>
</label>
<label class="input-holder"><span class="input-title">Логин*</span>
<input type="text"/>
</label>
<label class="input-holder"><span class="input-title">Пароль*</span>
<input type="password"/>
</label>
<label class="input-holder"><span class="input-title">Подтвердить пароль*</span>
<input type="password"/>
</label>
<div class="upload-image preview-img-upload"><span class="input-title">Загрузить Аватар*</span>
<div class="preview-img-holder"><span class="remove-image fa fa-times"></span>
<div class="img-holder"><img class="preview-img" src="" alt="image" draggable="false"/></div>
</div>
<label class="input-holder"><span class="icon fa fa-cloud-upload"></span>
<input class="hide" type="file" accept="image/*"/>
</label>
</div>
<label class="input-holder submit">
<input type="submit" value="Регистрация" />
</label>
<p class="error-msg">Пожалуйста, заполните все поля</p>
</form>
Необходимо, чтобы при нажатии на кнопку "Регистрация" происходило перенаправление на другую страницу(с проверкой заполненных полей), а данная команда должна появится на той же странице, на которую пользователь попадет после нажатия кнопки "зарегистрироваться" :
<div class="welcome-msg">
<div class="user-img"><img src="" alt="image" draggable="false"/></div>
<p class="paragraph-message">Добро пожаловать, <span class="username"></span></p>
</div>
Сам скрипт:
function previewImageBeforeUpload() {
var element = $('.preview-img-upload');
var reader;
function readURL(input, selector) {
if (input.files && input.files[0]) {
reader = new FileReader();
reader.onload = function(e) {
selector
.parents('.preview-img-upload')
.addClass('active')
.find('.preview-img')
.attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
function removeImage() {
element
.find('.remove-image')
.click(function() {
$(this)
.parents('.preview-img-upload').removeClass('active').find('.preview-img').attr('src', '');
$(this).parents('.preview-img-upload').find('input').val('');
});
}
removeImage();
$(document.body).on('change', '.preview-img-upload input', function() {
readURL(this, $(this));
});
}
previewImageBeforeUpload();
$('#regforma').on('submit', function(e){
var $this = $(this);
var isEmpty = $this.find('input').filter(function(){
return this.value === "";
});
if(isEmpty.length){
e.preventDefault();
$this.find('.error-msg').addClass('active');
}else{
var userName = $('.full-name input').val();
var userImage = $('.preview-img').attr('src');
$('.welcome-msg .user-img img').attr('src', userImage);
$('.welcome-msg .paragraph-message .username').text(userName);
$('.page-holder').addClass('active');
setTimeout(function(){
$this.hide();
$('.welcome-msg').addClass('active');
}, 1000);
}
});
// hide error message if input keyup
$('input').change(function(){
$('.error-msg').removeClass('active');
})
})
