Как сделать проверку email и телефона
Подскажите пожалуйста, как сделать проверку правильности написания email и телефона, пока сделал проверку на ненаполненность полей, но хотелось бы проверить правильность. И не могу подсветить textarea почему то таким же способом как input (( Спасибо.
$("#sendMail").on("click", function () {
//создаем экземпляр класс FormData, тут будем хранить всю информацию для отправки
var formData = new FormData();
//присоединяем наш файл
jQuery.each($('#file_v')[0].files, function(i, file) {
formData.append('file_v', file);
});
//присоединяем остальные поля
let name = $("#name").val().trim();
let email = $("#email").val().trim();
let tel = $("#tel").val().trim();
let number_order = $("#number_order").val().trim();
let message = $("#message").val().trim();
let checkbox_check = $("#checkbox_check").prop('checked');
//проверяем поля на заполнение
if (name === '' || email === '' || tel === '' || number_order === '' || message === '' || !checkbox_check) {
$('.modal_error').show();
$.each($('.input-box input'),function(i, v){
if($(this).val() == ''){
$(this).addClass('empty_field');
}else{
$(this).removeClass('empty_field');
}
});
return false;
}
formData.append('name', name);
formData.append('email', email);
formData.append('tel', tel);
formData.append('number_order', number_order);
formData.append('message', message);
//отправляем через ajax
$.ajax({
url: "assets/ajax/mail.php",
type: "POST",
dataType : "json",
cache: false,
contentType: false,
processData: false,
data: formData, //указываем что отправляем
beforeSend: function () {
$("#form_contact").prop("disable", true);
$(".main-btn").attr("disabled", true);
$( ".loading_mail").show();
},
success: function(data){
//стереть данные из инпутов
$("#form_contact").trigger("reset");
/////////////**********////////////
//убрать загрузачное окно
$( ".loading_mail").hide();
////////////**********//////////////
//убрать подсветку
$('.input-box input').removeClass('empty_field');
$(".main-btn").attr("disabled", false);
$('.modal_success').show();
console.log(data);
}
});
return false;
});.checkbox {
}
.checkbox__input {
display: none;
}
.checkbox__input:checked + .checkbox__label::after {
transform: scale(1);
}
.checkbox__label {
font-size: 16px;
line-height: 140%;
display: inline-flex;
align-items: center;
position: relative;
cursor: pointer;
}
.checkbox__label::before {
content: "";
align-self: flex-start;
flex: 0 0 24px;
height: 24px;
background: #dcdce8;
border-radius: 4px;
margin: 0px 10px 0px 0px;
}
.checkbox__label::after {
transition: transform 0.5s ease 0s;
content: "";
width: 16px;
height: 16px;
position: absolute;
top: 4px;
left: 4px;
background: #f07d54;
border-radius: 4px;
transform: scale(0);
}
.checkbox__label a {
color: #f07d54;
}
/* Загрузка отправки формы обратной связи */
.comment-form {
position: relative;
}
.loading_mail{
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(51, 51, 51, 0.9) url(loading.gif) center / 50px no-repeat;
display: none;
}
.input-box input.empty_field {
box-shadow: 0 0 10px red;
}
/* Custom dropdown */
/* Стили для неактивного модального окна */
/* стилизация содержимого страницы */
/* свойства модального окна по умолчанию */
/* свойства модального окна по умолчанию */
.modal {
position: fixed;
/* фиксированное положение */
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
/* цвет фона */
z-index: 1050;
/*opacity: 0;*/
/* по умолчанию модальное окно прозрачно */
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
/* анимация перехода */
pointer-events: none;
/* элемент невидим для событий мыши */
}
/* при отображении модального окно */
.modal:target {
/*opacity: 1;*/
pointer-events: auto;
overflow-y: auto;
}
/* ширина модального окна и его отступы от экрана */
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
@media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
margin: 30px auto;
}
}
/* свойства для блока, содержащего контент модального окна */
.modal-content {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: .3rem;
outline: 0;
}
@media (min-width: 768px) {
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
}
/* свойства для заголовка модального окна */
.modal-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 15px;
border-bottom: 1px solid #eceeef;
}
.modal-title {
margin-top: 0;
margin-bottom: 0;
line-height: 1.5;
font-size: 1.25rem;
font-weight: 500;
}
/* свойства для кнопки "Закрыть" */
.close {
float: right;
font-family: sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
/*opacity: .5;*/
text-decoration: none;
}
/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
.close:focus,
.close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
opacity: .75;
}
/* свойства для блока, содержащего основное содержимое окна */
.modal-body {
position: relative;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 15px;
overflow: auto;
}
#openModal-error {
background: rgba(255, 0, 0, 0.6);
}
#openModal-success {
background: rgba(0, 0, 0, 0.5);
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<form id="form_contact" action="" method="post" enctype="multipart/form-data" class="contact-one__form"> <!---->
<div class="row">
<div class="col-lg-6">
<div class="input-box has-feedback nameBlock">
<label for="name" class="control-label ">Имя*</label>
<input required type="text" id="name" placeholder="Иван Иванов" name="name" value="" class="" >
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-box">
<label for="email" class="control-label">Email-адрес*</label>
<input required type="email" id="email" placeholder="Email" name="email" value="" class="">
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-box _req">
<label for="tel" class="control-label">Номер телефона*</label>
<input required type="tel" id="tel" placeholder="+79997772255" name="tel" value="" class="">
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-box">
<label for="number_order" class="control-label">№ заказа*</label>
<input required id="number_order" type="text" placeholder="0000000-я00" name="number_order" value="" class="">
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-12">
<div class="input-box">
<label for="message" class="control-label">Сообщение*</label>
<textarea required class="_req" id="message" name="message"
placeholder="Сообщение" class="">
</textarea>
</div>
</div><!-- /.col-lg-12 -->
<div class="col-lg-12">
<div class="file">
<div class="file__item">
<input type=file id="file_v" name="file_v" accept="image/*,video/*" class="file__input">
<div class="file__button">Прикрепить файл</div>
</div>
<div id="formPreview" class="file__preview"></div>
</div>
</div>
<div class="col-lg-12">
<div class="checkbox">
<input required id="checkbox_check" checked type="checkbox" name="agreement" class="checkbox__input">
<label for="checkbox_check" class="checkbox__label _error"><span>Я даю согласие на обработку персональных данных в соответствии с <a href="">Условиями</a>*</span></label>
</div>
</div>
<div class="col-lg-12 text-left">
<br>
<button id="sendMail" class="main-btn"> Отправить </button>
</div>
</div>
</form>Ответы (1 шт):
Автор решения: Daniil Loban
→ Ссылка
Есть такой замечательный аттрибут pattern нужно конечно убедится что браузер его поддерживает.
<input type="email" pattern="^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$" />
в js проверку можно сделать так как указано ниже
проверка почты:
let email = $("#email").val().trim();
function isEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
if (!isEmail(email)){
return false; // выход их функции отправки формы
}
проверка телефона:
let tel = $("#tel").val().trim();
function telephoneCheck(str) {
var regex = /^(1\s?)?(\(\d{3}\)|\d{3})[\s\-]?\d{3}[\s\-]?\d{4}$/;
return regex.test(str);
}
if (!telephoneCheck(tel)){
return false
}
C учетом рефакторинга можно было бы сделать что-то в этом роде:
function isEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
function telephoneCheck(str) {
var regex = /^(1\s?)?(\(\d{3}\)|\d{3})[\s\-]?\d{3}[\s\-]?\d{4}$/;
return regex.test(str);
}
function getValidationErrors = (fields) => {
let errors = []; // массив для ошибок
const {email, tel, ...otherFields} = fields; // извлекаем поля
// к телефону и почте так же можно добавить свои классы ошибок
if (!isEmail(email)) errors.push('email');
if (!telephoneCheck(tel)) errors.push('tel');
Object.entries(otherFields).forEach(entry => {
const {key, value} = entry;
if (!value){
errors.push(key);
$(`#${key}.input-box input`).addClass('empty_field');
} else {
$(`#${key}.input-box input`).removeClass('empty_field');
}
})
return errors;
}
$("#sendMail").on("click", function () {
//создаем экземпляр класс FormData, тут будем хранить всю информацию для отправки
const formData = new FormData();
//присоединяем наш файл
jQuery.each($('#file_v')[0].files, function(i, file) {
formData.append('file_v', file);
});
//присоединяем остальные поля
const name = $("#name").val().trim();
const email = $("#email").val().trim();
const tel = $("#tel").val().trim();
const number_order = $("#number_order").val().trim();
const message = $("#message").val().trim();
const checkbox_check = $("#checkbox_check").prop('checked');
// все поля кроме чекбокса так как его не отправляем
const fields = {name, email, tel, number_order, message};
//проверяем поля
if (getValidationErrors({...fields, checkbox_check}).length !== 0){
$('.modal_error').show();
return false;
}
// добавляем поля в форму отправки
Object.entries(fields).forEach(({key, value}) => {
formData.append(key, value);
})
//отправляем через ajax
});