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. https://stackoverflow.com/questions/4139975/how-do-you-make-a-submit-button-in-html5 — Rafee, Dec 19 '17 at 09:32
@Rafee did you not see the js code to submit? `$("#submit")` — freedomn-m, Dec 19 '17 at 09: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? — freedomn-m, Dec 19 '17 at 09:37
You don't check if your form is valid before submitting it: https://stackoverflow.com/questions/6658937/how-to-check-if-a-form-is-valid-programmatically-using-jquery-validation-plugin — freedomn-m, Dec 19 '17 at 09:38
I think what he meant is he is not getting HTML5 form validation even after giving required attribute. — Sunil Hari, Dec 19 '17 at 09:38
@freedomn-m In order to form to submit, you can trigger a form to submit by javascript or by `submit` button. And OP has only regular button that would not trigger any form submit. regarding the serialization, jquery can do serialization if you just give the form id. — Rafee, Dec 19 '17 at 09:39
@Rafee I'm not sure what you're trying to say - OP *does* have javascript to submit and confirmed it's working correctly, yet you're saying the button is wrong (which it's not). If OP followed your suggestion and *incorrectly* made the button a submit then it would submit twice and the question would be entirely different (and the same as numerous other questions on SO where people have incorrectly used both a submit button and submit code) — freedomn-m, Dec 19 '17 at 09:42
@SunilHari thanks - I also believe that, but prefer the way you put it. "it's not working" is generally too vague and leads people down red-herrings (such as suggesting the button should be type=submit) so OP should make it clear in the question. — freedomn-m, Dec 19 '17 at 09:44

Sunil Hari · Answer 1 · 2017-12-19T09:45:13.663

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 '17 at 09:45

answered Dec 19 '17 at 09:29

Sunil Hari

1,716
1
12
20

`#submit` is not a form, its a submit button element. Your previous answer was correct. – Rafee Dec 19 '17 at 09:41
@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 Dec 19 '17 at 09:44
@Rafee Got the mistake.Corrected it – Sunil Hari Dec 19 '17 at 09:45
Thanks All, I've tried changing both its `type="submit"` and `type="button"` but validation required is not working – irwan dwiyanto Dec 19 '17 at 09:47
which browser are you using ?? – Sunil Hari Dec 19 '17 at 09:48
@Rafee:Thank You – Sunil Hari Dec 19 '17 at 09:50
@irwandwiyanto Can you mark this question as answer. – Rafee Dec 19 '17 at 09:52
OP has already confirmed that the form submit mechanism is working - using a *standard* button type=button and button on click with ajax. There's no need to rewrite the submit mechanism. As you pointed out in the comments, *"he is not getting HTML5 form validation even after giving required attribute"* - which this answer does not address. **Unless** changing it to a submit *does* automatically kick in the HTML validation (which it may do) - but this answer doesn't state *why* to change the submit mechanism. – freedomn-m Dec 19 '17 at 09:59
@irwandwiyanto Have you updated the javascript code? Can you post a fiddle? – Rafee Dec 19 '17 at 10:09

Can not get required when insert with ajax

1 Answers1