要求不工作

Question

如果没有输入，我正在尝试设置所需的，但它不起作用。

即使没有输入，按钮也能正常工作，不会显示所需的警报。

我该如何解决这个问题，谁能帮我解决这个问题！

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>

脚本--

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

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

Answer 1

尝试在 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 2

您的语录：

<input  type="text" id= "nameSearch" name="nameSearch" class="form-control required >
    </div>

看到这个：

<input  type="text" id= "nameSearch" name="nameSearch" class="form-control" required >
    </div>

Answer 3

请注意，添加 required class 不会阻止您提交表单。

您似乎在使用 Bootstrap，它提供输入 "validation state" class，例如 has-error。但这只是改变了输入的外观，而不是功能。看这里：http://getbootstrap.com/css/#forms-control-validation

查看 HTML5 表单验证：http://www.the-art-of-web.com/html/html5-form-validation/

还要查看它是否适用于您正在使用的浏览器：http://caniuse.com/#feat=form-validation

Answer 4

添加一个小的匿名 jQuery 函数来检查 HTML5 表单的有效性状态..

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

然后在您的提交中使用它

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

    if(this.isValid()){

    } else {

    } 

});

要求不工作

required is not working

required