Почему форма в модальном окне не отправляется, если для inputa прописано data-required=true?

Question

[secretsergey]

Есть 2 формы, одна изначально отображается на странице, вторая подгружается в модальное окно (с помощью arcticmodal). Для проверки на заполненность использую атрибут data-required. Стандартная форма работает нормально (проверка и отправка). А вот, которая подгружается в окно - нет. Просто не жмётся кнопка отправки (submit). Как решить данную проблему?
Открытие окна:

<script>
	$('.knopka').click(function() {
		var c = $('<div class="box-modal" />');
		c.html($('.okno').html());
		c.prepend('<div class="box-modal_close arcticmodal-close"><img src="images/mdl-cls.png" alt="" /></div>');
		$.arcticmodal({
			content: c
		});
	});
	</script>

Проверка и отправка формы:

function ajaxsend_form(id) { //Ajax отправка формы
    if(id == 4 || id == 5){
		 var msg = $(".box-modal #form"+id).find("input");
	}else{
		var msg = $("#form"+id).find("input");
		
	}
    var delay_popup = 0;
    var faults = $('#form'+id+' input').filter(function() {
    return $(this).data('required') && $(this).val() === "";
    }).css({"box-shadow": "rgb(239, 76, 76) 0px -10px 3px -7px inset"}); // выделяем это поле красным
    if(faults.length) {
        return false;
    }
	else
	{
    $.ajax({
        type: "POST",
        url: "mail.php",
        data: msg,
        success: function(data) {
			$.arcticmodal('close');
			var c = $('<div class="box-modal mdl-590" />');
			c.html($('.ty-block').html());
			c.prepend('<div class="box-modal_close arcticmodal-close"><img src="images/mdl-cls.png" alt="" /></div>');
			$.arcticmodal({
				content: c
			});
            $("#form"+id)[0].reset();
			var faults2 = $('#form'+id+' input').css({"box-shadow": "none"});
        },
        error:  function(xhr, str){
            alert("Возникла ошибка!");
        }
    });
    }
}

Код формы:

<form id="form1" method="POST" action="javascript:void(0);" onSubmit="ajaxsend_form('1');" class="am-form">
			<input type="text" placeholder="Поле 1" name="name" />
			<input type="text" placeholder="Поле 2" name="phone"/>
			<button type="submit">Отправить</button>
		</form>

Comments

[Ankhena]

<div class="box-modal" />
у div'а не так выглядит закрывающий тег

[secretsergey]

Ankhena W: Окно и так нормально открывается.

[Ankhena]

secretsergey: Как хотите

Answer 1

[Максим Тимофеев]

ТАк вот же:

var faults = $('#form'+id+' input').filter(function() {
    return $(this).data('required') && $(this).val() === "";
    }).css({"box-shadow": "rgb(239, 76, 76) 0px -10px 3px -7px inset"}); // выделяем это поле красным
    if(faults.length) {
        return false;
    }

зависит от наличия data-required и пустой строки в значении

Comments

[secretsergey]

В том то и дело, что даже с заполненным полей в модальном окне заявка не отсылается, а в статичной форме всё отлично работает.

[Максим Тимофеев]

secretsergey: Смотрите консоль. Проверяйте что в каждой переменной. Какой-то селектор не срабатывает в модалке. Например:
$('.knopka').click
может не срабатывать, и надо сделать так:
$('body').on('click','.knopka',function(){
и т.д.