HTML表单会跳过必填字段

Question

When I press submit on my HTML code I get access to the javascript even if I haven't entered the required field "Email". But I see the litte "you need to fill this" popup for 0.5 seconds just before it sends me to the script. What do I need to do? Seems like it's a problem in jquery maybe? Haris.

 <form class="form-horizontal" role="form">
     <div class="form-group">
         <label for="inputEmail" class="col-sm-3 control-label">Epost :</label>
         <div class="col-sm-9">
             <input type="email" class="form-control" id="inputEmail" placeholder="Epost" required="required">
         </div>
     </div>
     <div class="form-group">
         <div class="col-sm-offset-3 col-sm-3">
             <button type="submit" href="javascript:;" class="simpleCart_checkout">
                 <img src="/images/bla.png" alt="Kort">
             </button>
         </div>
     </div>
</form>

this form is in the checkout. At the bottom (payson image)

Called javascript:

 simpleCart({
    currency: "SEK",
    checkout: {
        type: "SendForm",
        url: "http://bla.com/checkout.php",
        method: "POST",
        currency: "SEK"


    },
    shippingCustom: function () {
        if (simpleCart.total() > 4500) {
            return 0;
        } else {
            return 0;
        }
    },

    cartStyle: "table",
    cartColumns: [
    /* Picture (same for every product right now) */
    /* Name */
        { attr: "name", label: "Produkt" },
        { view: "decrement", label: "Minska" },
        { attr: "quantity", label: "Kvantitet" },
        { view: "increment", label: "Höj" },
    /* Price */
        { attr: "price", label: "Pris", view: 'currency' },
        { attr: "total", label: "SubTotal", view: 'currency' },
    /* Remove */
        { view: "remove", text: "Ta bort", label: false }
    ]


});
simpleCart.bind('beforeCheckout', function (data) {
    data.email = document.getElementById("inputEmail").value;
});

Answer 1

try to replace this line:

    <input type="email" class="form-control" id="inputEmail" placeholder="Epost" required="required">

with this:

    <input type="email" class="form-control" id="inputEmail" placeholder="Epost" required />