小编sus*_*oek的帖子

如果未选中复选框,则阻止表单提交

如果输入字段为空,我正在使用一些Ajax/Javascript来阻止表单提交.

$(function() {

    var form = $('#contact-form-edc');

    $(form).submit(function(e) {
        e.preventDefault();


        var formData = $(form).serialize();

  if (document.getElementById("nachricht-field").value.length < 10) {
    document.getElementById('error-nachricht').style.display = "";
  } else {

        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })

        .done(function(response) {
         document.getElementById('success').style.display = "";
          document.getElementById('error').style.display = "none";
      document.getElementById('error-nachricht').style.display = "none";

            $('input').val('');
   $('textarea').val('');
   $('.button').val('Abschicken');
   $('input[name=datenschutz]').attr('checked', false);
        })
        .fail(function(data) {
           document.getElementById('error').style.display = "";
            document.getElementById('success').style.display ="none";
        });

  }

    });

});
Run Code Online (Sandbox Code Playgroud)

该脚本工作正常但不记下表单的复选框.复选框

<input type="checkbox" name="datenschutz" value="Datenschutz" required="required" >
Run Code Online (Sandbox Code Playgroud)

也是必需的,但用户可以在不选中复选框的情况下提交表单.是否有一个小脚本可以在当前的Ajax脚本中实现?

javascript forms ajax checkbox jquery

3
推荐指数
1
解决办法
4247
查看次数

滞后的 CSS 动画

我正在尝试使用 CSS3 动画在我的网站上调整一些容器的大小。

这是我的容器:

.new-place-wrapper {
  background: #004682;
  display: inline-block;
  margin-top: 70px;
  animation-name: newplace;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-delay: 3s;
  animation-timing-function: linear;
  max-height: 0px;
  padding: 0px 20px;
  overflow: hidden;
  position: relative;
  z-index: 8888;
}

@keyframes newplace {
  0% {
    max-height: 0px;
    padding: 0px 20px;
  }
  100% {
    max-height: 9999px;
    padding: 20px 20px;
  }
}
Run Code Online (Sandbox Code Playgroud)
<div class="new-place-wrapper" data-equalizer>
  <div class="new-place-close"><i class="fa fa-times"></i></div>
  <div class="inner-place-left" data-equalizer-watch>
    <span>Wir sind umgezogen!</span>
    Ab sofort finden Sie uns hier:
    <address>
      <strong>Company</strong><br>
      STREET 123<br>
      CITY<br><br>
      PHONE
    </address> …
Run Code Online (Sandbox Code Playgroud)

html css animation css-animations

3
推荐指数
2
解决办法
2万
查看次数

包装视频元素会导致奇怪的高度

如果我将 HTML5-Video 元素放置在 div 中,它会导致包装器的高度大于视频元素。包装器比视频源高 7 像素。没有最小高度或其他东西。

看一看!(向下滚动到视频)

视频元素高 513 像素,环绕 div (.image) 高 520 像素。

<div class="image">
    <video muted loop autoplay style="width:100%;" id="video-player">
        <source treatidasreference="1" type="video/mp4" src="/fileadmin/user_upload/bilder/projekte/04_Online_Film_3D-CGI/sparkasse_iserlohn/Sparkasse_175Jahre_FinalCut_01_1_1_NEU.mp4"></source>
    </video>
</div>
Run Code Online (Sandbox Code Playgroud)

html css html5-video

2
推荐指数
1
解决办法
90
查看次数