在表单提交无效的动画元素的最近的div(Animating invalid element'

我已经下面的代码，它选择<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

---

是否有可能找到最近<div>到未选择<select>和“快闪”（ 可能是一对夫妇的快速闪烁，或突出直到内的用户点击<div>要提醒其进入他们应该用户被修改..？

我努力了：

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

使用此代码不能正常工作-所需<div>不闪烁，该代码会导致窗体即使选择不设置提交。

任何想法如何做到这一点？

Answer 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> 

更新小提琴

Answer 2:

如果“.closest（）”方法不工作，你可以尝试“的.next（）”和“.prev（）”。 作为一个参数，你可以把类股利（像“接下来（‘类’）”。

如果动画不工作，你可以在一个递归函数使用“.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);
    }
}

希望能帮助到你！

文章来源: Animating invalid element's nearest divs upon form submission