required is not working - required

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 {
}
});

Answer 2

Please note that adding the required class wont prevent your form from being submitted.
It looks like you're using Bootstrap, which offers input "validation state" classes, like has-error. But this just changes the look of the input, not functionality. See here: http://getbootstrap.com/css/#forms-control-validation
Have a look at HTML5 form validation: http://www.the-art-of-web.com/html/html5-form-validation/
And also look whether it will work on the browser you are working with: http://caniuse.com/#feat=form-validation

Answer 3

try adding " in class="form-control":
<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>

Answer 4

Your quotations:
<input type="text" id= "nameSearch" name="nameSearch" class="form-control required >
</div>
See this:
<input type="text" id= "nameSearch" name="nameSearch" class="form-control" required >
</div>