Question

我正在尝试创建一个反馈表单。所有输入和textareas都不为空，用户点击了I am not a robot复选框，然后按钮Send (отправить)变为活动状态，我想在表单提交后在弹出窗口中说Thank you,we will contact with you soon!

但是......有什么不对？

＆＃13;

$(document).on('change', '.main-pc input:checkbox', function() {
    if($(this).is(':checked')){
        $(".main-pc input[type=submit]").removeAttr('disabled');
        $('.main-pc input[type=hidden].valTrFal').val('valTrFal_true');
    }
    else {
        $(".main-pc input[type=submit]").attr('disabled','disabled');
        $('.main-pc input[type=hidden].valTrFal').val('valTrFal_disabled');
    }
});

$(".main-pc").ready(function() {
    $('.main-pc').submit(function() { // проверка на пустоту заполненных полей. Атрибут html5 — required не подходит (не поддерживается Safari)
        if (document.form.input.value == '') {
           valid = false;
           return valid;
        }
        $.ajax({
           type: "POST",
           url: "/app.mail.php",
           data: $(this).serialize()
       }).done(function() {
           $('.js-overlay-thank-you').fadeIn();
           $(this).find('input').val('');
           $('.main-pc').trigger('reset');
       });
       return false;
    });
});


$('.js-close-thank-you').click(function() { // по клику на крестик
	$('.js-overlay-thank-you').fadeOut();
});

$(document).mouseup(function (e) { // по клику вне попапа
    var popup = $('.popup');
    if (e.target!=popup[0]&&popup.has(e.target).length === 0){
        $('.js-overlay-thank-you').fadeOut();
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-writetous">
    <form class="main-pc" id="form" >
        <input type="text" required="" placeholder="Имя" name="txtname" required>
        <input type="email" placeholder="Email" name="txtemail" required>
        <textarea name="txtmessage" placeholder="Введите сообщение.." rows="5" required></textarea>
        <label><input type="checkbox">Я не робот</label>
        <input type="hidden" name="valTrFal" class="valTrFal" value="valTrFal_disabled">
        <input type="submit" class="button" value="Отправить" disabled="disabled" name="btnsend">
    </form>
</div>

<div class="overlay js-overlay-thank-you">
    <div class="popup js-thank-you">
        <h5>Сообщение отправлено!</h5>
        <p><strong>Наши администраторы свяжутся с вами в ближайшее время!</strong></p>
        <hr>
        <div class="close-popup js-close-thank-you">x</div>
    </div>
</div>

＆＃13;

Answer 1

document.form.input.value

上面的代码在您的代码中产生了问题正如您在问题中写道，您在Safari浏览器中使用此问题，可能它会在Safari上运行但不适用于Chrome或Mozilla，因此请检查此类浏览器

var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

然后将你的代码放入条件

if(is_safari){
    if (document.form.input.value == '') {
        valid = false;
        return valid;
    }
}

您还可以在safari中查看其他示例以进行表单验证。

Required Attribute Not work in Safari Browser

模态window.Jquery没有显示在fadeIn（）

1 个答案: