Question

所以我已经为联系表单做了一些代码，但是我有一些问题要完成它。所以这是html联系表单的一部分

<form action="" method="POST" name="contact-form" id="contact-us" >
                    <div class="form-group">
                        <input type="text" name="fullname" class="name send-check" placeholder="Name" tabindex="1" />
                        <input type="email" name="email" class="name send-check" id="email" placeholder="Email" tabindex="2" />
                        <div class="msg success error"> Incorrect e-mail </div>
                        <textarea rows="10" cols="45" name="msg" placeholder="Message" class="name send-check" tabindex="3"></textarea>
                        <a id="go" name="logo_order" href="#logo_order" rel="leanModal" disabled><button type="submit" id="btn-send" value="Отправить" disabled>Отправить</button>
                        <div id="logo_order">
                            Thank you for your message, window will close after 5 seconds.
                        </div>
                    </div>
                </form>

当您在字段（电子邮件）中首次输入错误的电子邮件时，它会为您写入红色“电子邮件不正确”，然后您重新写入正确的电子邮件，之后如果您删除了正确的电子邮件并输入随机字母它将验证（它不应该）并且禁用按钮将变为启用，并且在此之后您单击发送，模式出现并且所有表单字段清除并且启用按钮变为禁用，但之后您再次在所有三个字段中键入随机文本，该按钮将被启用，因此它不会在电子邮件输入中进行验证

外部代码之前/正文禁用按钮，点击发送

后

<script type="text/javascript">
 $(document).ready(function () {
  $('#btn-send').click(function () {
   $('#contact-us').trigger("reset");
   $('button:submit').attr("disabled", true);
 });
});
</script>

内部代码

验证

$('form input[name="email"]').blur(function () {
    var email = $(this).val();
    var valid = /(.+)@(.+)\.(com|edu|org|etc)$/;
    if (valid.test(email)) {
        $('.msg').fadeOut(500);
        $('.success').fadeOut(500);
        $(".send-check").each(function () {
            $(this).keyup(function () {
                $('#btn-send').prop('disabled', checkinput());
            });
        });
    } else {
        $('.error').fadeIn(500);
    }
});

function checkinput() {
    var valid = false;
    $(".send-check").each(function () {
        if (valid) { return valid; }
        var input = $.trim($(this).val());
        valid = !input;
    });
    return valid;
}

leanModal v1.1 |雷石|根据麻省理工学院和GPL许可

(function($){$.fn.extend({leanModal:function(options){var defaults={top:100,overlay:0.5,closeButton:null};var overlay=$("<div id='lean_overlay'></div>");$("body").append(overlay);options=$.extend(defaults,options);return this.each(function(){var o=options;$(this).click(function(e){var modal_id=$(this).attr("href");$("#lean_overlay").click(function(){close_modal(modal_id)});$(o.closeButton).click(function(){close_modal(modal_id)});var modal_height=$(modal_id).outerHeight();var modal_width=$(modal_id).outerWidth();
$("#lean_overlay").css({"display":"block",opacity:0});$("#lean_overlay").fadeTo(200,o.overlay);$(modal_id).css({"display":"block","position":"fixed","opacity":0,"z-index":11000,"left":50+"%","margin-left":-(modal_width/2)+"px","top":o.top+"px"});$(modal_id).fadeTo(200,1);e.preventDefault()})});function close_modal(modal_id){$("#lean_overlay").fadeOut(200);$(modal_id).css({"display":"none"})}}})})(jQuery);

超时模态

$(document).ready(function () {
    $('#go').click(function (e) {
        $('#logo_order, #lean_overlay').fadeIn(400, function() {
            setTimeout(function () {
                $('#logo_order, #lean_overlay').fadeOut(400);
            }, 5000);
        });
        e.stopPropagation();
    });
    $(document).click(function (e) {
        $('#logo_order, #lean_overlay').fadeOut(400);
    });
});

电子邮件验证+禁用按钮

0 个答案: