<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="wrapper">
<div class="slider-wrapper">
<div id="slider"></div>
</div>
<input type="text" class="from" value="75"/>
<input type="text" class="to" value="300"/>
</div>
<div class="wrapper2">
<div class="slider-wrapper2">
<div id="slider2"></div>
</div>
</div>
<div class="wrapper3">
<input type="password" class="password">
<button class="passhow">Показать</button>
</div>
<div class="wrapper4">
<form action="">
<div class="row">
<input type="text" class="for-firstname" id="firstname">
<p class="for-firstname">Введите</p>
</div>
<div class="row">
<input type="text" class="for-lastname" id="lastname">
<p class="for-lastname">Введите</p>
</div>
<div class="row">
<input type="email" class="for-email" id="email">
<p class="for-email">Введите</p>
</div>
<div class="row">
<input type="username" class="for-username" id="username">
<p class="for-username">Введите</p>
</div>
<div class="row">
<input type="password" class="for-password" id="password">
<p class="for-password">Введите</p>
</div>
<div class="row">
<input type="password" class="for-confirm-password" id="confirm-password">
<p class="for-confirm-password">Введите</p>
</div>
<div class="row">
<select name="" id="year" class="for-date">
<option value="Выбор">Выбор</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="" id="month" class="for-date">
<option value="Выбор">Выбор</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="" id="day" class="for-date">
<option value="Выбор">Выбор</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<p class="for-date">Введите</p>
</div>
<div class="row">
<input type="checkbox" id="terms" class="for-check">
<p class="for-check">Выберите</p>
</div>
<a href="#" class="submit">Отправить</a>
</form>
</div>
.wrapper {
width: 400px;
margin: 0 auto;
padding: 40px 0;
}
.slider-wrapper {
padding-bottom: 30px;
}
.wrapper2 {
width: 400px;
margin: 0 auto;
padding: 40px 0;
}
.slider-wrapper2 {
padding-bottom: 30px;
}
.slider-wrapper2 .ui-slider-handle .value {
position: absolute;
top: -20px;
left: 50%;
transform: translate(-50%, 0);
display: block;
width: 80px;
background: #000;
color: #fff;
text-align: center;
}
.slider-wrapper2 .ui-slider-handle.ui-state-default.ui-corner-all.ui-state-focus {
outline: none;
}
.wrapper3 {
width: 300px;
margin: 0 auto 20px;
}
.wrapper4 {
width: 300px;
margin: 0 auto 20px;
}
.wrapper4 select.error {
border: solid 1px red;
}
.wrapper4 .row {
padding-bottom: 20px;
}
.wrapper4 .row p {
display: none;
}
.wrapper4 .row.error input {
border: 1px solid red;
}
.wrapper4 .row.error select {
border: 1px solid red;
}
.wrapper4 .row.error p {
display: block;
color: red;
}
input[type=checkbox] {
border: 1px solid red;
}
$("#slider").slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( ".from" ).val(ui.values[0] );
$( ".to" ).val(ui.values[1] );
}
});
$(".from").change(function () {
var value = $(this).val();
console.log(typeof(value));
$("#slider").slider("values", 0, value);
});
$(".to").change(function () {
var value = $(this).val();
console.log(typeof(value));
$("#slider").slider("values", 1, value);
});
$("#slider2").slider({
range: "min",
min: 0,
max: 100000,
value: 10000,
create: function( event, ui ) {
$('.slider-wrapper2').find('.ui-slider-handle').append("<span class='value'></span>");
$('.slider-wrapper2').find('.value').html('10000 p');
},
slide: function( event, ui ) {
// $('.slider-wrapper2').find
$('.slider-wrapper2').find('.value').html(ui.value + ' p');
}
});
$('.passhow').on('mousedown mouseup',function(e) {
var pass = $('.password');
switch(e.type){
case 'mousedown':
pass.attr('type','text');
break;
case 'mouseup':
pass.attr('type','password');
break;
}
});
function _validateEmail(email){
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function _validateNames(name){
var re = /^[a-zA-Zа-яА-Я]+$/ui;
return re.test(name);
}
function _validateUsername(username){
var re = /^[а-яА-ЯёЁa-zA-Z0-9]{3,15}$/ui;
return re.test(username);
}
function _validatePassword(password){
var re = /(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/g;
return re.test(password);
}
$('.submit').on('click', function(e){
e.preventDefault();
var paragraphs = $('.wrapper4 p');
var firstName = $('input.for-firstname');
var lastName = $('input.for-lastname');
var email = $('input.for-email');
var userName = $('input.for-email');
var password = $('input.for-password');
var confirmPassword = $('input.for-confirm-password');
var date = $('select.for-date');
var check = $('checkbox.for-check');
var inputFirstName = $('#firstname');
var inputLastName = $('#lastname');
var inputEmail = $('#email');
var inputUserName = $('#username');
var inputPassword = $('#password');
var inputConfirmPassword = $('#confirm-password');
var selectYear = $('#year');
var selectMonth = $('#month');
var selectDay = $('#day');
var checkTerms = $('#terms');
var checkOptionYear = $('#year option:checked').val();
var checkOptionMonth = $('#month option:checked').val();
var checkOptionDay = $('#day option:checked').val();
var checkTermsChecked = checkTerms.is('checked');
// var val = $('.select-item option:checked').val();
// if(val == 'Выбор'){
// $('.wrapper4 select').addClass('error');
// return
// }else{
// $('.wrapper4 select').removeClass('error');
// }
// for(var i = 0; i < paragraphs.length; ++i) {
// console.log(paragraphs.eq(i).attr('class'));
// }
if(inputFirstName.val() == '' && inputLastName.val() == '' && inputEmail.val() == '' && inputUserName.val() == '' && inputPassword.val() == '' && inputConfirmPassword.val() == '' && checkOptionYear == 'Выбор' && checkOptionMonth == 'Выбор' && checkOptionDay == 'Выбор' && !checkTermsChecked) {
for(var i = 0; i < paragraphs.length; ++i) {
if(paragraphs.eq(i).attr('class') == inputFirstName.attr('class')) {
paragraphs.eq(i).closest('.row').addClass('error');
}
if(paragraphs.eq(i).attr('class') == inputLastName.attr('class')) {
paragraphs.eq(i).closest('.row').addClass('error');
}
if(paragraphs.eq(i).attr('class') == inputEmail.attr('class')) {
paragraphs.eq(i).closest('.row').addClass('error');
}
if(paragraphs.eq(i).attr('class') == inputUserName.attr('class')) {
paragraphs.eq(i).closest('.row').addClass('error');
}
if(paragraphs.eq(i).attr('class') == inputPassword.attr('class')) {
paragraphs.eq(i).closest('.row').addClass('error');
}
if(paragraphs.eq(i).attr('class') == inputConfirmPassword.attr('class')) {
paragraphs.eq(i).closest('.row').addClass('error');
}
if(paragraphs.eq(i).attr('class') == selectYear.attr('class')) {
paragraphs.eq(i).closest('.row').addClass('error');
}
if(paragraphs.eq(i).attr('class') == selectMonth.attr('class')) {
paragraphs.eq(i).closest('.row').addClass('error');
}
if(paragraphs.eq(i).attr('class') == selectDay.attr('class')) {
paragraphs.eq(i).closest('.row').addClass('error');
}
if(paragraphs.eq(i).attr('class') == checkTerms.attr('class')) {
paragraphs.eq(i).closest('.row').addClass('error');
}
}
}else if(inputFirstName.val() == '' || !_validateNames(inputFirstName.val())){
console.log(1);
for(var i = 0; i < paragraphs.length; ++i) {
if(paragraphs.eq(i).attr('class') == inputFirstName.attr('class')) {
paragraphs.eq(i).closest('.row').addClass('error');
}
}
}else if(inputLastName.val() == '' || !_validateNames(inputLastName.val())){
console.log(2);
for(var i = 0; i < paragraphs.length; ++i) {
if(paragraphs.eq(i).attr('class') == inputLastName.attr('class')) {
console.log('w')
paragraphs.eq(i).closest('.row').addClass('error');
}
}
}else if(inputEmail.val() == '' || !_validateEmail(inputEmail.val())){
console.log(3);
for(var i = 0; i < paragraphs.length; ++i) {
if(paragraphs.eq(i).attr('class') == inputEmail.attr('class')) {
paragraphs.eq(i).closest('.row').addClass('error');
}
}
}else if(inputUserName.val() == '' || !_validateUsername(inputUserName.val())){
console.log(3);
for(var i = 0; i < paragraphs.length; ++i) {
if(paragraphs.eq(i).attr('class') == inputUserName.attr('class')) {
paragraphs.eq(i).closest('.row').addClass('error');
}
}
}else if(inputPassword.val() == '' || !_validatePassword(inputPassword.val())){
for(var i = 0; i < paragraphs.length; ++i) {
if(paragraphs.eq(i).attr('class') == inputPassword.attr('class')) {
paragraphs.eq(i).closest('.row').addClass('error');
}
}
}else if(inputPassword.val() == '' || !_validatePassword(inputPassword.val())){
for(var i = 0; i < paragraphs.length; ++i) {
if(paragraphs.eq(i).attr('class') == inputPassword.attr('class')) {
paragraphs.eq(i).closest('.row').addClass('error');
}
}
}
});
