Question

我使用以下代码，选择未选中的<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>和＆＃39; flash＆＃39; （可以是几个快速闪烁，或突出显示，直到用户点击<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>

Updated Fiddle

Answer 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);
    }
}

希望它有所帮助！

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

2 个答案: