<style>
        @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&subset=cyrillic');
        * {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
        }

        .ss_form input[type=text],		
 		.ss_form textarea{
            padding: 12px 20px;
            margin: 8px 0;
            border: 2px solid #DBDBDB;
            border-radius: 4px;
            box-sizing: border-box;
            resize: none;
            min-width: 288px;
			width: 400px;
 			font-size: 14px;
        }
        .ss_form input[type=text]:focus,		
		.ss_form textarea:focus{
            border-color: #F5AB37;
        }
		input[type=text].error{
            border-color: red;
        }
        .ss_form button{
            padding: 12px 20px;
            margin: 8px 0;
            font-size: 16px;
            text-decoration: none;
            color: white;
            background-color: #027DC4;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }   
        .ss_form label{ 
            left: -120px;
			padding: 12px;  
            position: absolute;                   
        }           
        .ss_form{           
            min-width: 288px;
			width: 400px;
            margin: auto;  
            text-align: center;          
        }
        .ss_form div{   
            position: relative;                  
        }
        .ss_form div *{            
            vertical-align: middle;
        }
        .contacts{
            text-align: center;
            margin-top: 25px;
        }    
        .contacts p,    
        .contacts li{
            margin: 10px;
        }
        .contacts img{
            vertical-align: middle;
        }
        .contacts ul{
            list-style: none;   
            display: inline-block;
            text-align: left;         
        }
    </style>
    <form class="ss_form" action="http://google.com" method="post">
        <div><label for="city">Город*</label><input id="city" name="city" type="text" placeholder="Введите свой город"></div>
        <div><label for="ids">ИДС*</label><input id="ids" name="ids" type="text" placeholder="Название ИДС"></div>
		<div>Контакты, по которым с Вами можно связаться</div>
		<div><label for="contact_phone">Телефон</label><input id="contact_phone" name="contact_phone" type="text" placeholder="0987654321"></div>
		<div><label for="contact_mail">Email</label><input id="contact_mail" name="contact_mail" type="text" placeholder="mail@mail.com"></div>
 		<div><label for="message">Сообщение</label><textarea id="message" name="message" rows="6" placeholder="Введите сообщение"></textarea></div>
        <div><button>Отправить</button></div>        
    </form>    
    <div class="contacts">
        <p>* Принимаем Ваши заявки с вопросами, жалобами, предложениями и пожеланиями</p>
        <ul>
            <li id="mail"><img src="/download/attachments/15499631/mail_icon.png" />wd@soz.in.ua</li>
            <li id="phone"><img src="/download/attachments/15499631/phone_icon.png" />+38(093) 177 16 49</li>
            <li id="time"><img src="/download/attachments/15499631/time_icon.png" />24/7</li>
        </ul>
    </div>
<script>
AJS.toInit(function () {
    AJS.$(".ss_form").submit(function () {
        
        var city = AJS.$("#city");
        var ids = AJS.$("#ids");
        var phone = AJS.$("#contact_phone");
        var email = AJS.$("#contact_mail");
        var message = AJS.$("#message");


        if (city != '' && ids != '') {
            if (validateEmail(email) || validatePhone(phone)) {

                console.log(city + " " + ids + " " + phone + " " + email + " " + message);
            }
        }
        return false;
        //AJS.$(".ss_form input[type=text]").css("border-color","red");
    });
});

var emailPattern = /^[a-z0-9_-]+@[a-z0-9-]+\.([a-z]{1,6}\.)?[a-z]{2,6}$/i;
var phonePattern = /^[0-9]{10,12}$/;

function validatePhone(phone){
    var phoneVal = phone.val();
    if (phoneVal != ''){
        phoneNum = phoneVal.replace(/\D/g, '');
        if (phoneNum.search(phonePattern) == 0){
            return true;
        }
    }
    return false;
}

function validateEmail(email){
    var emailVal = email.val();
    if (emailVal != ''){        
        if (emailVal.search(emailPattern) == 0){
            return true;
        }
    }
    return false;
    
}
</script>