I have a dialog box with some form fields.When I click on the submit button inside this dialog box the form is not validating using HTML5 attributes.But I can validate the form using Jquery validate plugin.But I need to do HTML5 native validation on button click, this is not working.

My code is as below.

=====================

    $("#popup").dialog({ 

    autoOpen: false,

    title : "View/Edit Screen",

    dialogClass : "pop-content pop-header-colr pop-button pop-float",

    width:800,

    height:650,

    modal: true,

    resizable: false,

    show: 'clip',

    buttons:{

    'SUBMIT':function(){

    var accs_lvl = $('#accs_lvl').val();alert("accs_lvl "+accs_lvl);

    var curr_page = $('#curr_page').val();alert("curr_page "+curr_page);

    if(accs_lvl==1 || (curr_page=='cis' && accs_lvl==6))

    {

    var url_path = 'url_path';

    var args = {"formData":JSON.stringify(ConvertFormToJSON('#pop_up_form')),

    "bkup_doc_path":$('#bkup_doc_proof').val(),

    "lttr_doc_path":$('#lttr_doc').val()

    };

    }

    if(accs_lvl==2 || accs_lvl==3 || ((curr_page=='ofac' || curr_page=='fla') && accs_lvl==6 ))

    {

    var url_path = 'url_path';

    var args = {"chkReqIDs":$('#chk_req_id').val(),

    "actionCode":$('#change_status').val(),

    "notes":$('#reason_notes').val()

    };

    }

    $.ajax({

    url:url_path,

    type:'GET',

    data:args,

    success: function(data){

    //alert("success");

    $('#popup').dialog('close');

    $("#cmn_sbmt").click();

    },

    error:function(xhr,textStatus,errorThrown){

    alert(errorThrown);

    }

    })

    }

    }

    }

    });

Am I missing some thing here to do html5 native validation. Can any one please help me out resolve this.

Your timely help is appreciated.

Thanks in advance.