Animating invalid element's nearest divs upon form submission

问题

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

Full code in JSFiddle

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

I have tried:

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

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.

Any idea how to do this ?

回答1:

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

By using the following script:

$("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

回答2:

If the ".closest()" method is not working you could try ".next()" and ".prev()". As a parameter you could pass the class of the div (like ' .next(".class") '.

If the animation is not working you could use ".fadeTo()" in a recursive function:

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

Hope it helps!

来源：https://stackoverflow.com/questions/26304636/animating-invalid-elements-nearest-divs-upon-form-submission

标签

javascript

jquery

html

css

closest