I have this form:

```
<form method="post" action="#" data-action="ajax.php?method=create" class="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-md-2 control-label">Name</label>
        <div class="col-md-8">
            <input name="name" type="text" value="" class="form-control" required>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">Location</label>
        <div class="col-md-8">
            <input name="location" type="text" value="" class="form-control" required>
        </div>
    </div>
</form>

```

I want to perform some basic validation on this form. However, my find().each() code doesn't work at all.

Here is that code:

```
$(document).on('submit', '[data-action]', function (event) {
    event.preventDefault();

    var form = $(this);

    // ensure required fields are filled in
    form.find('[required]').each(function() {
        alert('required field found');
    });
});

```

I am not getting any alerts even though the form clearly has 2 required inputs.

Why is this happening?