How to validation of input text field in ajax?

Question

My javascript code is like this :

$.ajax({
    url:base_url+"agent_control/manage_booking/get_pax",
    type: "post",
    data: {id: id},
    success:function(data) {
        App.unblockUI();
        var code = JSON.parse(data);
        var isitable;
        var j;
        for(var i = 0; i < code.length; i++) {
            j = i + 1;
            isitable += '<tr>';
            isitable += '<td>'+code[i].transactionpax_title+' '+code[i].transactionpax_firstname+' '+code[i].transactionpax_lastname+'</td>';
            isitable += '<td><input type="text" id="tiket_number_'+i+'" class="form-control required" /></td>';
            isitable += '</tr>';
        }
        isitable += '<tr><td>&nbsp;</td><td><input type="button" value="Submit" class="btn blue dropdown-toggle submit_tiket_number" id="'+id+'" data="'+code.length+'" /></td></tr>';
        $("#data_tiket_number").find("tbody").html(isitable);
        $('#data_tiket_number').modal('show');
    }
});

Look here : <input type="text" id="tiket_number_'+i+'" class="form-control required" />

I had add required in text input. But it's not working If the text input is empty, when I click submit there was no message required

Any solution to solve my problem?

Thank you very much

If you have some event handlers for input.required then I suggest you that you use proper event delegation. like $(document).on('event', 'input.required', function(){}); — rrk
– rrk, Commented Feb 25, 2016 at 22:58
@RejithRKrishnan, In my opinion, it does not work because the text input in ajax — moses toh
– moses toh, Commented Feb 25, 2016 at 23:01
instead of <input type="text" id="tiket_number_'+i+'" class="form-control required" />, use <input type="text" id="tiket_number_'+i+'" class="form-control" required /> to use the native browser validation — mylee
– mylee, Commented Feb 26, 2016 at 3:13
@mosestoh is this table part of a <form>..? If so, did you try mylee's suggestion..? Make sure your document id HTML5 — T J
– T J, Commented Feb 26, 2016 at 4:04

Nikolay Ermakov · Accepted Answer · 2016-02-26 03:24:51Z

1

You have to do three things:

make sure you have form around your table
move required out of the class
change your button type from button to submit

Check demo - Fiddle

for(var i = 0; i < code.length; i++) {
    j = i + 1;
    isitable += '<tr>';
    isitable += '<td>'+code[i].transactionpax_title+' '+code[i].transactionpax_firstname+' '+code[i].transactionpax_lastname+'</td>';
    isitable += '<td><input type="text" id="tiket_number_'+i+'" class="form-control" required/></td>';
    isitable += '</tr>';
}
isitable += '<tr><td>&nbsp;</td><td><input type="submit" value="Submit" class="btn blue dropdown-toggle submit_tiket_number" id="'+id+'" data="'+code.length+'" /></td></tr>';

answered Feb 26, 2016 at 3:24

Nikolay Ermakov

5,0712 gold badges14 silver badges19 bronze badges

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

4 Comments

Nikolay Ermakov Over a year ago

I can't see this question

moses toh Over a year ago

stackoverflow.com/questions/36126170/…

moses toh Over a year ago

It is okay. Thank you

moses toh Over a year ago

I need you help. Look here : stackoverflow.com/questions/38175735/…

Collectives™ on Stack Overflow

How to validation of input text field in ajax?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related