Can not get required when insert with ajax

Question

I try to insert data using ajax, to submit and it runs perfectly, but I add required on input and select option but not running, if anything wrong?

<form role="form" id="form-add"  class="form-horizontal form-label-left">       
    <div class="form-group">                    
        <label for="no_surat">Name * :</label>
        <input type="text" name="nm"  class="form-control" required />
    </div>
    <div class="form-group">                    
        <label for="no_surat">Age * :</label>
        <input type="text" name="ag"  class="form-control" required />
    </div>
    <div class="form-group">                    
        <label for="no_surat">Addres * :</label>
        <input type="text" name="ad"  class="form-control" required />
    </div>
    <button type="button" id="submit" class="btn btn-success"> Download </button>
</form>

AJAX

$("#submit").on('click', function(event) {
    event.preventDefault();
        $.ajax({
            type: "POST",
            url: base_url+"add",
            dataType: 'json',
            data: $('#form-add').serialize(),
            success: function(res) {
                console.log('res');
            },
            error: function (request, jqXHR, textStatus, errorThrown) { 
                console.log(request.responseText);
            }       
        });
});

your submit is just a button not a actual submit behavior button. stackoverflow.com/questions/4139975/… — Rafee
– Rafee, Commented Dec 19, 2017 at 9:32
@Rafee did you not see the js code to submit? $("#submit") — fdomn-m
– fdomn-m, Commented Dec 19, 2017 at 9:36
"but not running" - can you clarify what this means? Do you mean the form no longer submits? Your on("click") code doesn't fire? It all works fine except the fields are not blocking the submit? — fdomn-m
– fdomn-m, Commented Dec 19, 2017 at 9:37
I think what he meant is he is not getting HTML5 form validation even after giving required attribute. — Sunil Hari
– Sunil Hari, Commented Dec 19, 2017 at 9:38

Sunil Hari · Accepted Answer · 2017-12-19 09:45:13Z

0

Please change button type to submit

<button type="submit" id="submit" class="btn btn-success"> Download </button>

and add an event handler for submit

$('#form-add').submit(function(event){
    // cancels the form submission
    event.preventDefault();
});

edited Dec 19, 2017 at 9:45

answered Dec 19, 2017 at 9:29

Sunil Hari

1,7941 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Rafee Over a year ago

#submit is not a form, its a submit button element. Your previous answer was correct.

Sunil Hari Over a year ago

@Rafee did not understand your comment.My previous answer was wrong because once the button is made to submit ,it would submit the form and would navigate from the page.He is using ajax to do the insert.Hence this answer

Sunil Hari Over a year ago

@Rafee Got the mistake.Corrected it

irwan dwiyanto Over a year ago

Thanks All, I've tried changing both its type="submit" and type="button" but validation required is not working

Sunil Hari Over a year ago

which browser are you using ??

|

Collectives™ on Stack Overflow

Can not get required when insert with ajax

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related