HTML5必需的输入属性让我提交一个表单

Question

I have a super simple form:

<form>
    <input name="name" placeholder="Your name" required>
    <input name="email" type="email" placeholder="Your email" required>
    <input type="submit" value="Submit">
</form>

I'm submitting it using some jQuery (CoffeeScript style):

$('form').submit (event) ->
    do event.preventDefault()

    $.post('../mail.php', $('form').serialize(), (data) ->
        do $('form')[0].reset
    )
    .done -> ...
    .fail -> ...
    .always -> ...

In Chrome (as in Chrome Canary) it works like a charm, and it won't let me submit my form if some of the inputs are empty (it also displays the "Please fill out this field" message, as it should). In a lot of other browsers though (Safari, WebKit Safari ie) it lets me submit the form with all the inputs empty.

What could the problem be? I'm a little worried about that event.preventDefault , maybe it stops some browsers from checking the input s?

Answer 1

You can't rely on the support of required yet (unfortunately). See: http://caniuse.com/#feat=form-validation As you can see Safari is not yet fully supporting this API.

You shouldn't rely on this after all commonly used the browser implemented it either, as a malicous visitor might use a non-default browser and just skip these checks.