Как сделать валидацию формы на js?

Question

[Артур]

Нужно чтобы вместо стандартной надписи "Заполните это поле", в само поле input добавлялся "border:1px solid red, к примеру. (без каких-либо текстовых уведомлений).

Сама форма:

<div class="formdiv">
<form class="myform" action="send.php" method="post" name="form1" enctype="multipart/form-data">
	<input class="form-firstname" name="firstname" type="text" placeholder="ФИО" />
	<input class="form-tel" name="tel" type="text" placeholder="Телефон" required />
	<select class="form-doc" name="doc" required >
		<option selected disabled>Выберите специалиста</option>		
		<option value="Крыса Лариса">Крыса Лариса</option>
		<option value="Аристов Александр">Аристов Александр</option>
		<option value="Батыршина Аделя">Батыршина Аделя</option>
		<option value="Аристов Александр">Аристов Александр</option>
		<option value="Батыршина Аделя">Батыршина Аделя</option>
		<option value="Бережной Юрий">Бережной Юрий</option>
	</select>
	<input class="form-date" id="minMaxExample" data-position="right top" name="date" placeholder="Дата приема" required />
	<input class="form-time" data-position="right top" name="time" onfocus="(this.type='time',value='--:--',min='00:00',max='24:00')" placeholder="Время приема" required />
	<textarea rows="7" class="form-comment" name="comment" placeholder="Комментарий" ></textarea>
	<div class="g-recaptcha" data-sitekey="6LdignUUAAAAAOsnUzt3UsXRba2Aloh4-i5TDaS0" data-callback="enableBtn"></div>
	<label>
		<input type="checkbox" class="checkboxx" checked="" required />
		Соглашение на обработку перснальных данных
    </label><br />
    <input class="form-sumbit" type="submit" name="submit" id="button1" value="Отправить" />
</form>
</div>

Answer 1

[Юпитер Макс]

$('.myform').validate({
		rules: {
			name: {
				required: true,
			},
			phone: {
				required: true,
			},
		},
		errorPlacement: function(error, element){}
	});

.myform input.error{
    border:1px solid red;
}

в проверку только поля сами напишете свои. И в стили для инпутов и селектов.

это пример для jquery.validate

Comments

[Артур]

А как можно убрать надпись "заполните это поле"?

[Юпитер Макс]

Артур, вот эта строчка убирает

errorPlacement: function(error, element){}

[Артур]

Юпитер Макс, В таком случае форма просто срабатывает и поля не выделяются бордером

[Юпитер Макс]

ну вы стили css прописали? посмотрите через консоль, есть ли на полях класс error когда они не заполнены?

[Артур]

Юпитер Макс, вот как оно выглядит сейчас:

<style>
.myform input.error{
    border:1px solid red;
}
</style>
<div class="formdiv">
<form class="myform" action="send.php" method="post" name="form1" enctype="multipart/form-data">
	<input class="form-firstname" name="firstname" type="text" placeholder="ФИО" />
	<input class="form-tel" name="tel" type="text" placeholder="Телефон" required />
	<select class="form-doc" name="doc" required >
		<option selected value="Онколог-маммолог">Онколог-маммолог</option>		
		<option value="Крыса Лариса">Крыса Лариса</option>
		<option value="Аристов Александр">Аристов Александр</option>
		<option value="Батыршина Аделя">Батыршина Аделя</option>
		<option value="Аристов Александр">Аристов Александр</option>
		<option value="Батыршина Аделя">Батыршина Аделя</option>
		<option value="Бережной Юрий">Бережной Юрий</option>
	</select>
	<input class="form-date" id="minMaxExample" data-position="right top" name="date" placeholder="Дата приема" required />
	<input class="form-time" data-position="right top" name="time" onfocus="(this.type='time',value='--:--',min='00:00',max='24:00')" placeholder="Время приема" required />
	<textarea rows="7" class="form-comment" name="comment" placeholder="Комментарий" ></textarea>
	<div class="g-recaptcha" data-sitekey="6LdignUUAAAAAOsnUzt3UsXRba2Aloh4-i5TDaS0" data-callback="enableBtn"></div>
	<label>
		<input type="checkbox" class="checkboxx" checked="" required />
		Соглашение на обработку перснальных данных
    </label><br />
    <input class="form-sumbit" type="submit" name="submit" id="button1" value="Отправить" />
</form>
</div>
<script>
$('.myform').validate({
    rules: {
      name: {
        required: true,
      },
      phone: {
        required: true,
      },
    },
    errorPlacement: function(error, element){}
  });
</script>

[Юпитер Макс]

Артур, ну я же вам сказал, в валидации прописать имена своих полей ))

$('.myform').validate({
    rules: {
      firstname: {
        required: true,
      },
      tel: {
        required: true,
      },
     doc: {
        required: true,
      },
     date: {
        required: true,
      },
      time: {
        required: true,
      },
      comment: {
        required: true,
      },
    },
    errorPlacement: function(error, element){}
  });

и стили соответственно

.myform input.error{
    border:1px solid red;
}
.myform select.error{
    border:1px solid red;
}
.myform textarea.error{
    border:1px solid red;
}

[Артур]

Юпитер Макс, required убрать в input'ах?

[Артур]

Юпитер Макс, все равно форма отправляется без валидации, с required или без..

[Юпитер Макс]

Артур, вы jquery.validate подключили или нет?

[Артур]

Юпитер Макс, Да, вот этот "jQuery Validation Plugin v1.15.1"

[Юпитер Макс]

Артур, у вас на сервере форма или локально? jquery подключен? в консоли смотрели, ошибок нет?

[Артур]

Юпитер Макс, на сервере, можете посмотреть на нее вот ЗДЕСЬ
jquery подключен, ошибок не вижу

[Юпитер Макс]

Артур, ну правильно ))) так ж нельзя делать, нужно инициализировать jquery сначала ))

$(document).ready(function(){
// и уже потом писать скрипты
$('.myform').validate({
    rules: {
      firstname: {
        required: true,
      },
      tel: {
        required: true,
      },
     doc: {
        required: true,
      },
     date: {
        required: true,
      },
      time: {
        required: true,
      },
      comment: {
        required: true,
      },
    },
    errorPlacement: function(error, element){}
  });
});

[Артур]

Юпитер Макс, сделал так как вы написали, заменил класс в скрипте, но теперь все равно выводится "заполните это поле" и нет красной обводки

[Ihor Bratukh]

Артур, Уберите стандартный required из инпутов:

<input class="form-tel" name="tel" type="text" placeholder="Телефон" required />

[Артур]

BRAGA96, если убрать, то форма отправляется как будто нет обязательных полей

[Юпитер Макс]

Артур, я вам написал на почту

[Артур]

Юпитер Макс, на почту ничего не приходило. Напишите, пожалуйста, ещё раз

[Артур]

Юпитер Макс, ну что там, получили письмо?

[Юпитер Макс]

Артур, отправил на почту файлы. Если не увидите, проверьте спам