在表单提交时动画无效元素最近的 div答案

【问题标题】：Animating invalid element's nearest divs upon form submission在表单提交时动画无效元素最近的 div
【发布时间】：2014-10-11 02:16:42
【问题描述】：

我有以下代码，它选择未选择的<select> 元素并阻止表单提交（如果有）。

$("form").submit(function() {
   var count = 0;
   var selectsWithNoValue = $("select:visible").filter(function() {
         if (!this.value.length) {
            sel = this.name;   
            if (count == 0) { alert ('Error ' + sel); ++count;}
         }
     return !this.value.length;
    });
    return !selectsWithNoValue.length;
});

完整代码在JSFiddle

是否可以找到与未选中的<select> 和“闪烁”最近的<div>（可能是几次快速闪烁，或突出显示直到用户在<div> 内单击 ) 以提醒用户他们应该修改哪个条目..？

我试过了：

$(this).closest("div").effect("highlight", {}, 3000);

使用此代码不起作用 - 所需的 <div> 不会闪烁，即使未设置选择，此代码也会导致表单提交。

知道怎么做吗？

【问题讨论】：

如果您想阻止表单提交，您需要在提交时检查表单的功能中event.preventDefault() 或return false。
嗨，如果未设置任何选择，则表单不会提交。这很好用。它正在寻找最近的 DIV 并突出显示我正在努力解决的问题。谢谢
那你为什么说：... and the form submitted even if the select values were blank.
对不起 - 我会更新我的问题。我的措辞很糟糕。
附带说明，您不会关闭许多 <p> 和 <select> 标记...

标签： javascript jquery html css closest

【解决方案1】：

您可以添加如下 CSS 动画：

.highlight {
  animation: blink 1s linear 3;
}
@keyframes blink {
  from {
    box-shadow:0 0 5px 0 #000;
  }
  50% {
    box-shadow:0 0 0px 0 #000;
  }
  to {
    box-shadow:0 0 5px 0 #000;
  }
}

使用以下脚本：

$("form").submit(function () {
  $(".highlight").removeClass("highlight");
  var selectsWithNoValue = $("select:visible").filter(function () {
    return !this.value;
  }).closest('div').addClass("highlight");
  return !selectsWithNoValue.length;
});

$("form").submit(function () {
    $(".highlight").removeClass("highlight");
    var selectsWithNoValue = $("select:visible").filter(function () {
        return !this.value;
    }).closest('div').addClass("highlight");
    return !selectsWithNoValue.length;
});

.highlight {
    -webkit-animation: blink 1s linear 3;
    -ms-animation: blink 1s linear 3;
    -moz-animation: blink 1s linear 3;
    animation: blink 1s linear 3;
}
@-webkit-keyframes blink {
    from {
        box-shadow:0 0 0px 0 red;
    }
    50% {
        box-shadow:0 0 10px 0 red;
    }
    to {
        box-shadow:0 0 0px 0 red;
    }
}
@-ms-keyframes blink {
    from {
        box-shadow:0 0 0px 0 red;
    }
    50% {
        box-shadow:0 0 10px 0 red;
    }
    to {
        box-shadow:0 0 0px 0 red;
    }
}
@-moz-keyframes blink {
    from {
        box-shadow:0 0 0px 0 red;
    }
    50% {
        box-shadow:0 0 10px 0 red;
    }
    to {
        box-shadow:0 0 0px 0 red;
    }
}
@keyframes blink {
    from {
        box-shadow:0 0 5px 0 #000;
    }
    50% {
        box-shadow:0 0 0px 0 #000;
    }
    to {
        box-shadow:0 0 5px 0 #000;
    }
}
div{
  margin:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="form" name="form">
    <div> <span><b>1</b></span>

        <br/>Select:
        <br/>
        <select name='id1[]' multiple>
            <option value='000'>000</option>
            <option value='001'>001</option>
            <option value='002'>002</option>
        </select>
    </div>
    <div> <span><b>2</b></span>

        <br/>Select:
        <br/>
        <select name='id2[]' multiple>
            <option value='000'>000</option>
            <option value='001'>001</option>
            <option value='002'>002</option>
        </select>
    </div>
    <p>
        <input type="button" value="Add" id="add" />
        <input type='submit' id='submit' value='Save' />
    </p>
</form>

Updated Fiddle

【讨论】：

这有效，但仅适用于第一次提交尝试。加载未选择选择选项的页面，然后单击保存。您会收到 id1[] 的警报，并且所有三个选择都会闪烁。在选择中选择一个选项，然后单击保存。您收到警报，但没有突出显示 DIV。

【解决方案2】：

如果“.closest()”方法不起作用，您可以尝试“.next()”和“.prev()”。作为参数，您可以传递 div 的类（例如 ' .next(".class") '。

如果动画不起作用，您可以在递归函数中使用“.fadeTo()”：

function Glow(target, opacity)
{
    function Glow(target, opacity)
    {
        $(target).fadeTo(500, opacity);
        if(opacity == 0.5)
            Glow(target, 1);
        else
            Glow(target, 0.5);
    }
}

希望对你有帮助！

【讨论】：