在表单提交时对无效元素的最近div进行动画处理 [英] Animating invalid element's nearest divs upon form submission

问题描述

我有以下代码，该代码选择未选择的<select>元素，并阻止表单提交(如果有).

I've the following code, which selects the <select> elements which are not selected and prevents the form submission, if any.

$("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>和'flash'最接近的<div>(可以是几次快速闪烁，或者突出显示直到用户单击<div> )，以提醒用户应修改哪些条目.?

Is it possible to find the nearest <div> to the unselected <select> and 'flash' (could be a couple of quick flashes, or highlighting until the user clicks within the <div>) that to alert the user which entry they should be amending..?

我尝试过:

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

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

Using this code doesn't work - The required <div>doesn't flash and this code causes the form to submit even if the selects are not set.

有什么想法吗?

推荐答案

您可以添加如下所示的CSS动画:

You can add a CSS animation like the following:

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

更新了小提琴

这篇关于在表单提交时对无效元素的最近div进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！