required is not working

Question

i am trying to set the required if there is no input, but it does not work.

Even if there is no input the button works and does not show the required alert.

How can i fix this issue, can someone help me to fix this !

Html --

<form id="searchform"> 
        <div style="padding: 0px 10px 0px 0px;" class="col-md-3">
            <input  type="text" id= "nameSearch" name="nameSearch" class="form-control" required >
        </div>
        <button type="submit" class="btn btn-default" id="submitSearch">
            <i class="fa fa-search"></i> {% trans %}Search{% endtrans %}
        </button>
    </form>

Script --

    $("#submitSearch").on('click', function () {
    var data = {};
    data['nameSearch'] = $('#nameSearch').val();

    $.ajax({
        url: '/hello/search',
        type: 'post',
        data: data,
        success: function (data) {
        ...........

Answer 1

Add a small anonymous jQuery function to check the HTML5 validity status of a form..

(function( $ ){
    $.fn.isValid = function() {
        return checkValidity();
    };
})(jQuery);

and then use this in your submit

$('#submitSearch').on('click', function(e) {

    if(this.isValid()){

    } else {

    } 

});